React.js - bernardopnunes/SoftwareEngineeringSDUW GitHub Wiki

Team Wang

• Liang Yuhua (@monicastu)
• Nie Jiayu (@NYYY0421)
• Li Yang (@kuba-ly)
• Sun Weimiao (@Frost2020)
• Deng Wanli (@dengwanli7)
• Pang Yuntian (@KP71)
• Wang Hongzhe (@dzbwwwhz)
• Cao Zidi (@Sean-9)
• Chen Yiming (@schalker-cn)
• Sun Yuze (@Fury1004)

• Overview
• Development History
• Design philosophy and principle
• Components Assembly
• Characteristic and Application Scenario
• Advantages and Disadvantages
• Simple Example
• Usage Experience
• Reference

React.js (also known as React) is a JavaScript library for building user interfaces. It is an open source JavaScript framework that aims to create compelling and rich Web applications that can run efficiently with minimal coding. React.js focuses on the functionality of individual components, and developers find their newly developed web pages render faster. In addition to having the flexibility to cover extensive usage test exceptions, it also has a large tutorial base and a large developer community that can provide solutions for new developers as well as experienced developers.

Over the past few years, react.js has become one of the most popular tools for building Web applications. The main reason React is popular is that it doesn't require any extra effort or developer rework. With the flexibility and robustness it provides, developers can build complex modules faster and more easily and reuse as much code as possible in other modules, ensuring that faster applications can be easily rendered in different browsers with very little load time. This makes it a perfect choice for developers who are passionate about cross-browser compatibility.

The emergence of Reactjs dramatically expands the opportunity for front-end engineers to create user optimized interfaces.

In 2011, Facebook engineers began to face problems with code maintenance.

As Facebook Ads introduced a significant number of features, the team needed more members to keep the features running smoothly.

The rapid growth of team members and application features slowed their work.

As products continue to update and iterate, their applications become increasingly difficult to use.

Before long, fb engineers were unable to keep up with the pace of product updates, and their code was in urgent need of an upgrade to improve efficiency.

They chose the right model, but still needed to consider the user experience.

So Jordan Walke created a prototype,

It helped to improve overall efficiency and marked the birth of reactjs.

2010 - Initial signs of react

• FB introduced XHP into PHP code, open source the same year.

Xhp allows the creation of composite components that are later introduced into react.

2011 - early prototypes

• Jordan Walke created an early prototype of FaxJs, react, and supported a set of FB search components.

2012 - new changes in fb

• FB AD management becomes more difficult.FB needs to find a better solution.Jordan Walke created react based on a prototype.

• FB acquired Instagram on April 9.Instagram wants to use FB's new technology.Based on this, FB is under pressure to consider decoupling and open React.

Much of this was done by Pete Hunt.

• Sept. 8 at the TechCrunch Disrupt San Francisco conference, mark zuckerberg said that our biggest mistake was betting too much on HTML5.

He promises FB will provide a much better mobile experience.

2013 - year of release

• May 29, solstice, 31: JSCONF US summit, Jordan Walke introduces React, React is open source.

What's interesting: the audience is skeptical.Most of the early frame users who attended the conference thought React was a big step backwards.But React is positioned as an innovator.

React's creators realized their mistake in time and decided to follow up on the React publicity tour, turning them from skeptical to supportive.

• June 2: React accesses JSFiddle

• July 30: React and JSX access the Ruby On Rails framework

• August 19: React and JSX access Python applications

• September 14, solstice, 15: JSCONF EU conference, Pete Hunt launches' rethinking best practices' keynote speech

• December 17: David Nolen introduces the React based OM framework, which explains the advanced features of React and gets an early audience.It explains how React is superior to other options to further increase awareness of React.

2014 - year of expansion

React is gaining a reputation as an early adopter among potential users.At this point, the FB team needs to communicate how React is stable, rather than simply relying on its technical advantages.

With that in mind, they're turning to businesses like Netflix.

• early 2014: reactjsworldtour launches, creates community, and begins to turn skeptics into supporters.

• January 2: React Developer Tool becomes a plugin for Google Developer tools.

