React.js introductory example tutorial: 5 ways to create hello world

1. Introduction to ReactJS

React is a very popular front-end development framework recently. React originated as an internal project at Facebook. Because the company was dissatisfied with all the JavaScript MVC frameworks on the market, it decided to write its own to build the Instagram website. After making it, I found that this set of things is very useful, so it was open sourced in May 2013. Because React's design idea is extremely unique, it is a revolutionary innovation, has outstanding performance, and the code logic is very simple. Therefore, more and more people are beginning to pay attention to and use it, thinking that it may be the 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 outstanding programmers working at Facebook for developing user interaction interfaces. Its source code is maintained by outstanding programmers from Facebook and the community, so there is a very strong technical team behind it to provide technical support. React brings many new things, such as componentization, JSX, virtual DOM, etc. The virtual DOM it provides allows us to render components very quickly, freeing us from the heavy work of frequently manipulating the DOM. Anyone who knows React knows that the work it does is more focused on the V layer in MVC. Combined with others such as Flux, you can easily build powerful applications.

2. Features of ReactJS

1. Virtual DOM

Through the DOM diff algorithm, only the differentiated parts will be updated. No need to Render the entire page to improve efficiency

2. Componentization

Divide the page into several components, which contain logical structures and styles

The component only contains its own logic, and it can be predicted when updating the component, which is conducive to maintenance

The page is split into multiple components and can be reused

3, one-way Data flow

Data is passed from the top-level component to the sub-component

Data is controllable

3. Getting started with React writing Hello, world First, let’s 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 operations on the actual DOM and 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(
<div>{root2}</div>,
document.getElementById(&#39;container5&#39;)
);

Using such a mechanism, we can use JavaScript to build a complete interface DOM tree, just as we can use JavaScript to create a real DOM . But the readability of such code is not good, so React invented JSX, using our familiar HTML syntax to create a virtual DOM:

var root =(
<ul className="my-list">
<li>First Text Content</li>
<li>Second Text Content</li>
</ul>
);
React.render(
<div>{root}</div>,
document.getElementById(&#39;container6&#39;)
);

4. 5 ways to get started with writing Hello, world in React

The 1st way

<div id="example1"></div>
<script type="text/jsx">
React.render( //直接html
<h1 className="classN1" >1 hellow 直接 html world </h1>,
document.getElementById(&#39;example1&#39;)
);
</script>

The 2nd way

<div id="example2"></div>
<script type="text/jsx">
React.render( //直接创建元素
React.createElement(&#39;h1&#39;, {className:&#39;classN2&#39;}, &#39;2 Hello, 直接创建元素 world!&#39;),
document.getElementById(&#39;example2&#39;)
);
</script>

The 3rd way

<div id="example3"></div>
<script type="text/jsx">
var CreateEl=React.createClass({
render:function(){
// return <h1>hellow 组件 创建 html world </h1> //有无括号均可
return (<h1 className=&#39;classN3&#39; >3 hellow 组件 创建 html world </h1>);
}
});
React.render( //组件方式创建元素
<CreateEl/>,
//或者双括号 <CreateEl></CreateEl>
document.getElementById(&#39;example3&#39;)
);
</script>

The 4th way

<div id="example4"></div>
<script type="text/jsx">
var JsxCreateEl=React.createClass({ // 直接 jsx 方式 创建
render:function(){
return (
React.createElement(&#39;h1&#39;, {className: "classN4"},"4 Hello, 直接 jsx 方式 创建 world! ")
)
}
});
React.render( //组件方式创建元素
React.createElement(JsxCreateEl, null),
document.getElementById(&#39;example4&#39;)
);
</script>

The 5th way Method

<div id="example5"></div>
<script type="text/jsx">
var Hello=React.createClass({ // 模板 Hello
render:function(){
return (<span>{this.props.data}</span>)
}
});
var World=React.createClass({ // 模板 world
render:function(){
return (<span> 和 World 模板拼接</span>)
}
});
React.render( // 2个 模板 组件方式创建元素
<h1 className="classN5" >
<Hello data=&#39;5 hello&#39; />
<World />
</h1>,
document.getElementById(&#39;example5&#39;)
);
</script>

5. The above result picture

Attach the code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
</head>
<body>
<style>
*{ margin:0; padding:0;}
body{ background:#333;}
#box{ background:url(loveImg/QioA-fxehfqi8208393.jpg) no-repeat center top; width:550px; border:8px solid #fff; -webkit-box-sizing:border-box; margin:50px auto;}
#example1,#example2,#example3,#example4,#example5{ margin:20px auto; width:100%; background:rgba(255,255,255,.3); padding:5px 10px; font-size:13px; color:#f1f1f1;-webkit-box-sizing:border-box; }
</style>
<div id="box">
<div id="example1"></div>
<script type="text/jsx">
React.render( //直接html
<h1 className="classN1" >1 hellow 直接 html world </h1>, 
document.getElementById(&#39;example1&#39;)
);
</script>
<div id="example2"></div>
<script type="text/jsx">
React.render( //直接创建元素
React.createElement(&#39;h1&#39;, {className:&#39;classN2&#39;}, &#39;2 Hello, 直接创建元素 world!&#39;), 
document.getElementById(&#39;example2&#39;)
);
</script>
<div id="example3"></div>
<script type="text/jsx">
var CreateEl=React.createClass({
render:function(){
// return <h1>hellow 组件 创建 html world </h1> //有无括号均可 
return (<h1 className=&#39;classN3&#39; >3 hellow 组件 创建 html world </h1>);
}
});
React.render( //组件方式创建元素
<CreateEl/>, 
//或者双括号 <CreateEl></CreateEl>
document.getElementById(&#39;example3&#39;)
);
</script>
<div id="example4"></div> 
<script type="text/jsx">
var JsxCreateEl=React.createClass({ // 直接 jsx 方式 创建
render:function(){
return (
React.createElement(&#39;h1&#39;, {className: "classN4"},"4 Hello, 直接 jsx 方式 创建 world! ")
)
}
});
React.render( //组件方式创建元素
React.createElement(JsxCreateEl, null), 
document.getElementById(&#39;example4&#39;)
);
</script>
<div id="example5"></div> 
<script type="text/jsx">
var Hello=React.createClass({ // 模板 Hello 
render:function(){
return (<span>{this.props.data}</span>)
}
});
var World=React.createClass({ // 模板 world 
render:function(){
return (<span> 和 World 模板拼接</span>)
}
});
React.render( // 2个 模板 组件方式创建元素
<h1 className="classN5" >
<Hello data=&#39;5 hello&#39; />
<World />
</h1>, 
document.getElementById(&#39;example5&#39;)
);
</script>
</div>
<script src="build/react.min.js"></script>
<script src="build/JSXTransformer.js"></script>
</body>
</html>

Let me add some knowledge to you:

React terminology

React Elements

Represents the JavaScript object of HTML elements. These JavaScript objects are finally compiled into corresponding HTML elements.

Components

Encapsulates React Elements and contains one or more React Elements. Components are used to create reusable UI modules, such as paging, sidebar navigation, etc.

JSX

JSX is a JavaScript syntax extension defined by React, similar to XML. JSX is optional, we can use JavaScript to write React applications, but JSX provides a simpler way to write React applications.

Virtual DOM

Virtual DOM is a JavaScript object that simulates a DOM tree. React uses Virtual DOM to render the UI, while monitoring data changes on the Virtual DOM and automatically migrating these changes to the UI.

For more React.js introductory example tutorials: 5 ways to create hello world and related articles, please pay attention to the PHP Chinese website!