Let's Have an adventure in the React World

Let’s have some knowledge about React:

What is react, why with react, and how to use react are the most common questions.Well, let me explain.

React is a javascript library used for building user interfaces and help you to make your code better readable. You just need to install it. You can rule react. Wait a minute what does “you can rule react ” mean?? haha. You can rule react means you can use react whenever you want and react won’t mind you use it with other libraries. It understands what you want. Just tell her what you want and she will do it immediately. You don’t need to tell her how to do it. React is really smart.

Let's have some basics about library and frameworks:

1. Reuseable codes which are written by others
2. It has solutions to some common problems that everyone face
3. It reduces the complexity of codes
4. It helps us to maintain the dry theory( Don't Repeat Yourself)

Differences Between Library and Frameworks:

Library:

1. a small collection of codes written by others
2. developer rule over the library
3. a developer is in control
4. A developer can decide when and where to use it
5. example: react, jquery

Frameworks:

1. a huge collection of codes
2. the framework is in control
3. framework tells developer when and where to use it
4. example: angular

How React Works:

whatever language you are using to make a website you must convert it to dom else the website won't understand what you are trying to do. To know how react works you need two things. mainly you need two npm packages. they are

1. React
2. React DOM

I am going to show you the process of how the components are transformed into simple HTML code.

components — →>React — →>HTML code — →>React DOM — →>index.html

The list of things you need to learn:

1. class component and functional components
2. JSX
3. props and state
4. component life cycle
5. React Router
6. Redux
7. server-side communication
8. React Hooks

All About React Components:

I will discuss it very briefly so that you can understand the basics. Well, you can compare react to a house. We know that to build a house you just need an area and after building a house to decorate it you must need to buy the necessary thing. To build a house and after building to decorate it the things you need are can be called components or parts. React components act like the household things to decorate react.

There are two types of components. they are

1. functional components — here components are made with functions mainly arrow functions and inside a function, you can write as many functions as you can, and in return part, you must write the JSX code inside a parent.
2. class components — here components are made using class components.

Once you create a component you can use it whenever and where you need it just as an HTML tag.

JSX Vs HTML:

We know that HTML stands for HyperText Markup Language where JSX stands for Javascript XML.

JSX code and HTML code are quite similar. But you have to follow some rules in JSX code. like

1. when you write HTML code inside javascript then it is known as JSX code.
2. you cannot use any HTML tag without using an end tag. If you do, you will get an error. In HTML, you are using an end-tag or not that's not a big deal.
3. there must be a parent tag where you must keep your JSX code.
4. you can write javascript code inside JSX code
5. you can use all the methods of javascript inside JSX.
6. Whenever you are applying components inside the code, you must use Capital case for writing the components name.

Passing Data In react Components:

there are different ways of passing data or store data permanently and temporarily. React has its own feature to pass data through react components. They are

1. using props
2. context api
3. using Redux

React sometimes reacts:

State is like condition or present situation of any changing portion in code. you can consider it as you are pressing the add to cart button and the product is added to your account or you press the quantity button and the quantity of the product is increasing as well the total amount is also increasing. This is all about. It means you can change any task dynamically by using react state.

Events in React:

We are introduced to javascript events. We are used to it. But in react we must maintain some rules about using events. like you must use camelcase while using an event. you must write onClick instead of onclick and this is a must.When you call a function inside an event handler, you can pass data through the event handler easily and that’s really an awesome thing.