React JSXについて

ReactのJSXについて簡単に説明します。

1
const element = <h1>Hello, world!</h1>;

こんなのがJSXです。JSXはECMAScriptの構文を拡張していて、ECMAScriptのXMLに似ています。
JavaScriptに似ているけどもっといろいろできて、HTMLにも似ていると捉えてOKです。

起動

前回と同じようにアプリケーションを実行してブラウザでReactの画面が表示されることを確認しておきます。

1
npm start

コードの変更

次にsrc/App.jsを以下のように書き換えます。このときアプリケーションは実行したままで構いません。また、ブラウザの再読み込みも必要ありません。
ソースコードを変更すると、アプリケーションの再起動やブラウザの再読み込みをすることなく、変更内容がブラウザに反映されます。

1
2
3
4
5
6
7
8
9
10
11
12
import React from "react";
import logo from "./logo.svg";
import "./App.css";

const name = "Josh Perez";
const element = <h1>Hello, {name}</h1>;

function App() {
  return element;
}

export default App;

{}で囲まれた部分にはJavaScriptの式を書くことができます。
もう少しsrc/App.jsを書き換えてみましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from "react";
import logo from "./logo.svg";
import "./App.css";

function formatName(user) {
  return user.firstName + " " + user.lastName;
}

const user = {
  firstName: "Harper",
  lastName: "Perez"
};

const element = <h1>Hello, {formatName(user)}!</h1>;

function App() {
  return element;
}

export default App;

この例では、{}で囲まれた部分にJavaScriptのfunctionを埋め込んでいます。

レンダリングについて

このAppコンポーネントがindex.htmlにレンダリングされるまでの流れについて説明します。

src/index.jsを見てみます。

1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

まず4行目でAppコンポーネントをインポートとしています。

1
import App from './App';

次に7行目でAppコンポーネントをroot要素にレンダリングしています。

1
ReactDOM.render(<App />, document.getElementById('root'));

このroot要素はpublic/index.htmlに書かれています。

今回はここまでです。