To begin, lets use express to create an app. Create a directory for your app, open terminal, cd into the directory and run following command:
[code lang=”javascript”]
express react-node –hogan
[/code]
Hogan.js is a compiler for the Moustache templating language.
Switch directory to /react-node
[code lang=”javascript”]
cd react-node
[/code]
and run command to install all the packages
[code lang=”javascript”]
npm install
[/code]
Lets install react by running a command:
[code lang=”javascript”]
npm install react –save
[/code]
Lets install react dom by running a command:
[code lang=”javascript”]
npm install react-dom –save
[/code]
Lets install webpack by running a command:
[code lang=”javascript”]
npm install webpack –save-dev
[/code]
–save vs –save-dev
The –save option instructs NPM to include the package inside of the dependencies section of your package.json.
–save-dev and –save-optional which save the package under devDependencies
NPM install documentation: https://docs.npmjs.com/cli/install
We also need to install webpack globally, run the following command:
[code lang=”javascript”]
sudo npm install -g webpack
[/code]
Lets install Babel Loader, run the following command:
[code lang=”javascript”]
npm install babel-loader –save-dev
[/code]
Lets install Babel preset for all es2015 plugins:
[code lang=”javascript”]
npm install babel-preset-es2015 –save-dev
[/code]
Lets install Babel Core, run the following command:
[code lang=”javascript”]
npm install babel-core –save-dev
[/code]
Lets install babel preset for react, run the following command:
[code lang=”javascript”]
npm install babel-preset-react –save-dev
[/code]
Setting up the transpiler
Create a new file for our webpack configuration.
[code lang=”javascript”]
touch webpack.config.js
[/code]
Paste the code below into webpack.config.js
[code lang=”javascript”]
var webpack = require("webpack");
var path = require("path");</code>
module.exports = {
entry: {
app: "./public/app/App.js"
},
devtool: ‘#source-map’,
module: {
loaders: {
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: ‘babel-loader’,
query: {
presets: [‘react’, ‘es2015’]
}
}
}
}
[/code]
Create a new directory ‘app’ under ‘public’ and create App.js file
[code lang=”javascript”]
mkdir app
cd app
touch App.js
[/code]
Paste below code into App.js
[code lang=”javascript”]
import React, { Component } from ‘react’
import ReactDOM from ‘react-dom’
class App extends Component {
render() {
return (
<div>This is a REACT test</div>
)
}
}
ReactDOM.render(, document.getElementById(‘app’))
[/code]
Now lets test if everything works. Change the current directory to project root directory and run following command:
[code lang=”javascript”]
nodemon
[/code]
if you dont have nodemon installed, run following command:
[code lang=”javascript”]
npm install -g nodemon
[/code]
Once nodemon is running, visit http://localhost:3000/.
The homepage content is loaded from /views/index.hjs. We need to modify this file to render our React components.
Add this inside the
tag:[code lang=”javascript”]
<div id="app"></div>
[/code]
Add below before the tag:
[code lang=”javascript”]
<script type="text/javascript" src="/build/bundle.js"></script>
[/code]
Next, we need to transpile our code so we can run it in the browser.
[code lang=”javascript”]
webpack -w
[/code]
React Boostrap
To install React Bootstrap, run the following command:
[code lang=”javascript”]
npm install react-bootstrap –save
[/code]
Open index.hjs and add this to your
section:[code lang=”html”]
<!– Latest compiled and minified CSS –>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
[/code]