How to Create a React Project

Posted on Edited on In ,

There are many ways to create a React project. In this post, I will introduce the commonly used methods for creating a React project.

Using Vite

# To create a react project
npm create vite@latest . -- --template react
# Or react + typescript
npm create vite@latest . -- --template react-ts

Verify

npm install
npm run dev

For more details, refer to Scaffolding Your First Vite Project

Using the create-next-app CLI tool

Create a React project with the Next.js framework.

Next.js is an actual framework, or meta-framework as they are also called. You get a bunch of stuff out of the box, like routing and different rendering strategies (SSG, SSR, ISR) access to plug-ins, and so on. If you just need a SPA app you can still use Next but Vite might be easier to get going with, in some case.

# It will run npm install automatically.
npx create-next-app@latest
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
✔ What import alias would you like configured? … @/*
  • “Yes” or “No” depends on your needs. Generally, I choose “yes” for all choices.

Verify

npm run dev

Why create-react-app (CRA) is no longer recommended for use?

  • Evolving Ecosystem: Developers now have access to a wide range of tools, libraries, and best practices that may not be compatible with CRA’s default setup.
  • Flexibility and Customization: CRA’s simplicity comes at the cost of flexibility. It makes certain assumptions about project structure and build configuration that may not be suitable for every project.
  • Performance: CRA’s default Webpack configuration can result in suboptimal build performance, particularly for large applications.
# To create a react project. It will run `npm install` automatically.
npx create-react-app my-app
# or create a project in current directory
npx create-react-app .
# react + typescript
npx create-react-app my-app --template typescript

Verify

cd my-app  
npm start

For more details, refer to Create React App Documentation

Errors

Error 1: The error Cannot find module 'ajv/dist/compile/codegen' occurred when run npm start.

Solutions

npm install ajv --save-dev

References

[1] The End of an Era: React Team No Longer Recommends Create React App