開発準備
React開発のためにはNode,Yarn、Webpack,Babelなどのツールを設置、プロジェクトに設定する必要があります。
Node.js設置：
WebpackとBabelの基盤はNode.jsなのでNode.jsを設置が必要、Node.jsの公式サイトから最新を設置します。
Yarn設置
Node.jsのパッケージマネージャ
VSCode設置
Microsoft社が開発したオープンソースのテキストエディタ、ReactのDebugもできる。
Debug For Chrome設置
Add ConfigurationでChromeを設定したらlaunch.jsonが生成される。
launch.json編集 (url portを3000に変更)
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
create-react-app設置
create-react-appツールを使えばReact実装に必要なモジュールを簡単に設置することができます。
npm install -g create-react-app
HelloWorldプロジェクト生成
英語ができる方は以下のリンク参考してください。
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
create-react-appツールでhello_worldプロジェクト生成してnom startするだけでlocalhost:3000がChromeに表示される。
create-react-app hello_world
cd hello_world
npm start
npm startしたら表示されるページ
自動的に生成されるソース
node_modules: 必要なモジュールが設置されている。
srcフォルダにはソースコードが配置されて、実際の開発はこの中で行います。
今回から必要なソース以外を削除
修正前
$tree -I 'node_modules'
.
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
修正後
$tree -I 'node_modules'
.
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.js
└── index.js
index.htmlの中のrootIdのDivが入っている。
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
....
ReactDOMがdocument.getElementById('root')のElementにAppコンポーネントを注入するイメージで覚えたらいいかも。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
APPのRetunの中に書いているのはHtmlに見えますが、JSXと言うはHtml風に書けるJavaScriptの拡張構文
import React from 'react';
function App() {
return (
<div>Hello World!</div>
);
}
export default App;
次回からは簡単なテーマを考えて実際実装しながらReactの勉強をしようと思います。