前回のReact ~基礎編~ 事前準備では、学習を始めるにあたって必要な環境を準備しました。
今回から、早速、Reactの学習を始めましょう。
コンポーネント
コンポーネントには、「クラスコンポーネント」と「関数コンポーネント」の2種類があります。
クラスコンポーネント
クラスコンポーネントは、Reactのベースのコンポーネントです。javaScriptのクラス内にロジックを記述します。renderは、必須です。
|
1 2 3 4 5 |
class Person extends React.Component { render() { return `<p>Hi Everyone!</p>` } } |
デモ
簡単なサンプルコードを描いてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> <h1>Demo: Hello</h1> <div id="root"></div> <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone"></script> <script src="index.js" type=text/jsx></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 |
index.js class Hello extends React.Component { render() { return <h1>Hello everyone!</h1> } } ReactDOM.render(<Hello/>, document.querySelector('#root')) |
表示結果です⬇︎
前述の通り、クラスコンポーネントでReactのコンポーネントをHTML内に埋め込みました。
index.html内に記述した「<div id=”root”></div>」のHTML要素をindex.js側で取得し、作成しておいた<Hello/>コンポーネントをマウントする、といった具合です。
クラスコンポーネントでは、React.Component を継承した独自のコンポーネントを作成することが可能です。
複数のタグを返したい場合は、次のようにdivタグで囲みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
index.js class Hello extends React.Component { render() { return ( <div> <h1>Hello everyone!</h1> <h1>Hello everyone!</h1> <h1>Hello everyone!</h1> </div> ); } } ReactDOM.render(<Hello/>, document.querySelector('#root')) |
関数コンポーネント
関数コンポーネントは、javaScriptの関数内にロジックを書きます。renderメソッドは必要ありません。単に、コンテンツを返すだけです。
|
1 2 3 |
function Person() { return <p>Hi Everyone!</p> } |
デモ
簡単なサンプルコードを描いてみましょう。
|
1 2 3 4 5 6 7 |
index.js function Hello() { return <h1>Hello everyone!</h1> } ReactDOM.render(<Hello/>, document.querySelector('#root')) |
表示結果です⬇︎
コンポーネントの違い
クラスコンポーネントと関数コンポーネントには、いくつかの違いがあります。
- どちらもpropsを受け取り、コンテンツを返す
- 関数コンポーネントは、ステートやライフサイクルメソッドを利用できない
- hookの導入により、フル機能の関数コンポーネントを実装できるようになった
現時点では分からない用語が出てきたと思いますが、気にせず学習を進めましょう。
次回
次回は、JSXについて学びましょう。
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。