Reactは、ユーザーインターフェースを構築するための最も人気のあるJavaScriptライブラリの1つです。
フロントエンド開発者になりたい、または Web 開発の仕事を見つけたい場合、おそらく React を深く学ぶことが有益でしょう。
この投稿では、コンポーネントの作成、JSX 構文、および Props など、React の基本をいくつか学習することになります。 React の経験がない、または少ない場合、この投稿はあなたのためのものです。
JSX とは何ですか？
最初の React プロジェクトをインストールした後に最初に気づくことは、JavaScript 関数がいくつかの HTML コードを返すことです：
function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> </header> </div> );}これは JSX (JavaScript XML) と呼ばれる React の特別で有効な構文拡張機能です。 通常、フロントエンド関連のプロジェクトでは、HTML、CSS、および JavaScript のコードを別々のファイルに保存します。 しかし、React では、これは少し異なっています。
React プロジェクトでは、JSX によって上記の例のように HTML と JavaScript を同じファイルにまとめて記述できるため、個別の HTML ファイルを作成しません。 ただし、CSS は別のファイルに分けることができます。
最初のうちは、JSX は少し奇妙に思えるかもしれません。 しかし、心配しないでください、すぐに慣れるでしょう。
const message = <h1>React is cool!</h1>;また、JavaScriptのロジック（if-elseケースなど）の内部でHTMLを返すこともできます：
render() { if(true) { return <p>YES</p>; } else { return <p>NO</p>; }}JSXについてこれ以上の詳細は省きますが、以下のルールを考慮しながらJSXを書いてください。
- HTML とコンポーネント タグは常に閉じなければならない < />
- “class” は “className” になり (class は JavaScript のクラスを参照するから)、 “tabindex” は “tabIndex” になってキャメルケース
- 1 回で複数の HTML エレメントは返さないので、親タグの中にラップすることを確認してください。
return ( <div> <p>Hello</p> <p>World</p> </div>);- または別の方法として、空のタグでそれらをラップすることもできます：
return ( <> <p>Hello</p> <p>World</p> </>);詳細については、私の React for Beginners チュートリアルもご覧ください：
Functional & Class Components とは何ですか？
JSXの構文に慣れたら、次に理解すべきはReactのコンポーネントベースの構造です。
この記事の一番上にあるサンプルコードを見直すと、JSXコードが関数によって返されていることがわかります。 しかし、App( )関数は普通の関数ではなく、実はコンポーネントなのです。 コンポーネントとは何でしょうか。
コンポーネントとは
コンポーネントとは、UI を小さな断片に分割する、独立した再利用可能なコード ブロックです。 たとえば、Twitter の UI を React で構築する場合、
UI 全体ではなく、すべてのセクション（赤でマーク）を小さな独立したピースに分割できますし、そうする必要があります。 言い換えれば、これらはコンポーネントです。
React には、機能コンポーネントとクラス コンポーネントの 2 つのタイプがあります。
機能コンポーネント
Reactにおける最初の、そして推奨されるコンポーネントタイプは、機能コンポーネントです。 関数型コンポーネントは、基本的に、React 要素 (JSX) を返す JavaScript/ES6 関数です。 React の公式ドキュメントによると、以下の関数は有効な関数型コンポーネントです:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}あるいは、矢印の関数定義で関数型コンポーネントを作成することもできます:
const Welcome = (props) => { return <h1>Hello, {props.name}</h1>; }この関数は、データ付きの単一の “props” (properties の意) オブジェクト引数を受け取り、React 要素を返しますので、有効なReactコンポーネントと言えるでしょう。 – reactjs.org
コンポーネントを後で使用できるようにするには、まずそれをエクスポートして、どこか他の場所でインポートできるようにする必要があります:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}export default Welcome;それをインポートしたら、この例のようにコンポーネントを呼び出します:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome /> </div> );}React における機能コンポーネントということですね。
- は JavaScript/ES6 関数です
- は React 要素（JSX）を返す必要があります
- は常に大文字で始まります（命名規則）
- 必要に応じてパラメータとして props を使用します
クラスコンポーネントとは何でしょうか。
コンポーネントの2つ目のタイプは、クラス コンポーネントです。 クラス コンポーネントは、JSX を返す ES6 クラスです。 以下では、同じ Welcome 関数を今回はクラス コンポーネントとして見ています。
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}機能コンポーネントと異なり、クラス コンポーネントは JSX を返すために追加の render( ) メソッドを持つ必要があります。 React の古いバージョン (バージョン < 16.8) では、関数型コンポーネント内で状態を使用することはできませんでした。
したがって、UI のレンダリングのみに関数型コンポーネントが必要でしたが、データ管理やいくつかの追加操作 (ライフサイクル メソッドなど) にはクラス コンポーネントを使用することになります。
これは、React Hooks の導入により変化し、今では機能コンポーネントでもステートを使用できるようになりました。 (ステートとフックについては次の記事で取り上げるので、今は気にしないでください)。
A Class Component:
- は ES6 クラスで、React コンポーネントを「拡張」するとコンポーネントになる。
- 必要に応じて (コンストラクターで) Props を取る
- JSX を返す render( ) メソッドを持つ必要がある
Rect の Props とは？
コンポーネントのもう一つの重要な概念は、それらがどのように通信するかです。 React には prop (プロパティの略) と呼ばれる特別なオブジェクトがあり、これを使用してあるコンポーネントから別のコンポーネントにデータを転送します。
しかし、注意してください – prop はデータを一方通行で転送します (親から子コンポーネントへのみ)。
Props を使用してデータを渡す方法を確認するために、上記の App( ) 関数をもう一度見てみましょう。
まず、Welcome コンポーネントにプロップを定義し、それに値を割り当てる必要があります：
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome name="John"/> <Welcome name="Mary"/> <Welcome name="Alex"/> </div> );}プロップはカスタム値で、コンポーネントをより動的にします。 Welcome コンポーネントはここでは子なので、その親 (App) にプロップを定義する必要があり、プロップ「名前」にアクセスするだけで値を渡して結果を取得できます。 しかし、データの管理についてはどうでしょうか。 プロップはデータを渡すために使用され、それを操作するためには使用されません。 Reactでのデータ管理については、このfreeCodeCampでの今後の投稿で取り上げる予定です。
その間、React & Web開発についてもっと学びたい場合は、私のYouTubeチャンネルを購読してください。
お読みいただきありがとうございました。