【React入门】总结了Progate学习的笔记(备忘录)
React 是一种用于构建用户界面的开源JavaScript库。
React是一个用于构建用户界面的JavaScript库（来自React官方网站）。
React作为JavaScript的框架，具有高可读性，可以非常轻松地编写代码。因此，在使用时需要具备JavaScript知识作为先决条件。
对React进行规范
App.js
JSXとJS ( JavaScript ) の記述部分に分かれている。
renderメソッドのreturn内のみ、JSXで記述する必要がある。
JSXで記述された要素はブラウザに表示される。
renderメソッドの内かつreturnの外にはJavaScriptを記述できる。
書き方
ほぼHTMLと同じ書き方ができる。HTMLではなくJSXと呼ぶ。
注意点
return内に複数の要素があるとエラーになるので、
タグで囲んで1つの要素として戻り値を設定すること。
コメント
JSXを{/* */}で囲むと、その部分はコメントになる。
imgタグの注意点
HTMLでは閉じタグが必要ないが、JSXでは閉じタグが必要になる。
のように、タグの終わりにスラッシュ「/」を記述すること。
JSXにJSを埋め込む
JavaScriptの部分を中括弧{ }
上記を使用した実装例が下記となる。
例
import React from ‘react’;
class App extends React.Component {
render() {
// 定数nameを定義してください JSコメント
const name = “haru”;
// 定数imgUrlを定義してください JSコメント
const imgUrl = “hogehoge.png”;
return (
{ name }
{/* 定数imgUrlを用いて画像が表示されるようにしてください JSXコメント*/}
);
}
}
export default App;
イベント
イベントを用いると、「何かが起きたときに、処理を実行するように指定。
クリックされた時に処理を実行する」→ onClickイベントがある。
例
state
次は「こんにちは、◯◯さん！」の◯◯という名前の部分が変わるようにする。
このように、ユーザーの動きに合わせて変わる値のことを、Reactではstateと呼ぶ。
流れとしては以下の考え方。
state定義 → state表示 → state変更
state定義
stateは、constructorの中で、オブジェクトとして定義する。
例
import React from ‘react’;
class App extends React.Component {
constructor(props) {
super(props);
// stateを定義
this.state = {name: ‘haru’}
}
…
state表示
上記の例でいうと、this.stateはオブジェクトなので、this.state.プロパティ名とすることで、指定したstateのプロパティ名に対応する値を取得できます。
例
import React from ‘react’;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name: ‘haru’};
}
render() {
return (
こんにちは、{this.state.name}さん！
….以下略….
state変更
this.setState({プロパティ名: 変更する値})とすることで、指定されたプロパティに対応するstateの値が変更される。
注意：「stateの値に直接代入することで値を変更してはいけない」という決まりがあります。値を変更したい場合は、setStateを使うこと。
下記が、state定義、state表示、state変更を実装例である。
例
import React from ‘react’;
class App extends React.Component {
constructor(props) {
super(props);
this.state = { name: ‘haru’ };
}
render() {
return (
こんにちは、{this.state.name}さん！
);
}
}
export default App;
メソッド化
上記のstateをメソッド化する。
「stateのnameプロパティの値を変更する処理」を行うhandleClickメソッドを作る。
例
import React from ‘react’;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name: ‘haru’};
}
// メソッド定義(引数:name)
handleClick(name) {
this.setState({name: name})
}
render() {
return (
こんにちは、{this.state.name}さん！
{/* this.handleClick(引数)でメソッド呼び出し */}
);
}
}
export default App;
Reactのブラウザに表示される流れ
ブラウザに表示される流れは以下の
App.js → index.js → index.htmlへと順番に変換されていく。
具体的なコードは以下となる。
App.js
import React from ‘react’;
class App extends React.Component {
render() {
return (
Hello World
一緒にReactを学びましょう！
);
}
}
export default App;
↓
index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./components/App’;
// 以下の定型文がreactで書いたコードをhtmlへ変換して、投げる文
ReactDOM.render(, document.getElementById(‘root’));
↓
index.html
CSS(スタイルシート)の表記
基本的にはhtmlと変わらないが、classを使用する際微妙な違いがある。
htmlではクラスをclass=” “と定義していたが、jsxではclassName= “”とする。
cssに表記する際は同じである。
jsx
Hello World
{/* class=””ではない */}
css
.title {
color: #e6855e;
background-color: #f3f372;
}
コンポーネント
コンポーネントは「部品」や「パーツ」という意味。
Reactでは、見た目を機能ごとにコンポーネント化して、コンポーネントを組み合わせることでWebサイトの見た目を作る。
コンポーネントは主処理のApp.jsに渡すことで実装をする。
つまりブラウザ表示の流れは以下となる。
コンポーネント(Language.js) → App.js → index.js → index.html
Language.js
import React from ‘react’;
class Language extends React.Component {
render() {
return (
);
}
}
// Languageコンポーネントをエクスポート
export default Language;
App.js
import React from ‘react’;
// Languageコンポーネントをインポート
import Language from ‘./Language’;
class App extends React.Component {
render() {
return (
言語一覧
);
}
}
export default App;
props
作成したコンポーネントは何回でも使うことができる。しかし、そのまま使うと表示タイトルや表示画像はそのままで出力されてしまう。
App.jsから、各言語の名前と画像のデータをLanguageコンポーネントに渡すことによって、言語ごとに表示を変えることができる。App.jsから渡すこのデータをprops（プロップス）という。
「props名=値」という形で、コンポーネントを呼び出す箇所で渡せる。
App.js
import React from ‘react’;
import Language from ‘./Language’;
class App extends React.Component {
render() {
return (
言語一覧
{/* JavaScriptのpropsを渡す */}
{/* Reactのpropsを渡す */}
);
}
}
export default App;
Language.js
import React from ‘react’;
class Language extends React.Component {
render() {
return (
);
}
}
export default Language;
まとめ
以上、基本的な処理をまとめてみた。
これ以降は応用部分になっていたので、別記事として残そうかなと思っている。
