Getting started with React

##React environment setup ####React is the most intimidating library I've come across as a new programmer. But it's easier than it initially looks ####The 14 (I swear it's fewer than it seems) steps below will get you started with React

####You'll need to install the package manager NPM before coding with React. Since NPM comes with Node.js, it's easiest to download Node ####You can quickly do that here https://nodejs.org/en/download/

####Set up your React environment

$mkdir root_directory && cd root_directory
$npm init in order to create an NPM environment. You'll be asked several questions whenever you init an NPM project. It's more than fine to leave all fields blank, continuing until NPM asks you if everything is okay. Confirm 'yes'
$npm install --save react react-dom in order to save React and all its dependencies
$npm install --save-dev html-webpack-plugin webpack webpack-dev-server babel-{core,loader} babel-preset-react to install all React tools
Beneath your root directory, $mkdir app && cd app
Within app, $touch index.html to create your main View file, and within it, do:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React Tutorial</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
	<div id="app"></div>
</body>
</html>

Within app, $touch index.js
Beneath your root directory, $touch webpack.config.js
In webpack.config.js, add:

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

module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
    ]
  },
  plugins: [HtmlWebpackPluginConfig]
}

Beneath your root directory, $touch .babelrc to set up a Babel configuration file for babel-loader. Babel compiles the JSX you use to write React into browser-readable JavaScript
Within .babelrc, add:

{
   "presets": [
	 "react"
	]
}

Within your package.json file, replace the value of "scripts" with this:

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

$npm run production - if successful, this command will create a dist folder beneath root directory for your compiled code
You're set to use React! To see your UI, run $npm run start to boot up LocalHost

tbogin/start_react.md