React Hello World Examples
2020-01-03
目次
概要
Reactの入門として、Reactの基本的な機能群を使用してHello Worldを行ってみました。
・ノーマル Hello World
・関数コンポーネント Hello World
・クラスコンポーネント Hello World
導入
Create React Appを使用して環境構築を行います。
npm
npx
デフォルトで入っているはずなので下記で導入ができます。
npx create-react-app my-app
cd my-app
npm start
Sass & Scss 導入
こちらの記事を参考に
node-sass
sass
① まずはノーマルの Hello world!
/src/index.js
/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './sass/index.scss';
const say = 'Hello, World!';
ReactDOM.render(
<div>
<h1>{ say }</h1>
</div>,
document.getElementById('root')
);
ポイント
- ReactとReactDomをimportしていないと怒られます。
- ReactDom.render内で、表示するDOMを定義しています。
- getElementで取得しているというDOM内に追加されます。
id="root"
- ReactDom.renderで返されるDOMは1つのDOM要素である必要があります。
今回は1つの要素を返していることになります。<div>
- 3 行目のでscssを読み込んでいます。
import './sass/index.scss';
のディレクトリに/src/sass/
を作成して、背景色等を変更し、index.scss
変更が適用されるか確認してみましょう。
body {
background: #f2f2f2;
}
表示結果
上記の様に実装すると、このように表示されるはずです
変数
say
② 関数コンポーネントで Hello World!
今度は
/src/index.js
/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './sass/index.scss';
const say = 'Hello, World!';
// 関数コンポーネント
function Hello(props) {
return <h2>Hello, {props.name}!</h2>;
}
ReactDOM.render(
<div>
<h1>{ say }</h1>
<Hello name="hoge" />
</div>,
document.getElementById('root')
);
ポイント
- 関数コンポーネントとは文字通り、関数によって作られたコンポーネントです。
render 内で呼び出す際には関数名を呼び出します。 - 関数コンポーネントは引数としてpropsを受け取ります。
render 内で呼び出しの際に記述しているがprops.nameで使用できます。name="hoge"
- render 内で記述されるタグは頭文字が小文字の場合DOM要素、
頭文字が大文字の場合コンポーネントとして認識されます。
表示結果
上記の様に実装を行うとこのように表示されるはずです。
Hello コンポーネントを呼び出している箇所で渡す名前を自分の名前に変更してみてください。
挨拶してくれるはずです
③ クラスコンポーネントで Hello World!
今度は
/src/index.js
/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './sass/index.scss';
const say = 'Hello, World!';
// クラスコンポーネント
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Bob'
}
}
setName = (e) => {
this.setState({
name: e.target.value
});
}
render() {
return (
<div>
<h2>Hello, {this.state.name}!</h2>
<label for='name'>input your name!</label>
<input type='text' onChange={this.setName} />
</div>
);
}
}
ReactDOM.render(
<div>
<h1>{ say }</h1>
<Hello />
</div>,
document.getElementById('root')
);
ポイント
- クラスコンポーネントは独自のstate(状態)を持つことができます。
- state を使用する場合にはコンストラクタが必須になり、
このコンストラクタ内での初期値を設定します。state
また、このコンストラクタでは必ず引数に props を受け取り、を行う必要がありますsuper(props)
constructor(props) {
super(props);
this.state = {
name: 'Bob'
}
}
- stateは直接変更をしてはいけません。
今回の場合はで<input type='text' onChange={this.setName} />
を呼び出して、その関数内でthis(コンポーネント内の).setName
を使用してsetState
stateを変更しています。
setName = (e) => {
this.setState({
name: e.target.value
});
}
- クラスコンポーネント内ので返却する DOM 要素を定義しています。
render()
ここでも DOM 要素を 1 つで返す必要があるので、で囲っています。<div>
- コンポーネント内の state を DOM 要素内で取得する場合は
{this.state.name}
というように記述します。
render() {
return (
<div>
<h2>Hello, {this.state.name}!</h2>
<label for='name'>input your name!</label>
<input type='text' onChange={this.setName} />
</div>
);
}
表示結果
上記の様に実装を行うとこのように表示されるはずです。
名前を入力して変更されるか試してみてください