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- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash

Set the env var

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # 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

8.3.0

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 }) => (
  <div>
    <h1>{header}</h1>
    <p>By Juan Roa from DevHack</p>
  </div>
);

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">
  <head>
    <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>
  </head>
  <body>
  <div id="app"></div>
  </body>
</html>

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: [
    'react-hot-loader/patch',
    // activate HMR for React

    'webpack-dev-server/client?http://localhost:8080',
    // bundle the client for webpack-dev-server
    // and connect to the provided endpoint

    'webpack/hot/only-dev-server',

    'babel-polyfill',

    `${__dirname}/app/index.jsx`,
  ],
  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',
            options:
            {
              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',
            options:
            {
              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.

comments powered by Disqus
Step Bytes
raw 26150
endings 26064
startings 26046
comments 25948
collapse 24699
clippings 24570