• February: 21st century geek editor - Atom launched

• April 7, solstice, 9: React London 2014 conference

• June: ReactiveX. IO launched

• July 13: the React hot loader, a plug-in that can hot-load the React component without losing state data, was released.

• December 12: PlanOut, a language for online experiments.

The 0.5 release includes a Planout language editor based on the React implementation, introducing a compiler with the full features used internally by FB.

2015 - toward stability

• early 2015: Flipboard releases the React Canvas

• January: Netflix says it likes React

• early 2015: Airbnb starts using React

• January 28, solstice, 29: Reactjs Conf 2015, FB released the first version of React Native in a technical presentation.

• February: release Relay and GraphQL

• March 25: FB announces RN IOS open source and Github.

• June 2: Dan Abramov and Andrew Clark launch Redux

• September 2: the first stable version of React Developer Tools is released.

• September 14: RN Android launches

2016 - leading the mainstream

• march: Mobx launch

• February 22, solstice, 23: Reactjs 2016 conference in San Francisco, Isaac salier-hellendag introduces draft.js

• march: React Storybook released

• June 2nd solstice 3rd: React Europe conference

• July 11: the React error code system is released

• November: React UI toolset Blueprint

2017 - year of improvement

• early 2017: Airbnb releases an open-source library called React Sketch. App

• April 19: F8 2017 React Fiber open source

• September: React, Jest, Flow, and Immutable. Js to change the license

• September 26: React 16 released: error boundaries, portals, fragments and Fiber framework

• October: Netflix removes client Reactjs

• November 28: React v16.2 was released to provide Fragment optimization improvements

2018 - present situation

• March 1-2: Dan Abramov speaks beyond React 16 at the ReactCONF Iceland conference

• March 29: React 16.3.0 is released

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

