binario200/React-Getting-Started.md

## React-Getting-Started.md

      
    Raw
  

              React-Getting-Started.md
            
          
    This is a set of quick receipts for React Getting Started.

Getting React

Facebook React page : https://facebook.github.io/react/


Java Script playgrounds
Plunker http://plnkr.co/edit/Yrikyc?p=preview
Index.html
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
</head>

<body>
  <div id="container"></div>
  <script src="script.js"></script>
</body>

</html>

index.js
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

var mountNode = document.getElementById("container");
ReactDOM.render(<HelloMessage name="loko" />, mountNode);


create-react-app
npm install -g create-react-app
create-react-app your-app-name
cd your-app-name
npm start


Webpack
mkdir your-app-name
cd your-app-name
npm init
npm install --save webpack react react-dom babel-loader babel-core babel-preset-react babel-preset-es2015 
// npm install babel-plugin-transform-function-bind –save
npm install babel-preset-env --save-dev
mkdir public 
cd public
touch index.html

index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>
</html>

create a directory for the actual react components
mkdir js
cd js
touch app.js

app.js
import React from "react";
import ReactDOM from "react-dom";

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

var mountNode = document.getElementById("root");

ReactDOM.render(<HelloMessage name="loko" />, mountNode);


Create the webpack file
cd ..
touch webpack.config.js

webpack.config.js
  const path = require('path');
  module.exports = {
    entry: './js/app.js',
    output: {
      path: path.join(__dirname, 'public'),
      filename: 'bundle.js'
    },
    module: {
      loaders: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }]
    }
  };

create .babelrc file to let to know to babel loader to use preset-es2015
touch .babelrc

.babelrc
{
  "presets": [
    "react",
    "es2015"
    //"env"
  ]
}

Modified package.json script section in order to automatize the webpack
package.json
  ....
  "scripts": {
    "dev": "webpack -wd"
  },
  ...

run npm command
  npm run dev 

install serve https://github.com/zeit/serve
  npm install -g serve

move to the public directory and run serv
cd public
serve -p 3000

Finally go to browser to http://localhost:3000
Install react dev tools