Loading
05 Feb 2017

821

1028

58

Getting started with React, Node and React Bootstrap

Web App Development by Digital Apps

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

Screenshot 2017-02-05 14.42.57

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]