16 Commands For Every Use Case to Set Up React Apps in Seconds ⚡🚀

Today speed is one of the main criteria to beat the competition. With technologies becoming more complex, we spend increasing amounts of time setting up and configuring everything.

In this article, I have handpicked 16 commands to set up your React apps in seconds. I tried to cover a variety of the tools for different use cases you might face in your developer workflow.

Most of the tools included in this article are open-source. I will give you the direct access link, the description of the tool as well as the commands to run them from the terminal.

An officially supported way to create single-page applications. It offers a modern build setup with no configuration.

npx create-creact-app project-name
cd project-name
npm start

# starts on port 3000

A truly minimal replacement for . A full project in only 6 files. Uses with zero-config instead of . No eject, no linting, no service worker.

npx nano-react-app project-name
cd project-name
npm install
npm start

# starts on port 3000

The web's most popular front-end template for building web applications with , , and . Based on architecture.

git clone -o seed -b main --single-branch //github.com/kriasoft/react-starter-kit.git project-name
cd project-name
npm install
npm start

# starts on port 3000

A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

git clone --depth=1 //github.com/react-boilerplate/react-boilerplate.git project-name
cd project-name
npm run setup
npm start

# starts on port 3000

It uses to build both web and projects by providing complete build presets which can be shared across targets and projects.

npx @neutrinojs/create-project project-name
# pick react from the wizard
cd project-name
npm start

# starts on port 5000

A tool that abstracts all the complex configuration needed for building SPA's and SSR applications. It leaves your app's architectural decisions about frameworks, routing, and data fetching up to you.

npx create-razzle-app project-name
cd project-name
npm start

# starts on port 3000

CLI for creating reusable, modern libraries using .

npx create-react-library 
# enter project-name as a title in wizard
cd project-name
npm start

# runs `rollup` with the watch flag to recompile your source on changes, no port used

in a separate terminal run another server to preview example:

cd project-name/example
npm start

# starts on port 3000

A zero-config CLI that helps you develop, test, and publish modern packages with ease - so you can focus on your awesome new library and not waste another afternoon on the configuration.

npx tsdx create project-name 
# choose react as a template in the wizard
cd project-name
npm start

# runs in watch mode to recompile your source on changes, no port used

An upgradable boilerplate for Progressive web applications (PWA) with server-side rendering, build with SEO in mind, and achieving max page speed and optimized user experience.

git clone //github.com/Atyantik/react-pwa.git project-name
cd project-name
npm install
npm start

# starts on port 9090

A toolkit for building scalable web applications with , and . It's designed to be scalable, testable, and maintainable by using feature-oriented architecture, one action per file pattern.

npm install -g rekit  # install rekit cli
npm install -g rekit-studio  # install rekit studio

rekit create project-name
cd project-name
npm install
rekit-studio -p 3000

# starts on port 3000

A boilerplate project for creating web apps with , and .

git clone //github.com/kriasoft/react-firebase-starter.git project-name
cd project-name
npm setup
npm start

# starts on port 3000

A Foundation for Scalable Cross-Platform Apps. Uses , , , and .

git clone --depth 1 --branch main //github.com/electron-react-boilerplate/electron-react-boilerplate.git project-name
cd project-name
npm install
npm start

# starts on port 1212

Focused on being the fastest way to bootstrap a app that runs on iOS, Android, and web without worrying about the native platforms or bundlers required for developing and shipping apps.

npx create-react-native-app
# set the name to project-name in the wizard
cd project-name
npm run web

# starts on port 19006

The easiest way to get started with . You can create a new app using the default Next.js template, or by using one of the official Next.js .

npx create-next-app project-name
cd project-name
npm run dev

# starts on port 3000

Free and open-source framework based on that helps developers build blazing-fast websites and apps. It combines the control and scalability of dynamically rendered sites with the speed of static-site generation.

npm install -g gatsby-cli # install gatsby cli

gatsby new
# set the name to project-name in the wizard
cd project-name
gatsby develop

# starts on port 8000

A batteries-included framework that's inspired by , is built on and features a Zero-API data layer abstraction that eliminates the need for REST/GraphQL.

npm install -g blitz --legacy-peer-deps # install blitz cli

blitz new project-name
cd project-name
blitz dev

# starts on port 3000

Hopefully, you will find some of these instructions useful, so you can save a lot of time on setting up the workspace and fully focus on the actual coding instead.

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on , , and !

Visit my for more articles like this.

---

Also Published