In Web development, we always need to reflect the changing data to the UI in real time, so we need to manipulate the DOM.Complex or frequent DOM manipulation is often the cause of performance bottlenecks (how to perform high performance complex DOM manipulation is often an important indicator of a front-end developer's skills).React does this by introducing a Virtual DOM mechanism: a set of DOM apis implemented in Javascript on the browser side.

When developing based on React, all DOM construction is done through virtual DOM. Whenever the data changes, React will rebuild the entire DOM tree. Then React compares the current entire DOM tree with the previous DOM tree to get the difference of DOM structure, and then only the parts that need to change will be updated with the actual browser DOM.

Virtual DOM not only brings the simple UI development logic, but also brings the idea of componentized development. The so-called components are the encapsulated UI parts with independent functions. By creating components that have their own states, which then make up a more complex UI.

The component logic is written in JavaScript rather than templates, so you can easily pass data through your application and keep the state separate from the DOM.

Components are the building blocks of React applications. It’s almost impossible to build a React application and not make use of components. It’s widespread to the point that some third-party packages provide you with components you can use to integrate functionality into your application.

These third-party components tend to be reusable. The difference between them and components you probably have in your application has to do with specificity.

There are two things you can do:

1. You can produce polos that already have a design on them
2. You can have the buyer choose the design they want.

Some fundamental things will be consistent, like all polos should be short-sleeved. But the user can pick variations of the shirts, such as the color and size. A short-sleeve polo would make a good React component in that case: it’s the same item with different variations.

The component accepts certain props, such as the attributes that we need to make the input with valid markup, including the placeholder, value and name. We set up the input element in the render function, setting the attribute values as the props that are passed to the component. We even bind the input to a label to ensure they’re always together. You can see that we’re not making assumptions by predefining anything. The idea is to ensure that the component can be used in as many scenarios as possible.

• Easy to learn. Declarative and intuitive coding. React claims to enable new people to develop new features on the first day of use. A simple coding method will enable the novice to start quickly and reduce the cost of code maintenance. This feature determines that react can quickly arouse the interest of developers and spread widely.

• Stable performance. Because of the independence of components, it is much more convenient to test components.

• The ability of reuse and expansion is strong. React builds the UI in a componentized way, not a common template. Component is not a new concept. It is the encapsulation of an independent function or interface to achieve reuse or loose coupling between UI and business. Very suitable for large front-end projects

• The API is small and easy to maintain. The logic and UI related to components are encapsulated in the components, which is convenient for maintenance

• Open source framework, continuous improvement of developers. Components that continue to render repeatedly support increasing complexity

• When it interacts with the background, users and DOM frequently,go with React. The main feature of react is virtual DOM technology, which can improve the performance of rendering. Personal experience is that using react can speed up the whole page a lot.

• When it is necessary to separate front and back ends and build large projects, go with React. React makes the front-end page component (such as form form), improves code reuse, simplifies development, and is suitable for large-scale projects.

• When there are many server-side rendering requests,go with React. For example, if the server wants to sort, it needs to render three times and return three results. After using react, it only needs a packaged JS file to provide raw data once. After that, users can view the list according to different views on the browser side at will. All sorting is done by the JS engine. With the help of react, it is very easy to operate interface elements.

• If you want a library that is adaptable for both web nd native apps, go with React.It brings all kinds of elements that developers can't find in the web development framework for many years.

• Declarative design - React adopts declarative paradigm, which can easily describe applications. React makes it easy to create an interactive UI. Design a simple view for each state of your application. When the data changes, React can effectively update and correctly render components. Writing the UI in a declarative way can make your code more reliable and easy to debug.

• Efficient − (virtual DOM) React can minimize the interaction with DOM by simulating dom.

• Flexible − React can work well with known libraries or frameworks.

• JSX − JSX is an extension of JavaScript syntax. React uses JSX instead of regular JavaScript. JSX is a JavaScript syntax extension that looks like XML. JSX executes faster because it is optimized after compiling into JavaScript code. It is type safe, and errors can be found during compilation. Using JSX to write templates is simpler and faster.

• Components - build components through React, making the code easier to be reused, which can be well applied in the development of large projects. Create components with their own states, and then make a more complex UI from these components. Component logic is written in JavaScript rather than templates, so you can easily pass data through your application and separate the state from the dom.

• The data flow of one-way response − React realizes the data flow of one-way response, thus reducing duplicate code, which is why it is simpler than traditional data binding.

• Learn once, write anywhere - no matter what technology stack you are using now, you can always introduce React to develop new features without rewriting existing code. React can also use node for server rendering, or use React native to develop native mobile applications.

As react.js becomes a popular type of Java framework, its shortage comes into being. First of all, eact is a UI component, which can be used in combination with other frameworks. As a consequence, it is not suitable for a complete framework or front-end development at present. Second, there is just a small amount of third-party components designed for react, which is obviously fewer than other java framework like angular. Moreover, react is a little bit complex and requires deep knowledge, because you have to learn HTML and CSS before using it. last, react is still evolving and not widely used in large project development. The most famous development made by react is Yahoo Email. So there will be a lot of errors and problems that developers never meet.

The smallest React example looks like this. The following example outputs Hello, world! :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
</script>

</body>
</html>

It displays a heading saying “Hello, world!” on the page.

In the example, we introduced three libraries: react.min.js, react-dom.min.js and babel.min.js:

• react.min.js - React's core library
• react-dom.min.js - provides DOM related functions
• babel.min.js - Babel can convert ES6 code to ES5 code, so that we can execute React code on browsers

that do not currently support ES6. Babel has built-in support for JSX. By using Babel and the babel-sublime package together, the syntax rendering of the source code can be taken to a whole new level.

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

The element is the smallest unit that constitutes a React application. It is used to describe what is output on the screen. Unlike the DOM element of the browser, the elements in React are actually ordinary objects. React DOM can ensure that the data content of the browser DOM is consistent with the React element.

React elements are immutable. After an element is created, you cannot change its content or attributes.

Currently the only way to update the interface is to create a new element and then pass it to the ReactDOM.render () method:

Take a look at this timer example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
function tick() {
  const element = (
    <div>
      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);
</script>

</body>
</html>

Now we can see a constantly changing time on the browser page：

##Usage Experience

• l React is more suitable for experienced teams, because react is not a complete framework but has a huge ecological environment. If you and your team are sophisticated enough, you can build a framework suitable for your own project as you like, which is very flexible, and the application built is also highly compatible with the current project.

• l Recently, I wrote a table component, which feels that react is a black box of data from the outside, which shows that each component has its own self maintenance. One of the biggest characteristics of this framework is that you want to write more and write less. You need to be able to analyze the data transmission and state change between each component, with clear thinking, which is very conducive to later maintenance

• l Almost all front-end teams, such as Ali, qunaer, ele.me. All of them are actively providing large and complete components for everyone. However, in practical applications, only those components with simple functions will not be refactored. Once the API of components is improved, the coverage is still limited. Therefore, no matter the react or MVVM framework, it will save some time when using the open source components of large companies, but as long as the business logic is slightly complex, many components cannot be used.If there's a chance to develop a single page application (SPA), I'll try Vue.

• l Reactjs is an interesting and expressive JavaScript library, which has its applicable scenarios, many precautions and errors. Generally speaking, learning it won't make people regret

1. En.wikipedia.org. 2020. React (Web Framework). [online] Available at: https://en.wikipedia.org/wiki/React_(web_framework) [Accessed 21 May 2020].

2. Baijiahao.baidu.com. 2020. React.Js会在2019年继续占据主导地位吗？. [online] Available at: https://baijiahao.baidu.com/s?id=1623170597316218984&wfr=spider&for=pc [Accessed 21 May 2020].

3. Blog.csdn.net. 2020. React工作原理_Javascript_浅夏晴空的博客-CSDN博客. [online] Available at: https://blog.csdn.net/gongch0604/article/details/80166433 [Accessed 21 May 2020].

4. 简书. 2020. Reactjs历史时间轴一览. [online] Available at: https://www.jianshu.com/p/ad533d71f79e [Accessed 21 May 2020].

5. React.docschina.org. 2020. React – 用于构建用户界面的 Javascript 库. [online] Available at: https://react.docschina.org/ [Accessed 21 May 2020].

6. En.wikipedia.org. 2020. React (Web Framework). [online] Available at: https://en.wikipedia.org/wiki/React_(web_framework) [Accessed 21 May 2020].

7. CSS-Tricks. 2020. Advanced Tooling For Web Components | CSS-Tricks. [online] Available at: https://css-tricks.com/advanced-tooling-for-web-components/ [Accessed 21 May 2020].

8. Cnblogs.com. 2020. 目前js比较流行的js框架 - 程序猿- - 博客园. [online] Available at: https://www.cnblogs.com/zx0303/p/js-liuxingkuangjia.html [Accessed 21 May 2020].

9. Segmentfault.com. 2020. Javascript - React适用于哪些应用场景 - Segmentfault 思否. [online] Available at: https://segmentfault.com/q/1010000003854305 [Accessed 21 May 2020].

10. [online] Available at: https://medium.com/js-dojo/react-or-vue-which-javascript-ui-library-should-you-be-using-543a383608d%23.dgeudmjmb [Accessed 21 May 2020].

11. React.docschina.org. 2020. 入门教程: 认识 React – React. [online] Available at: https://react.docschina.org/tutorial/tutorial.html [Accessed 21 May 2020].

12. [online] Available at: https://www.zybuluo.com/zhongjianxin/note/832918 [Accessed 21 May 2020].

13. Reactjs.org. 2020. Hello World – React. [online] Available at: https://reactjs.org/docs/hello-world.html [Accessed 21 May 2020].

14. Runoob.com. 2020. React 安装 | 菜鸟教程. [online] Available at: https://www.runoob.com/react/react-install.html [Accessed 21 May 2020].

15. Runoob.com. 2020. React 元素渲染 | 菜鸟教程. [online] Available at: https://www.runoob.com/react/react-rendering-elements.html [Accessed 21 May 2020].

16. [online] Available at: https://www.cnblogs.com/sunyangkai123/p/10840390.html [Accessed 21 May 2020].

17. React 中文. 2020. Reactjs学习体验. [online] Available at: http://react-china.org/t/reactjs/943 [Accessed 21 May 2020].