traumverloren/react_initial_steps.md

## react_initial_steps.md

      
    Raw
  

              react_initial_steps.md
            
          
    Package.json


Create package.json file:

$ npm init

Setup Dependencies


Install initial dependencies:

$ npm install --save react react-dom && npm install --save-dev html-webpack-plugin webpack webpack-dev-server babel-{core,loader} babel-preset-react

For ES6, also install babel to compile ES6:
npm install --save-dev babel-preset-es2015 babel-polyfill  

Webpack


Create a webpack.config.js file:

var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
module.exports = {
  entry: [
    'babel-polyfill',
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

Setup babel to transform our JSX to regular javascript:


Create a .babelrc:

{
  "presets": [
    "react",
    "babel-preset-es2015" // For ES6
  ]
}

Setup index.html:


Create index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Github Battle</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Update package.json with scripts for running webpack-dev-server:

  "scripts": {
    "production": "webpack -p",
    "start": "webpack-dev-server"
  }.

Setup index.js file and first component to make sure everything is setup


Create index.js:

var React = require('react');
var ReactDOM = require('react-dom');

var HelloWorld = React.createClass({
  render: function () {
    return (
      <div> Hello World! </div>
    )
  }
})

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

Start the webpack-dev-server and make sure it works...

$ npm run start