Monthly Archives: July 2017

Setting up a JS project

I’m sure the instructions for this change all the time, but at the moment this is how I set up my latest JS repo.

To create the package.json file that will contain all the meta data for your project:

yarn init

Add a linter so that you can get into the practise of writing good JS

yarn add eslint --dev

Add webpack, which will bundle all your javascript, libraries and what you have written, into a single JavaScript file.

yarn add webpack webpack-dev-server --dev

Install babel, so that you can write in whatever JS you want, and browsers will be able to read it. E.g. you can write in ES6 and Babel will translate it for you.

yarn add babel-loader babel-core babel-preset-es2015 --dev


npm install --save-dev babel-preset-es2015

Then set up your .babelrc file to include that preset:

  "presets": ["es2015"]

Set up your webpack.config.js – making sure to include Babel details in it.

module.exports = {
  entry: "./src/app.js",
  output: {
    filename: "./src/index.js"
  module: {
    rules: [
        test: /\.js$/, 
        loader: 'babel-loader', 
        exclude: /node_modules/ 

Finally, you probably want to ignore the node_modules folder with a .gitignore file.

Set up your HTML and JS pages
Create an index.html page and an app.js. Note that the html page shouldn’t call your
app.js file, it should call whatever is the name of your output JS file in your webpack.config.js. In this case it is ./src/index.js.

Run locally
Run your app locally using hot reloading

webpack-dev-server ./src/app.js --hot --inline

You can use your linter by running

eslint ./src/app.js

Adding React

I wanted to make this repo a React App, so I added React and ReactDom

yarn add react react-dom

Then I added the Babel preset

npm install --save-dev babel-cli babel-preset-react

And updated my .babelrc

  "presets": ["es2015", "react"]

To get started with React I referenced a ‘root’ div in my HTML and then imported React into my App.js

import React from 'react';
import ReactDOM from 'react-dom';


And this is what that repo would look like at that point  

Leave a reply

Props vs State in React

I’ve recently started learning React. The Facebook React docs are fantastic for getting started, highly recommend.

Before I went completely through the docs I was getting very confused between Props and State in React, but as I went through the Docs I learnt some things to help distinguish them:


  • Passed down from parent to child
  • Both class and function components can use props
  • Props are read only, they cannot be updated


  • State is set up when you create a component – i.e. in a constructor.
  • Only components that are built from classes can use state, components built from functions cannot.
  • Unlike props, state can be updated
  • Reserved for interactivity – i.e. state is updated by user in put

Is it a state or a prop?  (from React Docs)

  1. Is it passed in from a parent via props? If so, it probably isn’t state.
  2. Does it remain unchanged over time? If so, it probably isn’t state.
  3. Can you compute it based on any other state or props in your component? If so, it isn’t state.

Passing information up and down the inheritance tree

You pass information down via props.

You pass information up via callback (event handlers). Read these docs on how to lift state up, i.e., pass state up from child to parent, by using callbacks

A note on initialisers:

From the React Docs

The constructor is the right place to initialize state. If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

Side note about what I’m building in React:

The project I’ve decided to work on is an evolution of my High Tea app. This was one of the first Rails apps I ever built, back in 2013. I haven’t worked much on it since then, but have kept it going and done a few tweaks just because, unlike other little apps I made, this is one that I actually still use. I keep updating it with all the new High Teas I go to.

So, I’ve decided to create a React front end to it, and develop some API endpoints for my old app, so that I can practice some React.

Leave a reply