Create React App and React Router 4 Developer Workflow

“MacBook Pro showing programming language” by Émile Perron on Unsplash

Prerequisites

Run time environment and package manager: Node, npm and yarn
Code editor: VS Code is my preference https://code.visualstudio.com/
Terminal App: Hyper is my preference https://hyper.is/

Install and Setup npm scripts

  1. Create a folder for your project and then, use your terminal app to cd into it. Open the folder in your code editor as well

2. cd into the app folder and then run the command for ESLint Initialise

Use the popular airbnb style guide and select .json for the eslint file. Select yes for React and to install peerDependencies

Install prettier and eslint plugins

ESLint Config file with Prettier Integration for formatting
It is better to do it in the ESLint file, instead of using the Prettier plugin for your code editor. Because this way it is more portable, and you can debug using the command line as well as, transfer your workflow to other systems by just using the .eslintrc.json file.

Integrating with ESLint · Prettier https://prettier.io/docs/en/eslint.html

GitHub — prettier/eslint-plugin-prettier: ESLint plugin for prettier formatting https://github.com/prettier/eslint-plugin-prettier

GitHub — prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier. https://github.com/prettier/eslint-config-prettier

If there are any problems you can always, revert to using the Prettier code editor plugin and setup.

Copy the below code, into your .eslintrc.json file

Add the linting script to the package.json file

Fix ESlint errors

registerServiceWorker.js comes with create-react-app and we should not have to worry about linting it, just in case it causes errors.

Create a .eslintignore file in the root directory (the same folder with the .eslintrc.json file in it. And add src/registerServiceWorker.js to the first line and save.

CLI Run Commands

Run the App and styles from one terminal window. And do the linting in another window. The App should be live at http://localhost:3000 and linting should be working in your javascript files now.

Running the App

Linting .js files

Creating a production build

React.js Project Folder Setup

  1. Create folders for css, components and assets. Put them in the src folder.

css folder — used for css files
components folder — used for javascript component files
assets folder — used for media such as images, videos, icons etc…

2. Delete the files index.css and logo.svg. Delete the index.css import code in index.js

3. Remove references of logo in App.js

4. Decide whether you want to use Stylus or Sass as your preprocessor. Move App.css to the css folder. Create either a App.styl or App.scss file inside it.

5. Delete all of the styles inside of App.css and replace with the below, example boilerplate. Duplicate the code into your App.styl or App.scss file.

Alternatively you can write your own CSS this is only an example so that you can see it work.

Install Stylus or Sass

Stylus setup

Put (Under scripts in package.json)

When we run this script it will compile every .styl file in the ./src/css folder, then save the compiled css in ./src/css folder every time we change a .styl file.

Make sure that the folders tree looks like below

Sass setup

Put (Under scripts in package.json)

When we run this script it will watch every .scss file in the ./src/css folder, then save the compiled css in ./src/css folder every time we change a .scss file.

Make sure that the folders tree looks like below

Update the import code in App.js to the below

Install concurrently or npm-run-all

They allow you to run multiple scripts at the same time.

concurrently setup

Put (Under scripts in package.json)

npm-run-all setup

Put (Under scripts in package.json)

Running the App with styles

Run the command yarn watch to run the scripts and styles at the same time, no need for multiple terminal windows. One for scripts and one for styles etc… The App.styl/App.scss file will be the main file used for doing the CSS, so write your code in there. It will then convert and update the App.css file. You can do a test by adding a background color to the body to make sure that its working properly.

Install normalize.css

Import normalize.css into index.js

React App Folder Tree

Optional Installs

Documentation for using styled-components in React https://www.styled-components.com/

Install Styled components

Import into corresponding .js file when using

React Router 4 Install and Setup

Install React Router

  1. Create a folder for views and put it in the src folder.
  2. Create a Router.js file and put it in the root of the src folder

3. Update the index.js file in the root of the src folder so it looks like the below

Example setup with pages and 404 routes

App.js is the homepage, and subsequent pages are to be created in the views folder. Create components and put them in the components folder. Then import those components, into the pages you create in the views folder.

The NotFound.js file is the 404 page, which is the page that you get redirected to, when you have an invalid url in your search box.

Router.js file

About.js file http://localhost:3000/about

NotFound.js http://localhost:3000/foobar

Page Navigation

The href attribute is required on an anchor. Provide a valid, navigable address as the href value. Add a href address to the link tag like below.

React App and React Router 4 Folder Tree

*Bonus section*

Scroll to top Restoration

React Router: Declarative Routing for React.js https://reacttraining.com/react-router/
React Router: Declarative Routing for React.js https://reacttraining.com/react-router/web/guides/scroll-restoration

Most of the time all you need is to “scroll to the top” because you have a long content page, that when navigated to, stays scrolled down. This is straightforward to handle with a <ScrollToTop> component that will scroll the window up on every navigation, make sure to wrap it in withRouter to give it access to the router’s props:

The example code below works

Document HTML Head and Meta tag setup (SEO)

React scripts for dynamic head meta (Choose one of them)

GitHub — nfl/react-helmet: A document head manager for React https://github.com/nfl/react-helmet

GitHub — s-yadav/react-meta-tags: Handle document meta/head tags in isomorphic react with ease. https://github.com/s-yadav/react-meta-tags

GitHub — kodyl/react-document-meta: HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API. https://github.com/kodyl/react-document-meta

You need to have different meta descriptions on each page, its good for SEO.

👨🏿‍💻 Full Stack Developer 📝 Blogger 🎮 Gamer ✏️ Creative 👁 Anime Addict ٩(●ᴗ●)۶

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store