React Build ToolとDev Server

Question

私は学習目的のために、プロジェクトのDEV環境とサーバーを設定するという方向性が必要です。 ReacJSをブートストラップとともに使用したい。前回私がReactJSを使って作業した時、ビルドとサーバはすでに設定されていましたので、あまりやる必要はありませんでした。私たちはnpm、gulp、そして他のものを使いました。

今、私はこれを設定しようとしていることを、私は何をすべきかわかりません。誰かが私が従うことができる最も簡単な手順を説明することができます。私はReact eco-systemの最新バージョンを使用したいと思っています。理想的には、ファイルや物を縮小して組み合わせるビルドシステムを持っています。 Googleには紛らわしい情報がたくさんあります。私が直面しているもう一つの課題は、package.jsonで指定するバージョンです。ギャルプの代わりに私はwebpackを使うことにしました。ガルプやウェブパックと一緒に行くかどうかは分かりませんでしたが、ウェブパックと一緒に行くことに決めました。すべてのバージョンが最新のものであるか、より多くのものが必要なのかはわかりません。私は確かに私は変更についての自動更新ページに監視員を持っていないことを知っています。サーバーの場合、私はちょうどnpmを使用していますが、必要なものか、他のものを使うことの利点があるかどうかはわかりません。 この私のpackage.json以下

{ 
    "name": "track", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --port 3000 --progress --inline", 
    "build": "webpack" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "html-webpack-plugin": "^2.29.0", 
    "path": "^0.12.7", 
    "react": "^16.0.0", 
    "react-dom": "^15.6.1", 
    "webpack": "^3.0.0", 
    "webpack-dev-server": "^2.5.0" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.25.0", 
    "babel-loader": "^7.1.0", 
    "babel-preset-es2017": "^6.24.1", 
    "babel-preset-react": "^6.24.1" 
    } 
} 

は、私は非常に似たような状況に直面しているが、私は、と反応する作業redux、react-redux、他たwebpack.config.js

module.exports = { 
    entry: './src/app.js', 
    output: { 
    path: __dirname, 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { presets: [ 'es2015', 'react' ] } 
     } 
    ] 
    } 
}; 

Answer 1

Can someone outline the simplest steps I can follow.

ですライブラリと、私は自分で把握する必要があります（http）リクエストを送信するためaxiosを使用して、ここに私がやったことだ：

注：は、私はここのWebPACK-devのサーバーNPMを使用して

NPMの初期化

インストールされたプロジェクトの依存関係と一緒にノードを持っているので、あなたがNode.jsがインストールされていることを確認してください。あなたは

package.json

{ 
    "name": "searchapp", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "webpack": "^3.8.1", 
    "webpack-dev-server": "^2.9.3" 
    }, 
    "dependencies": { 
    "babel-preset-stage-1": "^6.24.1", 
    "lodash": "^4.17.4", 
    "react": "^16.0.0", 
    "react-dom": "^16.0.0", 
    "react-redux": "^5.0.6", 
    "react-router-dom": "^4.2.2", 
    "redux": "^3.7.2", 
    "redux-promise": "^0.5.3" 
    } 
} 

を見ることができ、これはwebpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    entry: { 
    bundle: './src/index.js', 
    }, 

    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
     presets: ['react', 'es2015', 'stage-1'] 
     } 
    }] 
    }, 
    resolve: { 
    extensions: ['*', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}; 

され、その後、含まれていることを確認して、私はノードとのWebPACK-devのサーバーへのリンクを与えている インサイドスクリプト.babelrc

{ 
    "presets": ["react", "es2015", "stage-1"] 
} 

github repositoryこれらのフォルダやファイルはGitのレポ

.gitignore

/node_modules 
bundle.js 
npm-debug.log 
.DS_Store 

には含まれませんように、あなたは、このすべてが、開始のための圧倒的かつ多すぎると思われる場合は.gitignoreファイルをインクルードしてくださいあなたのwebpack.config.jsがどこにあるかで始まるのに最適な場所はcreate-react-app