React
React Boilerplate [リアクション+バベル+ウェブパック]
サーチ…
プロジェクトの設定
プロジェクトの依存関係をインストールするには、ノードパッケージマネージャが必要です。 Nodejs.orgからオペレーティングシステムのノードをダウンロードしてください。 Node Package Managerにはノードが付属しています。
ノード・バージョン・マネージャを使用して、ノードとnpmバージョンの管理を改善することもできます。異なるノードのバージョンでプロジェクトをテストするのに最適です。ただし、運用環境には推奨されません。
システムにノードをインストールしたら、まずバベルとウェブパックを使って最初のReactプロジェクトを爆破するための必須パッケージをインストールしてください。
実際に端末でコマンドを打ち始める前に。 BabelとWebpackが使われているものを見てみましょう。
端末でnpm init
を実行すると、プロジェクトを開始できます。初期設定に従います。その後、以下のコマンドを端末で実行します。
依存関係:
npm install react react-dom --save
Dev Dependecies:
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 webpack webpack-dev-server react-hot-loader --save-dev
オプションのDev依存関係:
npm install eslint eslint-plugin-react babel-eslint --save-dev
このサンプル package.jsonを参照することができます
次の内容のプロジェクトルートに.babelrc
を作成します。
{
"presets": ["es2015", "stage-0", "react"]
}
必要に応じて、以下の内容のプロジェクトルートに.eslintrc
を作成します。
{
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [2, "single"],
"strict": [2, "never"],
},
"plugins": [
"react"
]
}
生成されたファイルをgitリポジトリにアップロードしないように.gitignore
ファイルを作成します。
node_modules
npm-debug.log
.DS_Store
dist
最低限の内容のwebpack.config.js
ファイルを作成します。
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
}]
}
};
最後に、 sever.js
ファイルを作成して、次の内容のnpm start
を実行できるようにします。
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
if (err) {
return console.log(err);
}
console.log('Serving your awesome project at http://localhost:3000/');
});
あなたのReactプロジェクトが何かをするのを見るためにsrc/app.js
ファイルをsrc/app.js
ます。
import React, { Component } from 'react';
export default class App extends Component {
render() {
return (
<h1>Hello, world.</h1>
);
}
}
package.json
start
が何start
表すのかを定義していれば、ターミナルでnode server.js
またはnpm start
実行します。
反応スタータープロジェクト
このプロジェクトについて
これは単純な定型プロジェクトです。この記事は、ReactJs + Webpack + Bableの環境を設定するためのガイドです。
始めましょう
私たちは、fire up expressサーバー用のノード・パッケージ・マネージャーを必要とし、プロジェクト全体の依存関係を管理します。ノード・パッケージ・マネージャーを初めてご使用の場合は、 ここで確認できます 。注:ノード・パッケージ・マネージャーのインストールはここで必要です。
適切な名前のフォルダを作成し、ターミナルまたはGUIからナビゲートします。ターミナルに行き、 npm init
と入力すると、package.jsonファイルが作成されます。何もないので、プロジェクト名、バージョン、エントリポイント、gitリポジトリ、作成者、ライセンスなどがあります。エントリポイントは、プロジェクトを実行するときにノードが最初に探すため重要です。最後に、あなたが提供する情報を確認するよう求められます。 yesと入力するか、または変更することができます 。これで、 package.jsonファイルが準備完了です。
Expressサーバーのセットアップ npm install express @ 4 - saveを実行します 。これはこのプロジェクトに必要なすべての依存関係です。ここでは保存フラグは重要ですが、 package.jsファイルは更新されません。 package.jsonの主なタスクは、依存関係のリストを格納することです。あなたのpackage.jsonは"dependencies": { "express": "^4.13.4", ............. },
ように見えます"dependencies": { "express": "^4.13.4", ............. },
完全なダウンロードの後、 node_modulesフォルダと依存関係のサブフォルダがあることがわかります。今プロジェクトのルートに新しいファイルserver.jsファイルを作成します。今はエクスプレスサーバーを設定しています。私はすべてのコードを終わらせ、後で説明します。
var express = require('express');
// Create our app
var app = express();
app.use(express.static('public'));
app.listen(3000, function () {
console.log('Express server is using port:3000');
});
var express = require( 'express');これはあなたに急行API全体のアクセスを与えます。
var app = express();機能としてエクスプレスライブラリを呼び出します。 app.use();エクスプレスアプリケーションに機能を追加させてください。 app.use(express.static( 'public'));私たちのWebサーバーに公開されるフォルダ名を指定します。 app.listen(port、function(){})ここで私たちのポートは3000になり、我々が呼び出している関数はWebサーバーが正しく動作していることを確認します。それは速いサーバーがセットアップされているということです。
今度は私たちのプロジェクトに行き、新しいフォルダを作成し、 index.htmlファイルを作成します。 index.htmlはアプリケーション用のデフォルト・ファイルで、Expressサーバーはこのファイルを検索します。 index.htmlは、次のような単純なhtmlファイルです
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<h1>hello World</h1>
</body>
</html>
ターミナルからプロジェクトパスに移動し、 ノードserver.jsを入力します 。 * console.log( 'Expressサーバーはポートを使用しています:3000'); *が表示されます。
ブラウザに移動し、 http:// localhost:3000と入力すると、 hello Worldが表示されます。
今すぐパブリックフォルダ内に移動し、新しいファイルapp.jsxを作成します。 JSXはJavaScriptにXML構文を追加するプリプロセッサ・ステップです.ReactをJSXなしで使用することは間違いありませんが、JSXはReactをもっとエレガントにします。 app.jsxのサンプルコードは次のとおりです
ReactDOM.render(
<h1>Hello World!!!</h1>,
document.getElementById('app')
);
index.htmlに行き、コードを修正します。これは次のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23 /browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"> </script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="app.jsx"></script>
</body>
</html>
これで、あなたはすべて完了です。私はあなたがそれを簡単に見つけることを願っています。