How to set up a professional React project (including screencast)
Tags: react, webdev, javascript, frontend
Published: 2022-03-11 11:49:10

---
title: How to set up a professional React project (including screencast)
published: true
description: This guide explains how to create a new React app using a popular tech stack: Next.js, TypeScript, ESLint, Prettier, styled-components, Cypress, Storybook.
tags: react, webdev, javascript, frontend
canonical_url: https://profy.dev/article/setup-react-project
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlc92fpwou8lcry7iv9g.png
series: Professional React Development
 ---

When you start a new React app you might wonder how to set it up in a professional way. What tools should you use? What libraries do you need from the start?

Based on [the most popular React tech stack](https://profy.dev/article/react-tech-stack) this article will guide you through the setup of a new application using

- Next.js
- Typescript
- ESLint
- Prettier
- styled-components
- Cypress
- Storybook

The video below shows how I set up the app for my upcoming [Bootcamp for Self-Taught React Devs](https://profy.dev/waitlist?utm_source=srp-1&utm_medium=devto) with exactly this tech stack. The screencast is nearly unedited to show the whole process and not only the polished outcome. If you're looking for a quick guide you can find all steps for the setup on this page.


{% embed https://www.youtube.com/watch?v=cwJS8FARmXk %}


## Next.js & TypeScript

Next.js is the go-to React framework. It has a lot of neat features like server-side-rendering that are important for many professional apps. Many developers tend to use it for any new React project.

This command creates a new Next.js application using TypeScript. (Feel free to remove the `--typescript` option if you already have too much to learn.)

```bash
npx create-next-app@latest --typescript
```

You'll be prompted for a project name and the package manager of your choice. I simply went with npm.

> Note: if you plan to host the project on GitHub you might want to rename the `master` branch to `main` with this command: `git branch -m master main`
> 

## ESLint

The Next.js app is already set up with ESLint which is used to detect bugs by statically analyzing your code. 

For my taste, the default rules that come with Next.js are not strict enough though. For example, unused variables don't cause an error. [A standard set of rules found in the ESLint docs](https://eslint.org/docs/user-guide/getting-started#configuration) is `eslint:recommended`. We can extend it in the `eslintrc.json` config file.

```json
{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended"
  ]
}
```

## Prettier

Prettier is used to automatically format your code according to a standard. That makes your code more readable and saves you a lot of manual effort. 

You can use a Prettier plugin for your IDE. I use VS Code and [its Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) with the following settings to auto-format when I save a file.

![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/93b12ee1-af93-4b9b-b6bf-147b414cd0fa/Untitled.png)

To [integrate Prettier with ESLint](https://nextjs.org/docs/basic-features/eslint#prettier) you can use the `eslint-config-prettier` and add it to your `eslintrc.json` config. This way [you don't get conflicts](https://prettier.io/docs/en/integrating-with-linters.html) between Prettier and ESLint.

```bash
npm install --save-dev eslint-config-prettier
```

```json
{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "prettier"
  ]
}
```

The Next.js app doesn’t use the Prettier format by default. Run `npx prettier --write` to format all files.

## styled-components

styled-components is a very popular library for writing custom CSS. Next.js doesn’t support it out of the box, but this official [example repo](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components) shows us how to set it up. First, we install the library.

```bash
npm install styled-components
```

Then we add `styledComponents: true` to the compiler option in the `next.config.js` file.

```js
const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
};
```

Additionally, we need to create the `pages/_document.tsx` file to avoid a "flash of unstyled content" on the initial page load [according to the example repo](https://github.com/vercel/next.js/commit/7ce5d3f2408b08c6121b7edd825615161c616309).

```tsx
import Document from "next/document";
import { ServerStyleSheet } from "styled-components";
import type { DocumentContext } from "next/document";

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}
```

That's it. To use global styles or the `ThemeProvider` you need to edit the file `pages/_app.tsx` as [shown here](https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_app.js).

## Cypress

Cypress is a tool that’s commonly used to write end-to-end tests (meaning it tests the whole system from frontend to database just like a real user).

For the setup, [the Next.js docs](https://nextjs.org/docs/testing#manual-setup) are again very helpful. First, we install Cypress.

```bash
npm install --save-dev cypress
```

Then we add `"cypress": "cypress open"` to the `scripts` section in our `package.json` file.

```json
{
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "cypress": "cypress open"
  },
```

Finally, run `npm run cypress` to initialize the project. This creates a few folders and demo tests in your repository. Then the Cypress UI opens where you can run the demo tests.

When you open the test files you'll realize that ESLint complains that global functions like `describe` or `it` don't exist. To get rid of these errors we can install an ESLint plugin and adjust the `eslintsrc.json` config file.

```bash
npm install eslint-plugin-cypress --save-dev
```

```json
{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "prettier"
  ],
  "plugins": ["cypress"],
  "env": {
    "cypress/globals": true
  }
}
```

## Storybook

Storybook is a tool widely used to document and visually test UI components. [According to the docs](https://storybook.js.org/docs/react/get-started/install) we first need to initialize or project.

```bash
npx sb init
```

Then run Storybook. This will open a new browser tab where you can play around with some demo components.

```bash
npm run storybook
```

[![Bootcamp for Self-Taught React devs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0a7pa5bdyj2tip5om7p.png)](https://profy.dev/waitlist?utm_source=srp-2&utm_medium=devto)