React is a popular JavaScript library for building user interfaces. It was created by Facebook and is widely used by developers all over the world. In this tutorial, we’ll walk through the basics of React and create a simple application.

Prerequisites

Before we begin, you’ll need to have a basic understanding of HTML, CSS, and JavaScript. You should also have Node.js and npm installed on your machine. If you don’t have them already, you can download them from theofficial website.

Setting up the project

To create a new React project, you can use thecreate-react-app command-line tool. Open up a terminal and run the following command:

npx create-react-app my-app

This will create a new directory calledmy-app with all the necessary files and folders for a React project.

Creating our first component

In React, everything is a component. A component is a reusable piece of code that can be used to build user interfaces. Let’s create our first component by creating a new file calledHelloWorld.js in thesrc folder.

importReactfrom'react';functionHelloWorld(){return(<div><h1>Hello,World!</h1></div>);}exportdefaultHelloWorld;

In this code, we define a new function calledHelloWorld that returns some JSX. JSX is a syntax extension for JavaScript that allows us to write HTML-like code inside our JavaScript files.

We then export this component using theexport default syntax, so that it can be used in other parts of our application.

Using our component

Now that we’ve created ourHelloWorld component, let's use it in ourApp component. Open up theApp.js file in thesrc folder and replace the existing code with the following:

importReactfrom'react';importHelloWorldfrom'./HelloWorld';functionApp(){return(<div><HelloWorld/></div>);}exportdefaultApp;

In this code, we import ourHelloWorld component and use it inside ourApp component.

Running the project

To run our project, open up a terminal and navigate to themy-app directory. Then run the following command:

npm start

This will start a development server and open up our application in a new browser window.

Conclusion

In this tutorial, we’ve walked through the basics of React and created a simple application. We’ve learned how to create a new project, create a new component, and use that component in our application. We hope you found this tutorial helpful!