##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 initin 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-domin order to save React and all its dependencies$npm install --save-dev html-webpack-plugin webpack webpack-dev-server babel-{core,loader} babel-preset-reactto install all React tools- Beneath your root directory,
$mkdir app && cd app - Within app,
$touch index.htmlto 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 .babelrcto 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 startto boot up LocalHost