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.
Let's have some basics about library and frameworks:
- Reuseable codes which are written by others
- It has solutions to some common problems that everyone face
- It reduces the complexity of codes
- It helps us to maintain the dry theory( Don't Repeat Yourself)
Differences Between Library and Frameworks:
- a small collection of codes written by others
- developer rule over the library
- a developer is in control
- A developer can decide when and where to use it
- example: react, jquery
- a huge collection of codes
- the framework is in control
- framework tells developer when and where to use it
- 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
- 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:
- class component and functional components
- props and state
- component life cycle
- React Router
- server-side communication
- 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
- 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.
- 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:
JSX code and HTML code are quite similar. But you have to follow some rules in JSX code. like
- 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.
- there must be a parent tag where you must keep your JSX code.
- 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
- using props
- context api
- 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: