概要
Reactを触る、今回は以下について端的にどんなものかを学ぶ
- Hello World
- Reactでコンポーネントを作る
- state,propについて
サンプルプログラムを自分の環境で簡単に用意して実際に動いているサンプルを見ながら概要を掴むことを目的とする
環境準備
検証環境について
$ cat /etc/redhat-release CentOS release 6.8 (Final)
npmを使うためnodejsを入れる
$ curl --silent --location https://rpm.nodesource.com/setup_6.x | sudo bash - // LTS(Long-term Support)であるnodejs6系を使うこととする $ sudo yum install -y --enablerepo=epel nodejs $ node -v v6.9.4 // サンプルを動かすためにhttp-serverを入れる $ sudo npm install -g http-server
サンプルプログラムを準備
$ git clone https://github.com/tomsato/react-sample $ cd react-sample $ npm start
この状態で「http://localhost:3000/lesson/01」を開くとHello worldが表示される
サンプルプログラム
Lesson1
- ReactのHelloWorld
「container」のdiv要素にh1タグを描画している
Lesson2
- コンポーネントの作成
Reactはコンポーネントの組み合わせでアプリケーションを作成する
この例ではHelloHeader,HelloFooterコンポーネントの2つを持つHelloAppコンポーネントをcontainerに描画させている
Lesson3
- state,propについて
Reactで用意しているデータを管理するための２つの変数について
props
コンポーネントは外部からプロパティを受け取って
それを表示させたりなどデータを扱うことができる
今回の例ではHelloAppコンポーネントに名前を渡して表示させる
state
そのコンポーネントが持っている状態で可変するデータを扱うことができる
今回の例ではstateデータとしてクリックカウント数を作成して表示させる
コメントを書く
コメント一覧