Getting started with React from scratch to actual project practice
Chapter 1 Introduction to React
Article directory
提示：以下是本篇文章正文内容，下面案例可供参考
1. What is React?
1. React overview
React is a JavaScript library open sourced by Facebook for building user interfaces (User Interface, UI for short).
The component-based development method is adopted to split the UI interface into individual components, thereby improving the maintainability and reusability of the code.
2. The relationship between React and traditional MVC
It is a lightweight view layer library! A JavaScript library for building user interfaces
React is not a complete MVC framework, at most it can be considered as V (View) in MVC.
React is a library for building page UI. It can be understood that React divides the interface into independent small blocks. Each block is a component. These components can be combined and nested to become the page we wrote.
3. What are the features of React?
- 1) Declarative design : React adopts a declarative paradigm, which can easily describe the application.
- 2) Efficient : React introduces virtual DOM (Virtual DOM) technology to optimize the update efficiency of the UI interface by maintaining a virtual DOM tree in memory. When the status or attributes change, React will first compare the new virtual DOM tree with the old virtual DOM tree according to the Diff algorithm, and only update the parts that need to be changed, minimizing the interaction with the DOM, thereby improving the UI interface Update efficiency.
- 3) Flexible : React can work well with known libraries or frameworks, and has good compatibility with other technologies (such as Redux, Webpack, Babel, etc.), and can be used with them to build more complete and efficient applications.
- 4) JSX : JSX is an extension of JavaScript syntax.
- 5) Component-based development : Building components through React makes code reuse easier and can be well applied in the development of large projects.
- 6) Responsive design : React updates the UI interface in a responsive way. When the state (State) or property (Props) changes, React will recalculate the changes in the UI interface and apply the changes to the DOM. One-way response data flow is achieved, which reduces duplication of code, which is why it is simpler than traditional data binding.
4. Virtual dom
Traditional dom update:
In the development mode of the traditional page, every time the page needs to be updated, the DOM must be manually operated to update.
Virtual dom :
We know that in front-end development, the DOM operation consumes the most performance, and this part of the code will make the entire project code difficult to maintain. React converts the real DOM tree into a JavaScript object tree (Virtual DOM), minimizing the interaction with DOM, thereby improving the update efficiency of the UI interface
Okay, that’s it for this chapter of React introduction! In the next chapter, let us officially start the React learning journey - use the scaffolding create-react-app to build your first react application !