Reactとは
世界的に有名なJavaScriptのライブラリです。
Reactはサイトの見た目の部分を作ることができ、
Facebook、Airbnb、Dropboxなどの有名企業も多く使用しています。
##雛形
// Reactをimport
import React from 'react';
// React.Compornentを継承するクラスの定義
class アプリ名 extends React.Compornent {
constructor(props) {
super(props);
this.state = {変数: 値}
}
イベント名() {
}
// JSXを戻り値とするrenderメソッドを定義
render() {
return (
この中でJSXを記述する。
)
}
}
// クラスをexport
export default アプリ名;
##JSXとは
Reactで使うHTMLのことを言います。ほぼHTMLと同じですが呼び方が違います。
複数の要素がある場合には < div >タグを使う。
render() {
return (
<h1>見出し１</h1>
<h2>見出し２</h2>
// <img>タグには閉じタグ(/)が必要
<img src = '----'/>
)
}
##イベントの書き方
イベント名 = {() => { 処理 }} とすることでイベントを設定できます。
<button onClick = {() => { 処理 }}
##stateとは
ユーザーの動きに合わせて変わる値のことをいいます。
stateは、constructorの中で、オブジェクトとして定義します。
ここで定義したオブジェクトがstateの初期値となります。
その他の部分の、定型文として覚えておけば大丈夫です。
constructor(props) {
super(props);
this.state = {変数: 値}
}
###stateの表示
this.state.プロパティ名とすることで、指定したstateのプロパティ名に対応する値を取得できます。
constructor(props) {
super(props);
this.state = {name: '田中'}
}
render() {
return (
<h1>こんにちは、{this.state.name}さん！</h1>
)
}
###stateの変更
this.setState({プロパティ名: 変更する値})とすることで、指定されたプロパティに対応するstateの値が変更される。
Reactでは、「stateの値に直接代入することで値を変更してはいけない」という決まりがあります。
値を変更したい場合は、setStateを使いましょう。
<button onClick = {() => {this.setState({name: '佐藤'})}}>佐藤</button>
##コンポーネントとは
コンポーネントは「部品」や「パーツ」という意味です。
Reactでは、見た目を機能ごとにコンポーネント化して、コンポーネントを組み合わせることでWebサイトの見た目を作ります。
クラス名がコンポーネント名となり、下記の場合はLanguageがコンポーネント名となる。
import React from 'react';
class Language extends React.Component {
render() {
return(
JSXの記述
);
}
##コンポーネントの表示
1.作成したコンポーネントをexportする
export default Language;
2.App.jsで、コンポーネントをインポートし、JSX内に記述する。
import React from 'react';
// コンポーネントをインポート
import Language from './Language.js';
class Language extends React.Component {
render() {
return(
// JSX内に<コンポーネント名 />を記述する
<Language />
);
}
##propsとは
propsは、「props名=値」という形で、コンポーネントを呼び出す箇所で渡します。
タグの中身は、改行してあげることで見やすくなります。
渡されたpropsは、this.propsで取得できます。
this.propsは{ props名: 値}というオブジェクトになります。
<Language
prop名 = 値
/>
###propsの取得
this.propsと書くことで{props名: 値}というオブジェクトを取得できるので、「this.props.props名」とすることでpropsの値を取得できます。
<div className='language-item'>
<div className='language-name'>{this.props.name}</div>
<img
className='language-image'
src={this.props.image}
/>
</div>
##mapメソッドを利用する
mapメソッドで配列fruitListの各要素に対して順に処理を行い、各要素を < p >タグで囲んで表示しています。mapメソッドの戻り値はJSXなので、引数であるfruitItemは中括弧{}で囲むことに注意しましょう。
{languageList.map((languageItem) => {
return (
<Language
name = {languageItem.name}
image = {languageItem.image}
/>
)
})}
##コンポーネントが表示される流れ
コンポーネント
↓jsx
App.js
↓jsx
index.js
↓html
index.html
#####index.jsの中身は以下の記述を記載する。
import App from './compornents/App';
ReactDOM.render(<App />,document.getElementById('root');
#####index.htmlの中身は以下の記述を記載する。
<div id = 'root'>
// 指定したid名の要素の中に挿入される
</div>