Todo app with React.js — Part 1 (Eslint, Prettier and Express server)

Configure Eslint and Prettier

In my previous post, we configured Webpack and Babel. In this post, we will setup Eslint, Prettier and a server with Express.

Let us install and configure Prettier to ensure that our code has the same format throughout this project. Next we will install Eslint which reports any syntax error in our code and enforces a real good code style. We will use the Airbnb Eslint config.

To install our dependencies, run the code below in your terminal

npm i --save-dev prettier eslint babel-eslint eslint-config-airbnb eslint-config-prettier eslint-config-react eslint-loader eslint-plugin-prettier eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react

I will be writing a full article to cover each of the modules specified above.

In the meantime, you can read on them on npmjs.com

Next create a JavaScript file in ./src folder and name it sayHello.js with the following content:

function sayHello() {   console.log('Hello friend')
}

Notice that the code above is poorly formatted. This is intentional. We will use it to test if Prettier is working as it should.

Configuration of Prettier

Add the following code to your package.json file:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "format": "prettier --write --single-quote --no-semi --print-width=120 --tab-width=2 \"src/**/*.{js,jsx} \""
},

To test this, simply run npm run format in your terminal and check the content of the sayHello.js file. Notice that the content is now properly formatted.

function sayHello() {   
  console.log('Hello friend')
}

Click here to read more about how to configure Prettier.

Configuration of Eslint

Create a .eslintrc.json file in the root directory of your project and add the following:

{
    "extends": [
        "airbnb", 
        "prettier", 
        "prettier/react"
    ],
    "parser": "babel-eslint",
    "plugins": ["prettier"],
    "parserOptions":{
        "ecmaVersion": 2016,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
        "es6": true,
        "browser": true,
        "node": true
    }
}

Next add lint npm scripts to the package.json file:

"lint": "eslint '**/*.{js,jsx}' --quiet"
"lint:fix": "eslint '**/*.{js,jsx}' --fix"

To test this, simply run npm run lint in your terminal. This should output

error  'sayHello' is defined but never used

Express

Now that we have Prettier and Eslint installed and configured, let us setup a server to serve our static files. We will use Express.

Install Express by running npm i express --save in your terminal. Then in the root directory, create a server.js file with the content below:

Add node server to the npm script as shown below:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
}

Your package.json file should look:

Run npm start to start your server.

Index.html and the App Component

Next, create two folders in the root directory: src and public. Inside the public, folder create an index.html file with the content below:

Inside the public directory, create a js folder. This is where webpack will output its build bundle.js file, based on the webpack configurations in my previous post.

In the src folder, create a file and name it App.jsx with the content below:

To create a build, simply run npm run build then open http://localhost:5000 in your browser.

If you have setup everything correctly, you should seeHello World displayed in your browser as shown in the picture below:

In my next post, we will start building our todo app. Stay tuned!

You can find the full code here.