How to create your first react project

Hello💙,

Welcome back to my blog, my name is Gbemi😊 and it's so lovely to have you here. Today, we will walk through a step-by-step process of creating our first React project.

What is React?❓❔

React is a free and open-source JavaScript library for building user interfaces. It is arguably one of the most famous JavaScript libraries used for building user interfaces. It provides developers with a straightforward and systematic way to create reusable UI components that can be rendered on both client-side and server-side applications.

Step 1: Setting up our Development Environment⛺

To create our react project, we'll need to set up our development environment. Follow these steps to set up your development environment.

-Install Node.js You need Node.js installed on your machine to be able to use React. You can simply download and install the latest version of Node.js from the Nodejs official website here: https://nodejs.org/en/

-Install a text editor You will need a text editor to write your code. If you're confused about what a text editor is, I wrote an article on it here https://oladetoungee.hashnode.dev/what-on-earth-are-code-editors Choose whichever text editor that you are comfortable with and install it on your machine.

Step 2 - Creating our first React App🚘

Firstly, we navigate to a preferred directory on our machine. To create our react app, we use the command, "create-react-app" with your project name in the preferred directory. In this instance, the name of our react app is "my-first-react-app", you can use any name you want

npx create-react-app my-first-react-app

This will create a new React app named "my-first-react-app" in my current directory.

Step 3: Creating our First React Component📍

Now that we have set up our development environment and equally created our first react app, we can now create our first React component. Here are the steps to follow:

-We'll open our text editor and navigate to the "my-first-react-app" folder that was created in Step 2.

-We'll then open the "src" folder and locate the "index.js" file which is the entry point for our React app.

-Then we'll replace the contents of "index.js" with the following code:

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>
      <h1>Hello, World! This is my first React App</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

-Save the changes and return to your terminal.

-Run the following command to start your React app:

npm start

This will start a development server and open your React app in your default browser.

-You should see a page with the text "Hello, World! This is my first React App" displayed in the centre.

Congratulations🎉! We have just created your first React app together. Now that you have a basic understanding of how React works, you can start exploring more advanced concepts and building more complex applications.

@Hashnode gives readers the ability to like a single post up to ten times, so click the like button for more visibility on this post and don't forget to follow me for more articles like this. See you in my next post, byeeee👋

Gbemi's blog