はじめに
本記事は、プログラミングの学習を始めて1ヶ月の初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。
##React 入門
###Reactとは
Facebook社（現 Meta Platforms）が開発したUIパーツを構築するためのJavaScriptライブラリです。
###カウントアップボタンの作成
カウントアップボタンを例に説明します。
以下のように記述することでカウントアップボタンを作成することができます。
App.js
// Reactをインポート
import React from 'react';
// React.Componentを継承するAppクラスを定義
class App extends React.Component {
constructor(props) {
super(props);
// stateをオブジェクトを使って定義
this.state = {count: 0};
}
// カウントアップするためのメソッドを定義
handleClick() {
// 指定したプロパティに対応するstateの値を変更する（ここではcountの値を変更する）
this.setState({count: this.state.count + 1});
}
// JSXが返り値であるrenderメソッドを定義
render() {
return (
{/* return内はJSXを記述。中括弧で括ることでJavaScriptを埋め込むことができる */}
<div>
<h1>
{/* stateのcountを呼び出し。最初は0が表示される。 */}
{this.state.count}
</h1>
{/* onClickイベント時にhandleCkickメソッドを実行。（プラスボタンが押されるとカウントアップ） */}
<button onClick={() => {this.handleClick()}}>+</button>
</div>
);
}
}
// Appクラスをエクスポート
export default App;
####補足
-
stateとは、Reactではユーザーの動きに合わせて変わる値のことを指します。 -
Reactでは、stateの値に直接代入することで値を変更してはいけません。そのため、上記でいう
this.setState({count: this.state.count + 1});のような記述で値を変更します。 -
JSXはほぼHTMLと同じように記述することができますが、いくつかの相違点がありますので注意が必要です。
-
return内に複数の要素があるとエラーになります。そのため、上記の例では、divタグで囲んで1つの要素にまとめています。