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.
create-react-app
An officially supported way to create single-page React 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
nano-react-app
A truly minimal replacement for Create-React-App. A full React project in only 6 files. Uses ViteJS with zero-config instead of Webpack. No eject, no linting, no service worker.
npx nano-react-app project-name
cd project-name
npm install
npm start
# starts on port 3000
react-starter-kit
The web's most popular front-end template for building web applications with React, Relay, and GraphQL. Based on JAM stack architecture.
git clone -o seed -b main --single-branch https://github.com/kriasoft/react-starter-kit.git project-name
cd project-name
npm install
npm start
# starts on port 3000
react-boilerplate
A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git project-name
cd project-name
npm run setup
npm start
# starts on port 3000
neutrino
It uses Webpack to build both web and Node.js 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
razzle
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
create-react-library
CLI for creating reusable, modern React libraries using Rollup.
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
tsdx
A zero-config CLI that helps you develop, test, and publish modern TypeScript 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
react-pwa
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 https://github.com/Atyantik/react-pwa.git project-name
cd project-name
npm install
npm start
# starts on port 9090
rekit
A toolkit for building scalable web applications with React, Redux and React-router. 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
react-firebase-starter
A boilerplate project for creating web apps with React, GraphQL and Relay.
git clone https://github.com/kriasoft/react-firebase-starter.git project-name
cd project-name
npm setup
npm start
# starts on port 3000
electron-react-boilerplate
A Foundation for Scalable Cross-Platform Apps. Uses Electron, React, React Router, Webpack and React Fast Refresh.
git clone --depth 1 --branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git project-name
cd project-name
npm install
npm start
# starts on port 1212
create-react-native-app
Focused on being the fastest way to bootstrap a React Native 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
create-next-app
The easiest way to get started with Next.js. You can create a new app using the default Next.js template, or by using one of the official Next.js examples.
npx create-next-app project-name
cd project-name
npm run dev
# starts on port 3000
gatsby.js
Free and open-source framework based on React 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
blitz
A batteries-included framework that's inspired by Ruby on Rails, is built on Next.js 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 Twitter, LinkedIn and GitHub!
Visit my Blog for more articles like this.