10 things to know about React
React is a JavaScript library for building modern applications. Choosing the best front-end technology nowadays is a big deal. Today’s web development era has witnessed quite a few technologies in the market, each designed to meet different needs. React is one such technology that has been utilized by almost every company.
Why use React?
i. An easier way to Learn for developers.
ii. It enables developers to reuse components
1. ReactDOM
2. Component
React components are what make our code reusable and split our UI into different pieces.
React components work identically to JavaScript functions. A React component accepts arbitrary inputs that we call props and should always return a React element describing what should be rendered to the user.
The simple way to define a React component is to define a JavaScript function and return a React element, like this:
We defined a React component called Welcome that accepts a single prop called props, which stands for properties, and returns a React element, in this case, a simple h3 element.
A React component should always return a React element, otherwise, it will throw an error.
React components follow the separation of concerns design principle, which means that we should separate a computer program (in this case, our application) into different sections so that each section addresses separate concerns.
React components are really powerful because they help us to keep cleaner, more robust, and concise code throughout our whole application. We can have as many React components as we want.
3. Virtual-DOM
React works with a feature called virtual DOM (Document Object Model), a virtual representation of the real DOM tree. It’s just a tree data structure of plain JavaScript objects that is kept synced in memory. Rendering the virtual DOM is faster because it will never be rendered to the user, it will only live in memory.
When your React app loads, React creates a copy of your real DOM tree. Whenever there’s a state change in any part of your application, instead of re-rendering the whole real DOM tree, React first updates its virtual DOM with the updated state.
Next, React compares its virtual DOM to your real DOM tree to know what needs to be changed. Then it changes your real DOM tree, but it will only change those elements that need to be changed, nothing else.
The virtual DOM is one of the features that make the React framework so fast and reliable.
4. State Hook
5. Effect Hook
6. JSX
7. prop-types
8. Events
