Nekonote

Nekonote(ねこのて)もかりたい

【Reactを始める方法】第7回 実装編 - HelloWorld

このエントリーをはてなブックマークに追加

Reactを始める方法

tags: node react babel webpack

【Reactを始める方法】第7回 実装編 - HelloWorld


連載の記事


今回やること


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 の内容については別の機会にします。

ありがとうございました。


おすすめ 記事