DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to Setup a Fresh React App
Oliver Andrich
Oliver Andrich

Posted on • Originally published at andrich.blog on

How to Setup a Fresh React App

Update 2018-03-15 Some commenters asked for TypeScript support. It can be easily achieved because most of the packages provide TypeScript support out-of-the-box.

Recently I held a two-day React workshop for parts of my team. We decided to switch to React for 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. 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 new project using create-react-app. This already includes everything to start a 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 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 --save-dev 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

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 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
npm install --save-dev @types/react-router-dom         # Only if you use TypeScript

Step 4: Add React-Helmet

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

npm install react-helmet
npm install --save-dev @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 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 --save-dev react-test-renderer
npm install --save-dev @types/react-test-renderer         # Only if you use TypeScript

(Optional) Step 7: Add Some UI Candy

I highly appreciate Material Design. material-ui is a great library that offers Material Design components to React. Material-UI itself provides a beautiful icon set that can be completed by adding the Material Design Icons package to the project.

npm install @material-ui/core
npm install @material-ui/icons
npm install mdi-material-ui
npm install typeface-roboto

File System Layout

In the wild, you can find a wide variety of file system layouts. I prefer a layout where all components are kept under a components 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.js (or App.test.tsx)
    β”œβ”€β”€ store
    β”‚   └── ...
    β”œβ”€β”€ index.js (or index.tsx)
    └── serviceWorker.js (or serviceWorker.ts)

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 run npm run eject in a project created with create-react-app. Okay, β€œnever” 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

Top comments (9)

Collapse
 
baso53 profile image
Sebastijan Grabar

PropTypes was actually a part of React some time ago, but then it was moved to a separate package. :)

Collapse
 
oliverandrich profile image
Oliver Andrich Author

Yeah, I remember that time and don't understand why they split it up.

 
oliverandrich profile image
Oliver Andrich Author

Thx for the hint.

Collapse
 
oliverandrich profile image
Oliver Andrich Author

A good point. Maybe I need to update the post as soon as I have got hooks and Typescript working together.

Collapse
 
hugoliconv profile image
Hugo

Aren't they working well together?

Thread Thread
 
oliverandrich profile image
Oliver Andrich Author

I had some hick-ups in the pre-releases and haven't tried it after the release yet. medium.com/@jrwebdev/react-hooks-i... suggests that everything seems to work nicely. The weekend is coming. ;)

Collapse
 
oliverandrich profile image
Oliver Andrich Author

Added the TypeScript relevant parts cause the changes are so minor after the support for TypeScript is getting better and better.

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.