How To Create React App

In our world today, everything became online, If you want to buy something, you can go online to check it and buy it.

If you want a driver, you go ahead and order some of the famous transport services like "Uber"

Today we depend on the internet to do everything mostly, So now we will talk about one of the most powerful libraries.

That helps us to create web applications and provide our services online, this library is React.js, let's figure out what's react.js.

What Is React ?

React.js is an open-source UI library based on Javascript the first release of react was in May 2013.

This library was created by Team called UIE ([U]ser [I]nterface [E]ngniers) at Facebook, also it has a very large community.

If you're interested to know more about the story of making react you can check this amazing podcast with Pete Hunt from here

React.js help us to create complex UI interfaces because it is based on the Components concept every component has its own state, and then you can compose them to get finally complex user interfaces

That makes it very powerful, also most famous companies use it to create their interfaces one of those companies is absolutely Facebook

Facebook is partially making react.js on their web app and also their mobile application based on "React Native".

I think you are excited now to learn more about react. so let's learn the first thing about react that's the "JSX Template".

What's JSX ?

JSX is a syntax extension for javascript, that helps you to get the full power of javascript.

Because you can display the outputs of your code in HTML directly, Now you don't need to separate files to create your interactive web application, Instead of that

JSX came to put them both in one file with an extension (.js | .jsx |.tsx) that file will be transformed to js files by transpilers like "Babel"

Babel converts your JSX code to inherit objects of javascript and combines them to get finally your component.

Now we learned more about react and, its template "JSX" so let's create a react app and write our first code.

Create React App

First, you need to install Node.js on your device you can download it from here, Then install it like any program.

After installing it you can check if it installed by type

1node -v

Now we can continue after this, you will write

1npx create-react-app@latest hello

In this command, you use the create-react-app package to create react app called hello, You can change this name if you want.

After installing it you should see this.

You can write

1cd hello

1npm start 

Now go to src/App.js and edit it then save the file and see the magic happen.

Great now after creating our first app Let's learn more about react and talk about props in react.

React Props

Props are the way you can connect your components with each other, you can pass data from one component to another from it.

Actually, you can think about Props like attributes in HTML but you can access them from a javascript object.

Let's take an example of this with a simple function component

Here as we can see we can access props from the parameter of our function component. And the output will be like this

Now we can talk about the second thing to storing data
In React, That's

1state

React States

States are the place where you can store your data into it well! what's the difference between it and Props ?!

Alright that's a good question, as we mentioned before we use props to pass data "between" the components

But here with states, you put your data into the same component. You don't need to pass it from props.

Also, there's another difference between them. You can use states if your data will change and you will need to track it Every change happens.

Unlike props, because you can't change it.

So Let's make a simple example, We will create a counter app when you click on the button, the counter will increase by one that's a very good example to show you the difference between states and props.

Here we used

1useState 

1count

What's next?

Alright now after we learned about React and JSX, also we talked about props and states you will need to go more deeply into react.

You should learn about "Class Components", "Function Components", "Hooks and how to use them", "React Rendering" and more

This article was made to help you learn some basics of react, If you want to go deeper in react and learn it, I recommend for you this free course from "code evolution channel" on youtube check it out from here

Also If you're interested in this type of content make sure to subscribe from the "Newsletter Subscription"

thank you for reading, and have a good day.