My Profile Photo

Juan Roa

Web Developer from Cali, Colombia. HTML5 | CSS3 | JS | Ruby on Rails | ReactJS | Linux SysAdmin

React blog

Initialize npm project and install dependencies

Install nvm

We’re going to use node 8.x

For Unix

curl -o- | bash

Set the env var

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/" ] && . "$NVM_DIR/" # This loads nvm

Install node 8

nvm install 8.3.0

Create a project folder and .nvmrc file inside the folder

mkdir my-react-blog
touch .nvmrc

Inside this file, we’re going to put


and let’s use the installed version of node

nvm use 8.3.0

Let’s install Yarn as our node package management

npm i -g yarn

Initialize npm project

yarn init

Just fill it with your data!

Install dependencies for production

yarn add isomorphic-fetch prop-types react react-dom react-router

Install dependencies for ES2015 preset transpiling and compiling

yarn add -D babel-core babel-polyfill babel-preset-es2015 babel-preset-react babel-preset-stage-0 node-sass

Install dependencies for webpack and loaders

yarn add -D webpack webpack-dev-server babel-loader css-loader file-loader html-loader html-webpack-plugin react-hot-loader react-transform-hmr sass-loader style-loader url-loader

Initial setup / startup files

Create the file app/index.jsx with

import React from 'react';
import { render } from 'react-dom';
import style from './style.css';

const App = ({ header }) => (
<p>By Juan Roa from DevHack</p>

render(<App header="Hello React!" />, document.getElementById('app'));

If we want to return a list of items in React Fiber (16.x), just return an array of elements instead of enclosing tags like divs.

return [
<li key="A">List element/component 1</li>,
<li key="B">List element/component 2</li>,

Let’s apply a basic style and create app/style.css with

h1 {
color: red;

Create the file assets/index.template.html with

<!DOCTYPE html>
<html lang="es">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React Blog</title>
<div id="app"></div>

Create the file webpack.config.js with

const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
devtool: 'eval-source-map',

entry: [
// activate HMR for React

// bundle the client for webpack-dev-server
// and connect to the provided endpoint



output: {
path: `${__dirname}/build`,
filename: 'bundle.js',

resolve: {
extensions: ['.jsx', '.scss', '.js'],

module: {
rules: [
test: /\.html$/,
loader: 'html-loader',
test: /\.js|jsx?$/,
use: [
loader: 'babel-loader',
presets: ['es2015', 'react', 'stage-0'],
env: {
development: {
plugins: ['react-hot-loader/babel'],
exclude: /node_modules/,
test: /(\.scss|\.css)$/,
use: [
{ loader: 'style-loader' },
loader: 'css-loader',
sourceMap: true,
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]',

plugins: [
new HtmlWebpackPlugin({
template: `${__dirname}/assets/index.template.html`,
new webpack.NamedModulesPlugin(),
// prints more readable module names in the browser console on HMR updates
new webpack.NoEmitOnErrorsPlugin(),
// do not emit compiled assets that include errors
new webpack.HotModuleReplacementPlugin(),
new webpack.LoaderOptionsPlugin({
debug: true,

devServer: {
host: 'localhost',
port: 8080,
historyApiFallback: true,
inline: true,
hot: true,

Now, we’re able to see our first React app running and displaying Hello React with webpack + hot reloading. We are also able to see our changes in the browser without reloading it manually.

Routing with React Router

yarn add react-router-dom
comments powered by Disqus
Step Bytes
raw 30922
endings 30836
startings 30818
comments 30720
collapse 29468
clippings 29337