前回のReact ~基礎編~ コンポーネントでは、コンポーネントについて学習しました。今回は、JSXについて学びましょう。
JSXとは
JSX(javaScript syntax extension) は、JavaScript の拡張構文です。Reactコードを書きやすくしたり、厳格なルールの元、プログラムの実装ができます。
JSXのルール
JSXは、HTMLよりも厳しいルールが設けられています。
- タグは必ず閉じる必要がある 「<b>…</b>」
- / で、明示的にタグを閉じる必要がある 「<input name=”name” />」
閉じることを忘れるとシンタックスエラーになるので注意してください。
サンプルコード
言葉だけではわかりずらいと思うので、サンプルコードを書いてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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>JSX Demo Sample</title> </head> <body> <h1>Learning JSX</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 10 11 12 13 14 |
index.js class JSXSample extends React.Component { render() { return ( <div> <h1>Hello, JSX</h1> <img src="http://lorempixel.com/400/200/sports/" /> </div> ) } } ReactDOM.render(<JSXSample/>, document.querySelector("#root")); |
「JSXを深く理解する」には、「JSXは、React.createElement(component, props, ...children) の糖衣構文にすぎません。」とあります。
つまり、複雑な構文をよりシンプルに記述できるようにしたものが、JSXというわけですね。
「Babel is a JavaScript compiler」の Try It Out を押下して、先ほどindex.jsに記述したHTML文を貼り付けてみましょう。
|
1 2 3 4 5 6 |
変換前 <div> <h1>Hello, JSX</h1> <img src="http://lorempixel.com/400/200/sports/" /> </div> |
|
1 2 3 4 5 6 7 |
変換後 "use strict"; React.createElement("div", null, React.createElement("h1", null, "Hello, JSX"), React.createElement("img", { src: "http://lorempixel.com/400/200/sports/" })); |
本来、Reactとして動作させるには変換後のコードで記述しなければなりませんが、JSXで記述すると自動で変換されます。
変換後のコードを貼り付けて動かしてみましょう。
|
1 2 3 4 5 6 7 8 9 10 |
class JSXSample extends React.Component { render() { return ( React.createElement("div", null, React.createElement("h1", null, "Hello, JSX"), React.createElement("img", {src: "http://lorempixel.com/400/200/sports/"})) ) } } ReactDOM.render(<JSXSample/>, document.querySelector("#root")); |
画面が表示されましたね。JSXを使わないと複雑な構文になることがわかります。
JSX内で、javaScriptを扱う
JSXの機能はまだまだあります。例えば、HTMLタグ内で、計算式を書くことができます。
|
1 2 3 4 5 6 7 8 9 10 11 |
class JSXSample extends React.Component { render() { return ( <div> <h1>10 * 4 = {10*4}</h1> </div> ) } } ReactDOM.render(<JSXSample/>, document.querySelector("#root")); |
関数を指定することも可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function getWork(){ return "Software developer" } class JSXSample extends React.Component { render() { return ( <div> <h1>My Work is: {getWork()}</h1> </div> ) } } ReactDOM.render(<JSXSample/>, document.querySelector("#root")); |
JSXで条件判定
条件判定もできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function getNum() { return Math.floor(Math.random() * 10) + 1; } class NumPicker extends React.Component { render() { const num = getNum() return ( <div> <h1>Your number is {num}</h1> <p>{num === 7 ? '7': 'Not 7'}</p> </div> ) } } ReactDOM.render(<NumPicker/>, document.querySelector("#root")); |
Reactのレイアウト
最後にReactのレイアウトをみていきましょう。
コンポーネントは、1ファイルにつき、1つがよいとされています。
例えば、Helloコンポーネントを作成した場合は、Hello.jsでファイルを作成します。
|
1 2 3 4 5 6 7 |
Hello.js class Hello etends React.Component { render() { return <p>Hi Everyone!</p> } } |
Goodbyeコンポーネントの場合は、Goodbye.jsファイルを作成します。
|
1 2 3 4 5 6 7 |
Goodbye.js class Goodbye extends React.Component { render() { return <h1>GoodBye!!!</h1> } } |
次に、コンポーネントを読み込むトップレベルのコンポーネントであるAppを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
index.js class App extends React.Component { render() { return ( <div> <Hello /> <Goodbye /> </div> ) } } ReactDOM.render(<App/>, document.querySelector("#root")); |
index.html に追加したコンポーネントを記述することを忘れてはいけません。
|
1 2 3 |
<script src="Hello.js" type=text/jsx></script> <script src="Goodbye.js" type=text/jsx></script> <script src="index.js" type=text/jsx></script> |
次回
次回は、Propsについて学びましょう^^
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。