【Reactを始める方法】第7回 実装編 - HelloWorld
Reactを始める方法
tags: node react babel webpack
【Reactを始める方法】第7回 実装編 - HelloWorld
連載の記事
- 【Reactを始める方法】目次
- 【Reactを始める方法】第1回 準備
- 【Reactを始める方法】第2回 インストール編 - Webpack
- 【Reactを始める方法】第3回 インストール編 - Babel
- 【Reactを始める方法】第4回 インストール編 - React
- 【Reactを始める方法】第5回 設定編 - Webpack
- 【Reactを始める方法】第6回 設定編 - Babel
- 【Reactを始める方法】第7回 実装編 - HelloWorld
今回やること
- React でHello World
React をはじめる
mkdir src cd src mkdir components type nul > index.html type nul > index.js type nul > routes.js type nul > components/Welcome.js
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>React-Boilerplate</title> </head> <body> <div id="app"></div> </body> </html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import '@babel/polyfill';
const render = () => ReactDOM.render(
<AppContainer>
<Routes />
</AppContainer>,
/* eslint no-undef: 0 */
document.getElementById('app'),
);
render(Routes);
// Webpack Hot Module Replacement API
if (module.hot) {
// console.log('Webpack Hot Module Replacement API is available.');
module.hot.accept('./routes', () => render(Routes));
}
routes.js
import React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import Welcome from './component/Welcome';
const Routes = () => (
<HashRouter>
<Switch>
<Route exact path="/" component={Welcome} />
</Switch>
</HashRouter>
);
export default Routes;
Welcome.js
import React, { Component } from 'react';
export default class Welcome extends Component {
render() {
return (
<div>
Hello React World !!!
</div>
);
}
}
ここまでで、Reactを始められる準備ができました。
開発環境で起動してみる
npm run develop
ブラウザにアクセスすると、 Hello React World !!! が表示されます。
本番環境に配置するためにビルドしてみる
npm run build
dist ディレクトリ配下にSPAが生成されます。
これで React を始められるようになりました。
React の内容については別の機会にします。
ありがとうございました。
