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 27604
endings 27518
startings 27500
comments 27402
collapse 26150
clippings 26019