How to Create helloworld in React. js getting started instance tutorial _ javascript skills

React is a very popular front-end development framework recently. It is widely used. Next, I will introduce five ways to create helloworld through React. js getting started examples. 1. ReactJS Overview

React is a very popular front-end development framework recently. React originated from Facebook's internal project. Because the company was dissatisfied with all the JavaScript MVC frameworks on the market, it decided to write a set of websites for setting up Instagram. After it was made, it was found that this set of things was very useful, and it was open-source in May 2013. Because React's design philosophy is extremely unique, it is a revolutionary innovation with outstanding performance, but the code logic is very simple. Therefore, more and more people are paying attention to and using it, and think it may be a mainstream tool for Web development in the future.

ReactJS official website address: http://facebook.github.io/react/

Github address: https://github.com/facebook/react

ReactJS Chinese address: http://reactjs.cn/react/docs/getting-started.html

What is React?

React is a JS library developed by excellent Facebook programmers to develop user interaction interfaces. Its source code is maintained by Facebook and excellent programmers in the community, so there is a very powerful technical team behind it to provide technical support. React brings a lot of new things, such as componentization, JSX, and virtual DOM. Its Virtual DOM allows us to render components very quickly and free us from the heavy work of frequently operating DOM. Anyone familiar with React knows that it is more focused on the V layer in MVC, and you can easily build powerful applications with other features such as Flux.

Ii. ReactJS features

1. Virtual DOM

By using the DOM diff algorithm, only differentiated parts are updated without rendering the entire page, thus improving efficiency.

2. componentization

Divide the page into several components, which contain the logical structure and style

The component only contains its own logic. It can be predicted when updating the component, facilitating maintenance.

Split pages into multiple components for Reuse

3. unidirectional data streams

Data is transmitted from the top-level component to the child component.

Controllable data

3. Get started with React writing Hello, world first understand what JSX is

One of the core mechanisms of React is virtual DOM: Virtual DOM elements that can be created in memory. React uses virtual DOM to reduce actual DOM operations and thus improve performance. Similar to the real native DOM, virtual DOM can also be created through JavaScript, for example:

var child1 = React.createElement('li', null, 'First Text Content');var child2 = React.createElement('li', null, 'Second Text Content');var root2 = React.createElement('ul', { className: 'my-list' }, child1, child2);React.render(
{root2}
,document.getElementById('container5')); 

Using this mechanism, we can use JavaScript to build a complete DOM tree, just as we can use JavaScript to create a real DOM. But the code is not readable, So React invented JSX and used the HTML syntax we are familiar with to create virtual DOM:

var root =(
 
 

  
  
First Text Content
  
  
Second Text Content
 
 
);React.render(
{root}
,document.getElementById('container6'));

4. Five methods for writing Hello and world in React

1st Methods