Reactとは何ですか？
ReactはFacebookによって作成されたJavaScriptライブラリです
Reactはユーザーインターフェイス（UI）ライブラリです
ReactはUIコンポーネントを構築するためのツールです
Reactクイックスタートチュートリアル
これはクイックスタートチュートリアルです。
始める前に、次のことを基本的に理解しておく必要があります。
完全なチュートリアルの場合：
Reactチュートリアルを開始する❯HTMLページへのReactの追加
このクイックスタートチュートリアルは、次のようなページにReactを追加します。
例
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
バベルとは何ですか？
Babelは、マークアップ言語またはプログラミング言語をJavaScriptに変換できるJavaScriptコンパイラです。
Babelを使用すると、JavaScriptの最新機能（ES6-ECMAScript 2015）を使用できます。
Babelはさまざまな変換に使用できます。ReactはBabelを使用してJSXをJavaScriptに変換します。
Babelを使用するには、<script type = "text / babel">が必要であることに注意してください。
JSXとは何ですか？
JSXは、J ava S cript XMLの略です。
JSXは、JavaScriptの拡張機能のようなXML / HTMLです。
例
const element = <h1>Hello World!</h1>
上記のように、JSXはJavaScriptでもHTMLでもありません。
JSXは、JavaScriptのXML構文拡張であり、ES6（ECMAScript 2015）のフルパワーも備えています。
HTMLと同様に、JSXタグにはタグ名、属性、および子を含めることができます。属性が中括弧で囲まれている場合、値はJavaScript式です。
JSXは、HTMLテキスト文字列を引用符で囲んでいないことに注意してください。
React DOM Render
ReactDom.render（）メソッドは、HTML要素をレンダリング（表示）するために使用されます。
例
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
JSX式
式は、中括弧{}で囲むことにより、JSXで使用できます。
例
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
要素を反応させる
Reactアプリケーションは通常、単一のHTML要素を中心に構築されています。
React開発者は、これをルートノード（ルート要素）と呼ぶことがよくあります。
<div id="root"></div>
React要素は次のようになります。
const element = <h1>Hello React!</h1>
要素は、ReactDOM.render（）メソッドを使用してレンダリング（表示）されます。
ReactDOM.render(element, document.getElementById('root'));
React要素は不変です。変更することはできません。
React要素を変更する唯一の方法は、毎回新しい要素をレンダリングすることです。
例
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
コンポーネントを反応させる
ReactコンポーネントはJavaScript関数です。
この例では、 「Welcome」という名前のReactコンポーネントを作成します。
例
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
ReactはES6クラスを使用してコンポーネントを作成することもできます。
この例では、renderメソッドを使用してWelcomeという名前のReactコンポーネントを作成します。
例
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
Reactコンポーネントのプロパティ
この例では、プロパティ引数を使用して「Welcome」という名前のReactコンポーネントを作成します。
例
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
ReactはES6クラスを使用してコンポーネントを作成することもできます。
この例では、プロパティ引数を使用して「Welcome」という名前のReactコンポーネントも作成します。
例
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
JSXコンパイラ
このページの例は、ブラウザでJSXをコンパイルします。
本番コードの場合、コンパイルは個別に実行する必要があります。
Reactアプリケーションを作成する
Facebookは、Reactアプリを構築するために必要なすべてを備えたCreateReactアプリケーションを作成しました。
これは、Webpackを使用してReact、JSX、およびES6の自動プレフィックスCSSファイルをコンパイルする開発サーバーです。
Create React Appは、ESLintを使用して、コードの誤りをテストし、警告します。
Create React Appを作成するには、ターミナルで次のコードを実行します。
例
npx create-react-app react-tutorial
Node.js5.2以降を使用していることを確認してください。それ以外の場合は、npxをインストールする必要があります。
例
npm i npx
アプリケーションを残したい場所から1つのフォルダーを開始します。
例
C:\Users\myUser>npx create-react-app react-tutorial
成功結果：
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd react-tutorial
npm start