Photo by Lautaro Andreani on Unsplash

Get Started with React: A (very) quick start guide to creating an app boilerplate

React is a front-end JavaScript library that has taken the web development world by storm. It allows you to create web applications made with reusable components. This quick start guide will show you how to get started with a React app.

There are multiple options to get your app boilerplate running, and I choose here to describe a simple, quick, and efficient way.

Install Node.js if you haven’t already

Node.js is a platform that allows you to run JavaScript code outside of a web browser and is mandatory as react is a library written in JavaScript.

You can find the installation instructions and download Node.js from their website: https://nodejs.org

Create your React app

Once you have Node.js installed, you can create your React app by running the following command in a terminal:

npx create-react-app my-new-project-name

A new folder called “my-new-project-name” will be created with all necessary dependencies for React installed. You can also use this command to create new React projects with different names.

Run the default app

You can now run it by entering the my-new-project directory and running the following command:

npm start

This opens a new tab in your browser that shows your project. You should see something that looks like this:

Congrats, you have now created your first React app 🥳

Templates

You can specify a template when you use create-react-app to install some prerequisites from the beginning.

In this case, you can use the following syntax:

npx create-react-app my-new-project-name --template [template-name]

One very popular template includes everything you need to use TypeScript in your project :

npx create-react-app my-new-project-name --template typescript

Conclusion

Creating a new react app environment with the essential dependencies is very easy with tools like create-react-app. You can also have everything set up with TypeScript with the right template.

What can you do to help me?

Please don’t hesitate to:

  • Like the article
  • Follow me
  • Leave a comment and express your opinion.

Happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top