webエンジニアの日常

RubyやPython, JSなど、IT関連の記事を書いています

Reactが理解できない人のための、Reactチュートリアル①

react

f:id:s-uotani-zetakansu:20180118120800j:plain

こんにちは、さもです。

Reactが流行りだしてからしばらく経ちますが、フロントエンド、WEBサーバーサイドエンジニアの方々はもうReactを触ってみましたか？

Reactは一回理解できると、とても楽しく、（Reactに限らず仮想DOMは）強力に感じるのですが、初めはコンポーネントやステートなどの概念が理解できず、なかなか使ってみることが出来ませんでした。

僕は本家チュートリアルを頑張って読みながら実装してなんとか理解できました。

ですが、本家チュートリアルは英語で書かれてあり、かつ、結構なボリュームがあります。英語が苦手な人が始めてみるには少しハードルが高いのではないでしょうか。

そこで、シンプルな例を踏まえて、僕なりのチュートリアルをこれから書いていこうと思います。チュートリアルでは、簡単なフォームを実装してみたいと思います。

僕もReactを始めたばかりなので厳密には間違っているところもありますが、ざっくりとReactとはこんなものというのを感じ取ってもらえればと思います。

第1回目は「なぜReactを使うのか」について書いていきます

index

  1. なぜReactを使うのか
  2. componentとstate(これから書く)
  3. props(これから書く)
続きを読む

十数年ぶりに公立高校入試の英語を解いみて思ったこと

勉強

こんにちは、さもです。

最近ちょくちょく英語を勉強しようと、ラダーシリーズを読み始めています。

www.uosansatox.biz

Level１の美女と野獣とアインシュタインストーリーを読んで、今はLevel２の星の王子様を呼んでいます。

だんだんと読めるようになったところで、今なら高校入試の英語の試験もすらすら解けるはず！と思ったので、ためしに最後の長文読解だけ解いてみました。

問題はこちらです

resemom.jp

続きを読む

React+Railsで簡単なCRUDを作ってみました

react

こんにちは、さもです。

先日ついにReactに入門してみました。

www.uosansatox.biz

もともとこの記事はRailsにReactを導入する前にReactのチュートリアルで基礎を覚えようと言うものでした。

めでたく基礎をクリアしたので、いよいよRailsへ導入して、簡単なCRUDを作ってみました。

完成形はこんな感じです。

ソースはこちらにあります。

続きを読む

SyntaxError: unknown: Adjacent JSX elements must be wrapped in an enclosing tag

react

こんにちは、さもです。

Reactで以下のエラー

SyntaxError: unknown: Adjacent JSX elements must be wrapped in an enclosing tag

の対処法メモです。

エラーメッセージにも書いてありますが、Reactのreturnは１つのタグしか返せないので、例えば、

class UserList extends React.Component
  ~~略~~
  render (
    <button>更新</button>
    <ul>{users}</ul>
  )
end

のようにすると、renderはbuttonタグとulタグを返そうとするのでエラーになります。

この場合は、

class UserList extends React.Component
  ~~略~~
  render (
    <div>
      <button>更新</button>
      <ul>{users}</ul>
    </div>
  )
end

としてあげるとOKです。

スポンサーリンク