この記事は社内勉強会用として作られました。
Pro Reactという本を読みながら進みます。
本の内容と異なる部分
- 本のサンプルをESlintとAirbnbのスタイルガイドに合わせて直しました。
- create-react-appを用いてプロジェクトを生成しました。
本のサンプルはここで確認してください。
目次
- Reactのスタート
- Reactのプロジェクト
- Reactで挨拶
Vimの設定
Vimの環境設定は他の記事で扱う予定です。
ここではReactを学ぶことが目的なので、下記のファイルでVimの環境設定を行なってください。
% cd ~
% git clone https://gitlab.com/devtopia/dotfiles.git
% ln -sf dotfiles/.vim .vim
% ln -sf dotfiles/.vimrc .vimrc
% ln -sf dotfiles/.eslintrc .eslintrc
% ln -sf dotfiles/.tern-project .tern-project
# Vimの設定ファイルからフラグインをインストール
% vim .vimrc
:PlugInstall!
rubyとjavascriptの場合はrubocopとeslintのスタイルガイドを適用しています。
rubocopとeslintが先に設置されている必要があります。
gemとnpm（またはyarn）でそれぞれ設置してください。
vimprocというpluginを使うためgcc（make）、macOSの場合はxcodeが必要です。
xcodeが設置されてない方は次のコマンドで設置してください。
% sudo xcode-select --install
第一歩、挨拶
- 新規
- src/components/Hello.js
修正
- src/index.js
src/components/Hello.js
diff --git a/src/components/Hello.js b/src/components/Hello.js
new file mode 100644
index 0000000..1dc66a9--- /dev/null+++ b/src/components/Hello.js@@ -0,0 +1,11 @@+import React from 'react';++class Hello extends React.Component {+ render() {+ return (+ <h1>Hello World</h1>+ );+ }+}++export default Hello;- src/index.js
diff --git a/src/index.js b/src/index.jsindex 53c7688..219b78a 100644--- a/src/index.js+++ b/src/index.js@@ -1,8 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import App from './App';+import Hello from './components/Hello';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
-ReactDOM.render(<App />, document.getElementById('root'));+ReactDOM.render(<Hello />, document.getElementById('root'));
registerServiceWorker();
💡 Check
- stateless componentについて調べてください。
- stateless componentで修正してみましょう。
分割代入（Destructuring assignment）
- 修正
- src/components/Hello.js
diff --git a/src/components/Hello.js b/src/components/Hello.jsindex 1dc66a9..bae48e4 100644--- a/src/components/Hello.js+++ b/src/components/Hello.js@@ -1,6 +1,6 @@-import React from 'react';+import React, { Component } from 'react';-class Hello extends React.Component {+class Hello extends Component {
render() {
return (
<h1>Hello World</h1>
Dynamic Values
- 修正
- src/components/Hello.js
diff --git a/src/components/Hello.js b/src/components/Hello.jsindex bae48e4..66b65fc 100644--- a/src/components/Hello.js+++ b/src/components/Hello.js@@ -2,8 +2,9 @@ import React, { Component } from 'react';
class Hello extends Component {
render() {
+ const place = 'World';
return (
- <h1>Hello World</h1>+ <h1>Hello {place}</h1>
);
}
}
💡 Check
- var, let, constについて調べてください。
Composing Components（props）
- 新規
- src/components/GroceryList.js
- src/components/ListItem.js
修正
- src/index.js
src/components/GroceryList.js
diff --git a/src/components/GroceryList.js b/src/components/GroceryList.js
new file mode 100644
index 0000000..6fe4c05--- /dev/null+++ b/src/components/GroceryList.js@@ -0,0 +1,16 @@+import React, { Component } from 'react';+import ListItem from './ListItem';++class GroceryList extends Component {+ render() {+ return (+ <ul>+ <ListItem quantity="1" name="Bread" />+ <ListItem quantity="6" name="Eggs" />+ <ListItem quantity="2" name="Milk" />+ </ul>+ );+ }+}++export default GroceryList;- src/components/ListItem.js
diff --git a/src/components/ListItem.js b/src/components/ListItem.js
new file mode 100644
index 0000000..8285ebc--- /dev/null+++ b/src/components/ListItem.js@@ -0,0 +1,11 @@+import React, { Component } from 'react';++class ListItem extends Component {+ render() {+ return (+ <li>{this.props.quantity} x {this.props.name}</li>+ );+ }+}++export default ListItem;- src/index.js
diff --git a/src/index.js b/src/index.jsindex 219b78a..d690d95 100644--- a/src/index.js+++ b/src/index.js@@ -1,8 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import Hello from './components/Hello';+import GroceryList from './components/GroceryList';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
-ReactDOM.render(<Hello />, document.getElementById('root'));+ReactDOM.render(<GroceryList />, document.getElementById('root'));
registerServiceWorker();
💡 Check
- コンポーネント間で情報の受け渡しについて調べてください。
- single quotation('')とdouble quotation("")を変更しながら確認してみましょう。
Composing Components（props.children）
修正
- src/components/GroceryList.js
- src/components/ListItem.js
src/components/GroceryList.js
diff --git a/src/components/GroceryList.js b/src/components/GroceryList.jsindex 6fe4c05..9a419b3 100644--- a/src/components/GroceryList.js+++ b/src/components/GroceryList.js@@ -5,9 +5,9 @@ class GroceryList extends Component {
render() {
return (
<ul>
- <ListItem quantity="1" name="Bread" />- <ListItem quantity="6" name="Eggs" />- <ListItem quantity="2" name="Milk" />+ <ListItem quantity="1">Bread</ListItem>+ <ListItem quantity="6">Eggs</ListItem>+ <ListItem quantity="2">Milk</ListItem></ul>
);
}
- src/components/ListItem.js
diff --git a/src/components/ListItem.js b/src/components/ListItem.jsindex 8285ebc..f3904bb 100644--- a/src/components/ListItem.js+++ b/src/components/ListItem.js@@ -1,11 +1,17 @@
import React, { Component } from 'react';
class ListItem extends Component {
render() {
return (
- <li>{this.props.quantity} x {this.props.name}</li>+ <li>{this.props.quantity} x {this.props.children}</li>
);
}
}
export default ListItem;
💡 Check
- エラーを修正してください。
- props validationについて調べてください。