Create Your First React Project

Bharathiraja
May 11 · 3 min read

Create and Preview React Project. And bind variables.

React or React JS is a very popular JavaScript library and it is used to create SPA( Single Page Web Application). React is used to create interactive UIs. React is an open-source JavaScript library and developed by Facebook.

In this tutorial, we will learn how to create a new React JS project from scratch. I planned to write more articles regarding React. So this is just an introduction article to the React JS tutorial series.

Install Needed Software:

Our prime requirement is NodeJS. Why because we are going to use the NodeJS package manager to create the React project. So download and install the NodeJS using the below command.

https://nodejs.org/en/

The NodeJS version is 14.16 at the time of writing this article.

Software versions are very important while learning. Right now the React project also had some changes to its previous version. You are able to see some changes in the current React project.

The React JS version is 17 at the time of writing this article.

Create React Project:

We can create a new React project using the following command on your terminal or command prompt.

npx create-react-app demo-proj
  1. npx create-react-app => It is a standard command for creating a new React project.
  2. demo-proj => It is the project name. You can give your desired project name here.

It will take some time to download the needed files from the internet. Once downloading is completed, you can open this project using any code editor. I am using VS Code editor.

Preview Project:

Go to the project folder using the terminal/ command prompt.

cd demo-proj

Use the following command in the terminal/ command prompt to generate the preview of this project.

npm start

It will compile and load the preview on port number 3000.

The React project ships with an auto-reload feature. It means, if you change anything in the code, it will automatically compile and reload the page when you save the changes. It is a cool feature. All modern JavaScript libraries/frameworks are using this feature.

Structure of Project:

The structure of the React project is given below.

  1. Under the src folder, we write our code. We will create all our new components under this folder.
  2. The App.js and App.css (JavaScript and CSS pair)are considered as components.
  3. The App.js mixed with both JavaScript and JSX( Like HTML).
  4. The App.js is the default landing page. We can modify this.
  5. The node_modules folder contains all the needed library files.

Bind Variables:

Let’s modify the App.js file with variables. The App() is a function in the App.js. So we can create a variable using let, var, const.

Bind the created variable inside the JSX( HTML ) using the single opening and closing curly brace. In Angular, we will use the double curly brace.

Save and preview the change in the browser. The changes are applied automatically.

Tips:

  1. Install Simple React Snippets plugin. It is used to generate the React snippets and commands.
  2. Install Prettier — Code formatter plugin. It will format the JSX code. By default, the JSX codes are not aligned properly in the VS Code editor. So installing this plugin will solve the JSX formatting problem.

Summary:

In this tutorial, you learned how to create a new React project from scratch and how to preview the project also. And we learned the structure of the React project and where to write our code. And learned few useful plugins to kickstart the React project. I am planning to write series of articles for React from creating a simple React project to create complex applications. So stay tuned for more articles regarding React.

I hope this article will be very helpful.

Thank you for reading this article.

Ampersand Academy

Ampersand Academy offers classroom & online training for…

Bharathiraja

Written by

Deep&Machine Learning, Ionic, Full Stack Developer. https://ampersandacademy.com/tutorials/ https://github.com/bharathirajatut

Ampersand Academy

Ampersand Academy offers classroom & online training for Data Analytics using SAS, R & Python, Data Science using R & Python, Deep Learning, Ionic, & Tableau. We also offer free tutorials and plugins. Write for us. Mail your article link to bharathirajatut@gmail.com

Bharathiraja

Written by

Deep&Machine Learning, Ionic, Full Stack Developer. https://ampersandacademy.com/tutorials/ https://github.com/bharathirajatut

Ampersand Academy

Ampersand Academy offers classroom & online training for Data Analytics using SAS, R & Python, Data Science using R & Python, Deep Learning, Ionic, & Tableau. We also offer free tutorials and plugins. Write for us. Mail your article link to bharathirajatut@gmail.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store