React-1 Create a React project and your first Component on React

Hello everyone, I hope you are all having nice projects and learning a lot.

We will create our first react project and will be talking about components and writing our first component together. You are probably know about that but still I wanna make a quick reminder before you start you should know about javascript. If you dont first you should learn at least some basic topics like variables, functions, methods and Domain Object Model.

Lets create our first react project.

1. Do you have node.js on your computer?

First get sure you have node.js on your computer you can learn that by writing below code on command prompt

node --version

If you dont you can download node.js from here

2. Create React project with vite

vite is a front-end tool and we will use it to create the project. You can read more about vite from here

You can open Command prompt or visual studio code to create it.

First step: write below code

npm create vite

second step: now vite will ask you to chose a project name. I will make it as first-react-project but you can choose any name as you like it does not matter.

1.1

Third step: now we need to choose which frontend we will use as you see in the photo(1.1). we will choose React of course :D

Last step: Now vite will be asking us the below question(photo 1.2) I wll be using React that’s why I will chose Javascript.

1.2

3. Add packages and Run the project.

First you need to write on terminal the below code to upload your project necessary packages.

cd first-react-project // localte on the right folder
npm install // it will be adding packages.

now you can write the below code run your project.

npm run dev

you will probably see something like that on your terminal which will reference to react’s working local path.

1.3

Now you can click the link and open it on your browser.

1.4

When you click the link if you are seeing that kind of page(photo 1.4) thats mean you have successfully created and run your first react project, Congrulations ✨✨

Lets go on and talk about components✨

sometimes we may use the same template or page again. When thats the case components solves the problem. components are reusable thats why when we are using the same template we can create components and call it when we want to use it. And thats how when we want to make changes we can jsut make changes on the component and it will be implemented on every page where we use that template.

1.5

Under our new created react project there you will src file as the 1.5. and under that folder there are some css and jsx files. if you click the App.jsx file and check it you will see that its the page which we have just seen when we run the app.

1.6

Thats(photo 1.6) how it looks on my created project it may look little different on your project but that does not any big difference.

Now I will add a new function:

function TryComponentFunction()
{
  return (
    <p>This is a trying Component Function </p>
  );
}

And I will call this funciton inside of App Funciton as in the below image(1.7)

and if you save and check the running web page again you can see that the new paragraph is implemented to the web page(1.8)

That was all I wanted to tell about on this React-1 article. I hope you enjoy it. If it you liked it dont forget to claps and follow to get a notifcation for new articles. See you soon.