環境設定
CDN
- UMDバージョンのReactとReactDOMが利用可能です。
- 指定されたバージョンは、バージョン番号の変更が必要です。
- ReactのCDN入門では、crossoriginプロパティの設定を推奨しています。
create-react-app
- シングルページのアプリケーションを作成し、設定不要のモダンなビルド設定を提供します。
- グローバルインストール: npm install -g create-react-app
- グローバルインストール: npm install -g create-react-app
- プロジェクトの作成: create-react-app my-app
yarnのインストール: npm install yarn -g
- プロジェクトの開始: npm start または yarn start
- 本番環境のビルド: npm run build または yarn build。
import React from 'react'; //=>vdomバーチャルドムの概念
import ReactDOM from 'react-dom';
//ルートという名前のノードの下にJSXをマウントすると、ルート・ノードは1つしかない。
ReactDOM.render(<h1>hello world</h1>,document.querySelector('#root'));
JSX
JSXは、より良いUIを記述し、効率的な開発を可能にするためにJavaScript内部に実装されたReact.createElement(component, props, ... children)関数のための単なる構文糖です。.children）関数をJavaScript内部に実装することで、UIをより適切に記述し、効率的な開発を可能にしています。
JSXはReact.createElementの呼び出しで、最終結果はReactの「要素」です。
- webpackの設定を変更: npm run eject
const title = "hello React";
const jsx = <h2>{title}</h2>;
const subTitle = <p>hello, React</p>;
const jsx = <h2>{subTitle}</h2>;
動的レンダリング
React要素は不変であり、作成後に内容や属性を変更することはできません。
function Time() {
const element = (
<div>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(Time, 1000);
条件付きレンダリング
let isShowTitle = true;
if (isShowTitle) {
title = <h1>h1を表示するかどうか</h1>;
}
const jsx = (
<div>
{isShowTitle && <h1>title1</h1>}
</div>
);
ReactDOM.render(
jsx,
document.querySelector("#root")
);
const showTitle = true;
const title = name ? <h2>{name}</h2> : null;
const jsx = (
<div>
{title}
</div>
);
配列はサブ要素として扱われ、リストデータを表示するために使用できる jsx のセットを保持します。
const arr = [1,2,3].map(num => <li key={num}>{num}</li>)
const jsx = (
<div>
<ul>{arr}</ul>
</div>
);
判例
import logo from "./logo.svg";
import "index.css";
const box = {
color:"blue",
border:"1px blue solid"
}
const jsx = (
<div style={box}>
{/* 属性：静的な値には二重引用符、動的な値には中括弧を使用する。*/}
//className配列は、リストデータの表示に使用できるjsx群を保持する配列のサブ要素として扱われる。
<img src={logo}
style={{ width:100,height:100,border:"1px red solid" }}
className="widthheight"/>
</div>
);
