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 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
npx nano-react-app project-name cd project-name npm install npm start # starts on port 3000
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
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
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
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 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
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
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
git clone https://github.com/kriasoft/react-firebase-starter.git project-name cd project-name npm setup npm start # starts on port 3000
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
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
npx create-next-app project-name cd project-name npm run dev # starts on port 3000
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
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!
Visit my Blog for more articles like this.
Also Published Here