【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 の内容については別の機会にします。
ありがとうございました。