xgqfrms-GitHub/React-Environment .md Secret

## React-Environment .md

      
    Raw
  

              React-Environment .md
            
          
    Setup a React Environment

(React + Bable + Webpack 2 + Sass + Gulp + css module + ES6)
(React + Bable + Webpack 2 + Sass + Gulp + css module + TypeScript)
https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel
https://github.com/scotch-io/hello-world-react
https://github.com/joykare/react-startpack
设置一个React环境
$ mkdir hello-world-react & cd hello-world-react 
$ yarn init
$ touch webpack.config.js

webpack.config.js

https://webpack.github.io/docs/list-of-loaders.html
const path = require('path');
module.exports = {
  entry: './client/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'index_bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }
}
.babelrc

$ yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev

touch .babelrc

{
    "presets":[
        "es2015", "react"
    ]
}
$ mkdir client & cd client & touch index.js index.html & cd .. 

index.js

/*
    ./client/index.js
    which is the webpack entry file
*/
console.log('Hey guys and ladies!!')
/*
    ./client/index.html
    basic html skeleton
*/
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React App Setup</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
html-webpack-plugin

$ yarn add html-webpack-plugin

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './client/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {

// ...

module: {
    loaders: [
        //...
    ]
},
// add this line
plugins: [HtmlWebpackPluginConfig]
}
package.json

{
  "name": "hello-world-react",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",

  // add the scripts key to your package.json

  "scripts": {
    "start": "webpack-dev-server"
  },

  "dependencies": {
  ...
  },
  "devDependencies": {
  ...
  }
}

run

$ yarn start

http://localhost:8080/
$ yarn add react react-dom

$ cd client & mkdir components & cd components & touch App.jsx & cd ../..

*
    ./client/components/App.jsx
*/
import React from 'react';

export default class App extends React.Component {
  render() {
    return (
     <div style={{textAlign: 'center'}}>
        <h1>Hello World</h1>
      </div>);
  }
}
/* 
    ./client/index.js
*/
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));
$ yarn start

Simple React Webpack Babel Starter Kit

https://github.com/alicoding/react-webpack-babel
https://github.com/alicoding/react-webpack-babel/blob/master/package.json
Setting up environment for React, SASS, ES2015, Babel with Webpack

https://medium.com/@srinisoundar/setting-up-environment-for-react-sass-es2015-babel-with-webpack-2f77445129#.n006prfll
How-to setup Webpack on an ES6 React Application with SASS?

https://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html
Adding Sass or Scss to Create-React-App

https://medium.com/@Connorelsea/using-sass-with-create-react-app-7125d6913760#.hd6uu7ivo