How to Setup a Fresh React App

Recently I held a two-day React workshop for parts of my team. We decided to switch to React to all our new products after we had successfully used it in some experiments. During the training, we also talked about, how to set up a new React project using create-react-app.

In this blog post, I want to document, how I set up my React projects. Basically, it is the same as we do at work, but we also include some commercially licensed tools, too.

Step 1: Install and Use Create-React-App

npx create-react-app your-new-react-project 
cd your-new-react-project

Or with TypeScript support. 

npx create-react-app your-new-react-project --typescript
cd your-new-react-project

The start is pretty straight forward. We just set up a fresh project using create-react-app. This already includes everything to start a basic React app which is managed with git. Ok, actually it covers almost everything, cause otherwise, this post would stop here.

Step 2: Add a Code Formatter

I enjoy coding standards. I love it when my editor takes care of it automatically for me. And I really appreciate, when code formatting is rerun at a pre-commit stage. All the code in a codebase should follow a defined coding standard. Yes, some colleagues hate me for this attitude.

The best solution from my point of view is, to add prettier along with some friends to the project. Prettier is responsible for the formatting. While husky and lint-staged are used to add prettier to your git workflow.

npm install husky lint-staged prettier

Next up, we have to add configuration for prettier to the project. Create a .prettierrc file.

{
  "trailingComma": "es5",
  "printWidth": 100
}

The last step is to add some configuration for husky and lint-staged to your package.json file.

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
    "prettier --write",
    "git add"
  ]
},

Don’t forget to add the required addon for your editor. For Visual Studio Code you want to use the extension Prettier – Code Formatter.

Step 3: Add Redux, React-Router and Redux-Thunk

Personally, I think, almost every project requires a central store and a router. So I always add redux, redux-thunk and react-router to my projects.

Setting up a basic store is something for another posting. I leave this out for the moment.

npm install redux react-redux redux-thunk
npm install react-router-dom
# Only if you use TypeScript
npm install @types/react-router-dom

Step 4: Add React-Helmet

react-helmet is an excellent little library to manipulate your header from within your components. It works nicely together with react-router.

npm install react-helmet
# Only if you use TypeScript
npm install @types/react-helmet

(Optional) Step 5: Add Prop-Types

In case you are using TypeScript, you can skip this step, because you get the same behaviour by using interfaces and React.FC.

import * as React from 'react' interface IProps { 
    // ... props interface  
} 
const MyNewComponent: React.FC<IProps> = (props) => {...};

But if you don’t use TypeScript, prop-types is an essential library from my point of view. I never understood, why I have to add it manually. prop-types provides runtime checking of the properties of your components.

npm install prop-types

Step 6: Add React Test Renderer

While prop-types might be left out of a project, I totally don’t understand why the team behind create-react-app left out react-test-renderer. Jest is obviously the testing facility of choice. But the snapshot testing feature of Jest is only useable with react-test-renderer. So, do yourself a favour and add this library to your project.

npm install react-test-renderer
# Only if you use TypeScript
npm install @types/react-test-renderer

(Optional) Step 7: Add Some UI Candy

Personally, I highly appreciate Material Design and Font Awesome. material-ui is a great library that offers Material Design components to React. Font Awesome is, without doubt, the best icon set available.

npm install @material-ui/core
npm install typeface-robots
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-brands-svg-icons
npm install @fortawesome/react-fontawesome

File System Layout

In the wild, you can find a wide variety of file system layouts. Personally, I prefer a layout where all components are kept under a components directory and every component lives in its own directory.

$ tree
.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── components
    │   └── App
    │   ├── App.css
    │   ├── App.js (Or App.tsx)
    │   └── App.test.tsx
    ├── store
    │   └── ...
    ├── index.js
    └── serviceWorker.js

The content of the store folder is subject of a different post because I haven’t settled yet how to structure my redux code. At the moment I am doing more work with Firebase as a backend so the post about redux might take some time.

One Final Advice

I think that you should never ever run npm run eject in a project created with create-react-app. Okay, „never ever“ might be equivalent to 90% of the time. A lot of tutorials suggest ejecting your project almost immediately after creation. But you won’t get much benefit from it and lose the fabulous tooling and sane defaults applied to your project by react-scripts.

The article Don’t eject your Create React App goes into more detail, why you shouldn’t do it.

Image Credits: Markus Spiske on Unsplash

Über den Autor Oliver Andrich

Ich arbeite mit Menschen. Ich entwickle Software. Ich blogge manchmal.

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.