今回は【React】基礎編⓵としてReactにおける、
JSXについて、イベントについて、stateについての３つを主体として、
注意点等も混ぜながら、詳細に説明できればと思います。
雛形
まずはファイルの構成から見ていきましょう。
① Reactをimport
② React.Componentを継承するクラスの定義
③ JSXを戻り値とするrenderメゾットの定義
④ JSXの範囲
⑤ クラスをexport
import React from 'react'; ❶
class App extends React.Conponent { ❷
render() { ❸
return( ❹
.
JSX部分
.
);
}
}
export default App; ❺
JSXの書き方
JSXは、HTMLとほとんど同じように記述することができます。
下図のように記述することでブラウザ上にHELLO!!と表示されます。
// 省略
class App extends React.Conponent {
render() {
return(
<h1>HELLO!!<h1>
);
}
}
// 省略
JSXの注意点①
JSXはほとんどHTMLと同じですが、いくつか違いがあります。
return内に複数の要素があるとエラーになります。
複数の要素がある場合は、＜div＞タグで囲んで、1つの要素にまとめてあげましょう。
// 省略
class App extends React.Conponent {
render() {
return(
-------------------------
<h1>h1です</h1>
<h2>h２です</h2> ✖️悪い記述
<p>pです</p>
-------------------------
<div>
<h1>h1です</h1>
<h2>h２です</h2> ◯良い記述
<p>pです</p>
</div>
-------------------------
);
}
}
// 省略
JSXの注意点②
HTMLでは、imgタグ、inputタグ等は閉じタグが必要ありませんでした。
一方で、JSXでは閉じタグが必要になります。
// 省略
class App extends React.Conponent {
render() {
return(
<img src="---url---" /> // スラッシュが必要
<input type="text" />
);
}
}
// 省略
JSXにJavaScriptを埋め込む
クラス内はJSの範囲内なので、JavaScriptで変数や定数を定義することができます。
また、JavaScriptで定義した変数や定数をJSX内で埋め込むことも可能です。
// 省略
class App extends React.Conponent {
render() {
// JSXの範囲外で定義したJavaScriptの定数をJSX内で埋め込むことができる
const text = "HELLO!!";
return(
// 埋め込む方法は{}で囲みましょう
<h1>{text}</h1>
);
}
}
// 省略
イベント
イベントの書き方は下図の通りになります。
JavaScriptのアロー関数を使用して記述するので、{}を忘れないように気をつけましょう。
<button イベント名 = {() => { 処理 }}></button>
クリックイベントを使用する場合は下図の通りになります。
JSXではキャメルケースを使ってイベントの記述を行います。
// 省略
class App extends React.Conponent {
render() {
return(
<button onClick={()=>{console.log("Aボタンをクリックしました")}}>Aボタン</button>
// Aボタンをクリックすると、コンソールで"Aボタンをクリックしました"が出力されます
);
}
}
// 省略
stateの定義
constructorとは、初期化処理が実行されるメソッドです。
stateは、constructorの中で、オブジェクトとして定義します。
ここで定義したオブジェクトがstateの初期値となります。
「constructor(props)」や「super(props);」といった処理はいつも同じ記述をするため、定型文として覚えておけば大丈夫です。
// 省略
class App extends React.Conponent {
constructor(props) {
super(props); // 親クラスのconstructorを呼ぶためにsuper(props);を記述する
this.state = {プロパティ名: "値"}; // オブジェクトの内容をthis.stateに代入している
}
}
// 省略
stateの取得
stateが取得できるか確認してみます。
console.logでthis,stateの中身を見てみましょう。
// 省略
class App extends React.Conponent {
constructor(props) {
super(props);
this.state = {name: "りんご"};
}
render() {
return(
console.log(this.state); // {name: "りんご"}が出力される
);
}
}
// 省略
stateの表示
stateを表示してみましょう。
this.state.プロパティ名とすることで、値を取り出すことができます。
// 省略
class App extends React.Conponent {
constructor(props) {
super(props);
this.state = {name: "りんご"};
}
render() {
return(
<p>この果物は{this.state.name}です</p>
// ブラウザに出力 ー＞ この果物はりんごです
);
}
}
// 省略
stateの変更
constructorで定義したstateの初期値を変更してみましょう。
ここではボタンをクリックした時に、果物の名前を変更できるように処理をしていきます。
値の変更にはsetStateを使用します。
// 省略
class App extends React.Conponent {
constructor(props) {
super(props);
this.state = {name: "りんご"};
}
render() {
return(
// ボタンをクリックすると、果物の名前がりんごからぶどうに変更されます
<p>この果物は{this.state.name}です</p>
// {this.setState({プロパティ名: "変更する値"})}
<button onClick={()=>{this.setState({name: "ぶどう"})}}>ボタン</button>
);
}
}
// 省略
stateの変更の注意点
stateの変更には、注意点があります。
Reactでは、下図のように「stateの値に直接代入することで値を変更してはいけない」という決まりがあります。
値を変更したい場合は、setStateを使いましょう。
悪い例
this.state = {name: "みかん"}; ×
this.state.name = "みかん"; ×
良い例
this.setState({name: "みかん"}); ◯
メソッド化
クリックイベントの処理をメソッド化して、わかりやすくしてみましょう。
今回は、stateのnameプロパティの値を変更する処理を行うhandleClickメソッドを作ります。
handleClickメソッドを定義し、setStateで変更する処理を追加しましょう。
class App extends React.Conponent {
constructor(props) {
super(props);
this.state = {name: "りんご"};
}
// 引数nameを使って、stateのnameプロパティの値を変更する
handleClick(name) {
this.setState({name: name});
}
render() {
return(
<p>この果物は{this.state.name}です</p>
// handleClickメソッドを呼び出す部分で、引数を渡します
<button onClick={()=>{this.handleClick("もも")}}>ボタン</button>
);
}
// 出力内容: この果物はももです //
長くなるので以上になります。
Componentやpropsなどは【React】基礎編⓶で紹介します。