3 Simple Ways to Create a React App

It is now simpler than ever to get started with building React apps thanks to a variety of very clever build tools, which we will be talking about today.

Decreasing the barrier to entry for using React is very important, especially when you are first trying to learn it. I believe that these three build tools for React will do just that.

1: Create-React-App

Perhaps the most used way to scaffold out a React app is this tool. Create-React-App is a straightforward and easy-to-use command-line tool for building out a React application. The only thing that you need to get started is a command-line, and NodeJS/NPM installed.

Running the following command will create a brand new React app with the name of “demo.”

npx create-react-app demo

This will kick off creating a React application, and when finished, you can hop right into the project and start coding. To run it, simply navigate to the project directory in the command-line and type the following.

npm start

For more information on how to use Create-React-App, you can check out the below link. They have excellent documentation, and I highly recommend checking it out.

Create React App

2: Vite

Vite very much can be used the same way as Create-React-App, and I find this tool to also be very useful for just scaffolding a basic React application. Something that differentiates Vite from Create-React-App is that you not only can use it for React applications but also Vue, Svelte, and a variety of other types of applications. It’s also incredibly easy to start using. Once again, all you’re going to need is a command-line, and NodeJS/NPM installed.

Running the following command in the command line will create a new React application with the name “demo.”

npm init vite@latest demo -- --template react

To run the Vite app we just created, we will need to navigate to the project directory and run this command in the command-line.

npm run dev

And once again, that is all we needed to do to have a fully functioning React starter app that we can work on.

For more detailed information on how to use Vite, you can check out the below link.

Vite

3: Create-Next-App (NextJS Framework)

This tool is a bit different than the above two that we have covered in that it will scaffold out a React Framework known as NextJS. So you get a lot more than just a vanilla React app with some intelligent presets with this one. You are gonna get an entire Server-Side Rendered React Framework with this command, but just like the above commands, it will be just as simple to create.

To create a new NextJS application named “demo,” you will run the following command in the command-line.

npx create-next-app demo

This will create a brand new NextJS App that you can start up by navigating to the directory in the terminal and running this command.

npm run dev

As I said, this one is not as lightweight as the first two and will have its own style for writing React code along with other framework-specific coding patterns. For more information on how to use NextJS, check out the below link.

Next.js by Vercel - The React Framework

Honorable Mention: CodeSandbox

This doesn’t really fit in the scope of this list because it is an entire code editor that lives in the browser, but CodeSandbox is perhaps the easiest way to get up and running with a React app. All you need to do is go to their site and create a free account. This will allow you to create a new sandbox and pick the React Template. And you have a fully functioning React App that you can live-edit in the browser with no setup required.

To get started, navigate to the below link.

CodeSandbox: Online Code Editor and IDE for Rapid Web Development

Wrapping Up

I find these tools can help maximize the developer experience as a React developer and allow for focus to be placed on code and not setup work. Not to say that the setup step isn’t important and having a custom build environment is sometimes the best bet, based on the project, but I find myself going to these tools more often than not, as they make working with React fun, exciting, and easy.

As always, if you have any questions or suggestions, feel free to leave a comment. I’m sure I left many build tools out and would love to hear your favorites!

More content at plainenglish.io