10 thing you have to know about react as a beginner
Today I will discuss which thing you have to know about react as a beginner if you want to learn to react. there I discuss the top 10 thing
1. React not a framework :
As a beginner, it is common that everyone confused is reacted Never be confused with the react library of the framework. Actually, ReactJS is not a framework, it’s a JavaScript library. it used for building reusable UI components.
2. Virtual DOM :
The virtual DOM is only a virtual representation of the DOM. Everytime the state of our application changes, the virtual DOM gets updated instead of the real DOM.
A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.
Virtual DOM is a technique and set of libraries/algorithms that allow us to improve front end performance by avoiding direct work with DOM and work only with a lightweight JavaScript object that mimics the DOM tree.
3. React JSX :
All of the React components have a render function. The render function specifies the HTML output of a React component. JSX(JavaScript Extension), is a React extension that allows writing JavaScript code that looks like HTML.
- JSX is faster because it performs optimization while compiling code to JavaScript.
- JSX is also type-safe and most of the errors can be caught during compilation.
- JSX makes it easier and faster to write templates if you are familiar with HTML
4. React Component :
Every React component have their own structure, methods as well as APIs. They can be reusable as per your need. For better understanding, consider the entire UI as a tree. Here, the root is the starting component, and each of the other pieces becomes branches, which are further divided into sub-branches.
5. React event :
React has its own event handling system which is very similar to handling events on DOM elements. The react event handling system is known as Synthetic Events. The synthetic event is a cross-browser wrapper of the browser’s native event. Event is all time going to the child to the parent component
6. React Props:
Props give a way to pass data from one component to another components. It is similar to function arguments. Props are passed to the component in the same way as arguments passed in a function. Props are all-time going on the parent to child component
7. React state:
The state is an updatable structure that is used to contain data or information about the component. We should always try to make our state as simple as possible and minimize the number of stateful components. The state in a component can change over time. The change in state over time can happen as a response to user action or system events.
8. React Router:
React Routerused if a user is directed to different pages based on their action or request. Router is mainly used for developing Single Page Web Applications. React Router is used to define multiple routes in the application. When a user types a specific URL into the browser, and if this URL path matches any ‘route’ inside the router file, the user will be redirected to that particular route.
9. React Hooks:
Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace your knowledge of React concepts.
If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component.
10. React Empty Fragments
render method can return single elements or multiple elements. The render method will only render a single root node inside it at a time. However, if you want to return multiple elements, then if you use an empty fragment then it’s the best practice.
I am new to blog writing if you notice any mistake please comment and forgive me
