React.js Getting Started example tutorial Create Hello World 5 ways _javascript Tips

Introduction of Reactjs

React is a very popular front-end development framework recently. React originated in Facebook's internal project because the company was dissatisfied with all the JavaScript MVC frameworks on the market and decided to write a set of websites to build Instagram. After doing so, found that this set of things very easy to use, in May 2013 open source. Because react's design idea is extremely unique, belongs to the revolutionary innovation, the performance is outstanding, the code logic is very simple. So, more and more people start to pay attention to and use, think it may be the future of WEB development mainstream tools.

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 an excellent programmer working on Facebook to develop a user interaction interface. Its source code is maintained by Facebook and the community's best programmers, so there is a very strong technical team behind it to provide technical support. React brings a lot of new things, such as component, JSX, virtual DOM, and so on. The virtual DOM provided allows us to render the component very quickly, freeing us from the heavy workload of frequent manipulation of DOM. People who understand react know that it does more to focus on the V layer in MVC, and that with other things like flux, you can easily build powerful applications.

Ii. Characteristics of Reactjs

1, Virtual DOM

With the DOM diff algorithm, only the differentiated parts are updated without rendering the entire page, thereby improving efficiency

2, Modular

Divide a page into components that contain logical structures and styles

Components only contain their own logic, which can be predicted when updating components, and facilitates maintenance

A page splits multiple components to make it reusable

3, one-way data flow

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

Data controllable

Third, getting started react writing Hello,world first understand what is JSX

One of the core mechanisms of react is the virtual DOM: a virtual DOM element that can be created in memory. React uses virtual DOM to reduce operations on the actual DOM to improve performance. Similar to the real native DOM, virtual Dom can also be created through JavaScript, for example:

var child1 = react.createelement (' Li ', null, ' a '-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 (' Container5 ')

Using this mechanism, we can build a complete interface dom tree with JavaScript, just as we can create the real DOM with JavaScript. But such code is not readable, so react invented the JSX, using our familiar HTML syntax to create the 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 (' Container6 ')
);

Four, react write Hello,world 5 ways to get Started

1th Way

<div id= "example1" ></div>
<script type= "TEXT/JSX" >
react.render (//Direct HTML
<H1 Classname= "classN1" >1 hellow direct HTML World 

2nd Way

<div id= "example2" ></div>
<script type= "TEXT/JSX" >
react.render (//creating elements
directly React.createelement (' H1 ', {className: ' classN2 '}, ' 2 Hello, directly creating Element world! '), 
document.getElementById (' example2 ')
);

3rd Way

<div id= "Example3" ></div>
<script type= "text/jsx" >
var createel=react.createclass ({
render:function () {
//return 

4th Way

<div id= "Example4" ></div> 
<script type= "text/jsx" >
var jsxcreateel=react.createclass ({/ /Direct JSX way to create
render:function () {return
(
react.createelement (' H1 ', {className: "ClassN4"}, "4 Hello, direct JSX Way to create world! ")
)
}
});
React.render (///component method to create element
react.createelement (Jsxcreateel, null), 
document.getElementById (' example4 ')
);

5th Way

<div id= "Example5" ></div> 
<script type= "text/jsx" >
var hello=react.createclass ({//template Hello 
render:function () {return
(<span>{this.props.data}</span>)
}
});
var world=react.createclass ({//Template World 
render:function () {return
(<span> and World template stitching </span>) c10/>}
});
React.render (////2 template components to create elements



			

Five, the results of the map

Attached code:

<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Untitled document </ 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 (// Direct HTML
<h1 className = "classN1"> 1 hellow directly html world </ h1>,
document.getElementById ('example1')
);
</ script>
<div id = "example2"> </ div>
<script type = "text / jsx">
React.render (// Create elements directly
React.createElement ('h1', {className: 'classN2'}, '2 Hello, create element world!'),
document.getElementById ('example2')
);
</ script>
<div id = "example3"> </ div>
<script type = "text / jsx">
var CreateEl = React.createClass ({
render: function () {
// return <h1> hellow component to create html world </ h1> // with or without parentheses
return (<h1 className = 'classN3'> 3 hellow component create html world </ h1>);
}
});
React.render (// Component way to create elements
<CreateEl />,
// or double brackets <CreateEl> </ CreateEl>
document.getElementById ('example3')
);
</ script>
<div id = "example4"> </ div>
<script type = "text / jsx">
var JsxCreateEl = React.createClass ({// direct jsx way to create
render: function () {
return (
React.createElement ('h1', {className: "classN4"}, "4 Hello, create the world directly in jsx!")
)
}
});
React.render (// Component way to create elements
React.createElement (JsxCreateEl, null),
document.getElementById ('example4')
);
</ script>
<div id = "example5"> </ div>
<script type = "text / jsx">
var Hello = React.createClass ({// template Hello
render: function () {
return (<span> {this.props.data} </ span>)
}
});
var World = React.createClass ({// template world
render: function () {
return (<span> and World template stitching </ span>)
}
});
React.render (// 2 templates to create elements in component mode
<h1 className = "classN5">
<Hello data = '5 hello' />
<World />
</ h1>,
document.getElementById ('example5')
);
</ script>
</ div>
<script src = "build / react.min.js"> </ script>
<script src = "build / JSXTransformer.js"> </ script>
</ body>
</ html> 

Here to add some knowledge:

React terminology

React Elements

A JavaScript object that represents an HTML element. These JavaScript objects are finally compiled into the corresponding HTML element.

Components

Encapsulates react Elements, containing one or more react Elements. Components is used to create reusable UI modules, such as pagination, sidebar navigation, and so on.

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

The Virtual Dom is a JavaScript object that simulates the DOM tree. React uses virtual DOM to render the UI while listening for data changes on the virtual DOM and automatically migrating these changes to the UI.