mac osx下react開発環境構築

7023 ワード

先端開発プログラミング日記 nodejs react

mac osx下react開発環境構築
まずnodejsをインストールしてください.
nodejsインストール
開発支援ツールパッケージのインストール

sudo cnpm install babel -g
sudo cnpm install babel-cli -g
sudo cnpm install webpack -g
sudo cnpm install webpack-dev-server -g
sudo cnpm install gulp -g
sudo cnpm install react -g

プロジェクトフォルダを作成

mkdir myreact
cd myreact

開発環境を初期化する

npm init

ずっと回車すればpackage.jsonファイルが生成できます.
使用するキットをインストールします.--saveコマンドは、パケットをpackage.jsonファイルに追加するために実行します.

sudo cnpm install --save react
sudo cnpm install --save react-dom
sudo cnpm install --save babel
sudo cnpm install --save babel-core
sudo cnpm install --save babel-loader
sudo cnpm install --save babel-preset-react
sudo cnpm install --save babel-preset-es2015
sudo cnpm install --save babel-preset-stage0

プロジェクトファイルを作成

index.html 
component.jsx
main.js
webpack.config.js  //webpack

package.jsonを編集します

#     "scripts":{}
#{}      
"dev": "webpack-dev-server --hot",

webpackの設定
webpack.co.nfig.jsを編集します.

 var config = {
     entry: './main.js',

     output: {
         path: './',
         filename: 'app.js',
     },

     devServer: {
         inline: true,
         port: 8080
     },

     module: {
         loaders: [{
             test: /\.jsx?$/,
             exclude: /node_modules/,
             loader: 'babel',

             query: {
                 presets: ['es2015', 'stage-0', 'react']
             }
         }]
     }

 };
 module.exports = config;

index.


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>hello reacttitle>
head>

<body>
    <div id="app">
    div>
    <script src="app.js">script>
body>

html>

component.jsx

'use strict';
import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            hello holoto !!

         div>
      );
   }
}

export default App;

mail.js


'use strict';
import React from 'react';
import ReactDOM from 'react-dom';

import App from './component.jsx';

ReactDOM.render(<App />, document.getElementById('app'))

react hello world
コマンドラインダウンdevコマンド

npm run dev

ブラウザで表示
アドレスバー入力http://127.0.0.1:8080/が表示されます.

hello holoto !!

このままreactのハローワールドが完成しました.
あなたのreactの道を始めましょう.

LinuxインストールNodejs