React React
React front-end development primer and practice
(This course focuses on basic techniques and practical examples of React.)
React is a JavaScript library that Facebook and Instagram use to create user interfaces. A lot of people think of React as the V view of MVC.
We created React to solve a problem: building large-scale applications with data that changes over time. To achieve this, React uses two main ideas.
simple
Just express what your app should look like at any point in time, and React handles all user interface updates automatically when the underlying data changes.
Declarative (Declarative)
After the data changes, React is conceptually similar to hitting the “refresh” button, but only updates the changed parts.
Build composable components
React is all about building reusable components. In fact, the only thing you have to do with React is build components. Thanks to their encapsulation, components make it easier to reuse code, test, and separate of concerns.
Give it five minutes
React challenges a lot of conventional wisdom, many of which may seem a little crazy at first glance. As you read this guide, give it five minutes; Those crazy ideas have helped Facebook and Instagram create thousands of components from the inside out.
Background:
In the early days of Web application development, the only way to build a Web application was to send a request to the server, and the server would respond to the request and return a complete page. From a development perspective, this approach is very simple because developers don’t have to care about what happens on the browser side.
Languages like PHP make this even easier. It is also easy to develop functional components in PHP, which helps developers reuse code and master the behavior of their applications. The simplicity of development has made PHP a very popular Language for developing Web applications.
However, it’s hard to create a great user experience with this approach. Because every time a user wants to do something, they need to send a request to the server and wait for a response from the server, the user loses the state accumulated on the page.
In order to achieve a better user experience, people began to develop libraries to use JavaScript to render applications on the browser side. The methods used by these libraries vary from simple ones that use templates with parameters to complex ones that master the entire application. As developers use these libraries in larger and larger applications, the applications become harder to grasp because they are the result of a series of interacting events. Compared to traditional application development methods like PHP, this kind of client application is difficult to do well.
React originated as an offshoot of Facebook’s PHP framework XHP. XHP is a PHP framework designed to render the entire page every time a request comes in. React was created to bring this PHP-style workflow of rerendering entire pages to client applications.
React is essentially about two things:
1. Update DOM;
2. Respond to events.
React does not deal with Ajax, routing, or data storage, nor does it dictate how data is organized. It’s not a Model-View-Controller framework. If you have to ask what it is, it’s “V” in MVC. React’s simplicity allows you to integrate it into a wide variety of systems.
Rerendering the entire page in JavaScript is very slow every time the state changes, which should be attributed to performance issues reading and updating the DOM. React implements a very powerful rendering system using a virtual DOM, where the DOM is only updated and not read.
Working status:
React is based on rendering functions. These functions read in the current state and transform it into a virtual representation on the target page. Whenever React is notified of a state change, it rerunks these functions, calculates a new virtual representation of the page, and automatically converts the result into the necessary DOM updates to reflect the new representation.
This approach might seem slower than the usual JavaScript solution of updating every element as needed, but React does exactly that: It uses a very efficient algorithm that calculates the differences between the current and new versions of the virtual page and updates the DOM as little as necessary based on those differences. React wins by minimizing redrawing and avoiding unnecessary DOM manipulation, both recognized performance bottlenecks.
The syllabus
Brief introduction:
React is a JavaScript library for building user interfaces, mainly for building UIs. React is considered by many to be the V (view) of MVC. React grew out of an internal Facebook project to build the Instagram site and opened source in May 2013. Because React has high performance and very simple code logic, more and more developers are using it.
Introduction to the lecturer:
He Yiming, also known as Cheng Yu, joined Taobao after graduating with a master’s degree in 2010. During this period, HE was responsible for the development and maintenance of front-end framework KISSY and some basic class libraries. At the end of 2014, he transferred to ant Financial Terminal Technology team to build a new front-end architecture based on React: It includes ANTD for middle and background, ANTD-Mobile for wireless business, application architecture ROOF/DVA, construction tool Atool – Build, etc. Currently, I am working with my team members to maintain and optimize the existing architecture and develop alipay applets that serve a wider range of developers.
Class Schedule:
React Introduction 01:28
课时 2:2. What is React
课时 3:3. Why do you use react 03:54
Lesson 4: React Basics — JSX 07:03
Lesson 5: React Basics — Events and Combinations 06:33
Lesson 6:6.React basics — property states 04:07
Lesson 7:7.React Basics — Mixin and Forms 07:10
Lesson 8: React Basics — Ref and API 11:55
Class 9:9. Build react-application step by step
Lesson 10: Use React to build complex pages 05:19
Course objectives
Master front-end framework React development technology
Suits the crowd
Front-end developer
Official website of Ali Yun University (Official website of Ali Yun University, Innovative Talent Workshop under cloud Ecology)