触って覚えるReact ~ HelloWorld,コンポーネント基礎,state,prop ~

Published: 2017年1月22日 by tomsato

概要

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が表示される

hello01

サンプルプログラム

Lesson1

  • ReactのHelloWorld
    「container」のdiv要素にh1タグを描画している

Lesson2

  • コンポーネントの作成
    Reactはコンポーネントの組み合わせでアプリケーションを作成する
    この例ではHelloHeader,HelloFooterコンポーネントの2つを持つHelloAppコンポーネントをcontainerに描画させている

Lesson3

  • state,propについて
    Reactで用意しているデータを管理するための2つの変数について

props
コンポーネントは外部からプロパティを受け取って
それを表示させたりなどデータを扱うことができる
今回の例ではHelloAppコンポーネントに名前を渡して表示させる

state
そのコンポーネントが持っている状態で可変するデータを扱うことができる
今回の例ではstateデータとしてクリックカウント数を作成して表示させる

コメントを書く

※ Emailは公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

社内ツールなどの超小規模なAPIをGolangで実装する際にフレームワークを使うべきかを、実際にnet/httpを使った実装とフレームワークを使った実装を比較することでどれだけ優位性があるかを見ていきたいと思います。今回はフレームワークにはシンプルで使いやすそうなEchoを使うことにします。

vue-pdfを使ってNuxt.jsで作成しているアプリケーションに pdfスライドを表示させるサンプルを作成しました README.md通りに実装してもうまくいかないところがあったのでそのあたり含めてまとめます

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

カテゴリ一覧

タグ一覧