間違い指摘大歓迎です
環境
JSFiddle
Reactはインクルードするだけで使える
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="main"></div>
<script>
ReactDOM.render(
React.createElement('h1', null, 'Hello World'),
document.getElementById('main')
)
</script>
</body>
</html>
Reactはコンポーネントでできている
オブジェクト指向みたいな感じ。
class MyComponent extends React.Component {
render() {
return React.createElement('h1', null, 'Hello World')
}
}
ReactDOM.render(
React.createElement(MyComponent),
document.getElementById('main')
)
コンポーネントにはプロパティとステートがある
プロパティ
class MyComponent extends React.Component {
render() {
return React.createElement('h1', null, this.props.val)
}
}
ReactDOM.render(
React.createElement(MyComponent, {val: 'hoge'}),
document.getElementById('main')
)
ステート
class MyComponent extends React.Component {
constructor(props, context, updater) {
super(props, context, updater)
this.state = {status: 'Ready'}
}
render() {
return React.createElement('h1', null, this.state.status)
}
}
ReactDOM.render(
React.createElement(MyComponent),
document.getElementById('main')
)
Reactは仮想DOMを使う
差分を勝手に更新してくれる。
JSXは JavaScript XML
// not JSX
ReactDOM.render(
React.createElement('h1', null, 'Hello World'),
document.getElementById('main')
);
// JSX
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('main')
)
コンポーネントとはHTML要素を表現する部品
ReactDOM.render(HTML要素, 対象)
React.createElement(タグ, 連想配列, 値)
仕掛けを持たせたコンポーネント
onKeyPressのイベントハンドラはキャメルケース。
class MyComponent extends React.Component {
render() {
return React.createElement(
'input',
{type: 'text',
placeholder: 'input val and press eneter',
onKeyPress: (e) => {
if (e.key === 'Enter' && e.target.value) alert(e.target.value)
}})
}
}
ReactDOM.render(
React.createElement(MyComponent),
document.getElementById('main')
)
countするtextbox。
renderの戻り値に要素の配列をセットする。
class MyComponent extends React.Component {
constructor(props, context, updater) {
super(props, context, updater);
this.state = {count: 0};
}
render() {
return [
React.createElement(
'input',
{type: 'text',
onChange: (e) => this.setState({count: e.target.value.length})}
),
React.createElement('span', null, this.state.count)
]
}
}
ReactDOM.render(
React.createElement(MyComponent),
document.getElementById('main')
)
一度ステートと要素を紐付けると、ステートの値を更新するだけで要素の内容も更新される。
ライフサイクルメソッドを使ってみる
class MyComponent extends React.Component {
constructor(props, context, updater) {
super(props, context, updater);
this.state = {count: 0};
}
render() {
return [
React.createElement(
'input',
{type: 'text',
onChange: (e) => this.setState({count: e.target.value.length})}
),
React.createElement('span', null, this.state.count)
]
}
componentDidMount() {
console.log('mounted');
}
componentWillUpdate(nextProps, nextState) {
console.log('update state:', nextState);
}
}
ReactDOM.render(
React.createElement(MyComponent),
document.getElementById('main')
)
BabelでJSX
class MyComponent extends React.Component {
render() {
return [
<h1>hogehoge</h1>,
<input type="text" size="10" />
]
}
};
ReactDOM.render(
React.createElement(MyComponent),
document.getElementById('main')
)
JSXとHTMLの違い
閉じタグ必須。
render() {
return ([
<p>hoge</p>,
<br />,
<p>fuga</p>
]);
}
ハンドラはキャメル。
doChange(e) {
//
}
- classとforはclassName, htmlFor
- スタイルは{{ }}
- HTMLのハイフンスタイルはキャメルで
<h1
className = 'hoge'
style={{
fontStyle: 'italic',
color: 'red'
}}>
hoge
</h1>
renderのreturnは()
render() {
return (
//
//
);
}
JSXのなかでJavaScript
式の評価ができる。
render() {
return (
<div>
{
// comment
}
{/*
comments
*/}
<p>{hoge}</p>
<p>{score > 70 ? 'good':'bad'}</p>
</div>
);
}
JSXでコンポーネントを作る
class MyComponent extends React.Component {
render() {
return (
<h1>{this.props.val1 + this.props.val2}</h1>
);
}
};
ReactDOM.render(
<MyComponent val1='hoge' val2='fuga' />,
document.getElementById('main')
)
class MyComponent extends React.Component {
render() {
return (
<h1>{this.props.children}</h1>
);
}
};
ReactDOM.render(
<MyComponent>hogehoge</MyComponent>,
document.getElementById('main')
)
まとめ
Reactはなんとなくモバイル開発に似ているなーと思った。webだけどswiftでios開発しているような。