React可以在浏览器运行，也可以在服务器运行，但是在这为了尽量保持简单，且React语法是一致的，服务器的用法和浏览器差别不大，在这只涉及浏览器。
一. HTML模板
使用React的网页源码，结构大致如下：
<!DOCTYPE html> <html > <head> <script type="text/javascript" src="react.min.js"></script> <script type="text/javascript" src="JSXTransformer.js"></script> </head> <body> <div id="example" ></div> <script type="text/jsx"> //Our code goes here! </script> </body> </html>
注意：
1.最后一个script标签的type属性为text/jsx。这是因为React独有的JSX语法，跟JavaScript不兼容。凡是使用JSX的地方，都要加上type=”text/jsx”。
2.React提供两个库：react.js和JSXTransformer.js，它们必须首先加载，其中JSXTransformer.js的作用是将JSX语法转为JavaScript语法。这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
$ jsx src/ build/：这个命令可以将src子目录的js文件进行语法转换，转码后的文件全部放在build子目录。
二. React.render()
React.render是React的最基本方法，用于将模板转为HTML语言，并插入指定的DOM节点。
实例一：
<!DOCTYPE html>
<html >
<head>
<script src="es5-shim.min.js"></script>
<script src="es5-sham.min.js"></script>
<script src="console-polyfill.js"></script>
<script type="text/javascript" src="react.min.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example" ></div>
<script type="text/jsx">
React.render(
<h1>Hello,World</h1>,
document.getElementById("example")
);
</script>
</body>
</html>
运行效果：
三. JSX语法
HTML语言直接写在JavaScript语言之中，不加任何引号，这就是JSX的语法，它允许HTML与JavaScript的混写。
实例二：
<!DOCTYPE html>
<html >
<head>
<script src="es5-shim.min.js"></script>
<script src="es5-sham.min.js"></script>
<script src="console-polyfill.js"></script>
<script type="text/javascript" src="react.min.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example" ></div>
<script type="text/jsx">
var names = ['Alice','Emily','Kate'];
React.render(
<div>
{
names.map(function(name) {
return <div>Hello,{name}!</div>
})
}
</div>,
document.getElementById("example")
);
</script>
</body>
</html>
运行效果：
上面代码体现了JSX的基本语法规则：遇到HTML标签（以<开头），就用HTML规则解析；遇到代码块（以{开头}，就用JavaScript规则解析。
JSX允许直接在模板插入JavaScript变量。如果这个变量是一个数组，则会展开这个数组的所有成员
实例三：
<!DOCTYPE html>
<html >
<head>
<script src="es5-shim.min.js"></script>
<script src="es5-sham.min.js"></script>
<script src="console-polyfill.js"></script>
<script type="text/javascript" src="react.min.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example" ></div>
<script type="text/jsx">
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>
];
React.render(
<div>{arr}</div>,
document.getElementById("example")
);
</script>
</body>
</html>
上面代码的arr变量是一个数组，结果JSX会把它的所有成员，添加到模板，运行结果如下：
四. 组件
React允许将代码封装成组件（component），然后像插入普通HTML标签一样，在网页中插入这个组件。React.createClass方法就用于生成一个组件类。
实例四：
<!DOCTYPE html>
<html >
<head>
<script src="es5-shim.min.js"></script>
<script src="es5-sham.min.js"></script>
<script src="console-polyfill.js"></script>
<script type="text/javascript" src="react.min.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example" ></div>
<script type="text/jsx">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
React.render(
<HelloMessage name="John"/>,
document.getElementById("example")
);
</script>
</body>
</html>
运行效果：
上面代码中，变量HelloMessage就是一个组件类。模板插入<HelloMessage/>时，会自动生成HelloMessage的一个实例（下文的“组件”都指组件类的实例）。所有组件类都必须有自已的render方法，用于输出组件。
组件的用法与原生的HTML标签完全一致，可以任意加入属性，比如<HelloMessage name=”John”/>，就是HelloMessage组件加入一个name属性，值为John。组件的属性可以在组件类的this.props对象上获取，比如name属性就可以通过this.props.name读取。
添加组件属性，有一个地方需要注意，就是class属性需要写成className，for属性需要写成htmlFor，这是因为class和for是JavaScript的保留字。
五. this.props.children
this.props对象的属性与组件的属性一一对应，但是有一个例外，就是this.props.children属性。它表示组件的所有子节点。
实例五：
<!DOCTYPE html>
<html >
<head>
<script src="es5-shim.min.js"></script>
<script src="es5-sham.min.js"></script>
<script src="console-polyfill.js"></script>
<script type="text/javascript" src="react.min.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
var NotesList = React.createClass({
render:function() {
return (
<ol>
{
this.props.children.map(function(child) {
return <li>{child}</li>
})
}
</ol>
);
}
});
React.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
</script>
</body>
</html>
上面代码的NoteList组件有两个span子节点，它们都可以通过this.props.children读取，运行结果如下：
这里需要注意，只有当子节点多于1个时，this.props.children才是一个数组，否则是不能用map方法的，会报错。
六. React.findDOMNode()
组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟DOM(virtual DOM)。只有当它插入文档之后，才会变成真实的DOM。根据React的设计，所有的DOM变动，都先在虚拟DOM上发生，然后再将实际发生变动的部分，反映在真实DOM上，这种算法叫做DOM diff，它可以极大提高网页的性能。
但是，有时需要从组件获取真实DOM的节点，这时就要用到React.findDOMNode方法。
实例六：
<!DOCTYPE html>
<html >
<head>
<script src="es5-shim.min.js"></script>
<script src="es5-sham.min.js"></script>
<script src="console-polyfill.js"></script>
<script type="text/javascript" src="react.min.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example" ></div>
<script type="text/jsx">
var MyComponent = React.createClass({
handleClick: function() {
React.findDOMNode(this.refs.myTextInput).focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput"/>
<input type="button" value="Focus the text input" onClick={this.handleClick}/>
</div>
);
}
});
React.render(
<MyComponent/>,
document.getElementById('example')
);
</script>
</body>
</html>
运行效果：
上面代码中，组件MyComponent的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的DOM节点，虚拟DOM是拿不到用户输入的。为了做到这一点，文本输入框必须有一个ref属性，然后this.refs.[refName]就指向这个虚拟DOM的子节点，最后通过React.findDOMNode方法获取真实DOM的节点。
需要注意的是，由于React.findDOMNode方法获取的是真实DOM，所以必须等到虚拟DOM插入文档以后，才能使用这个方法，否则会返回null。上面代码中，通过为组件指定Click事件的回调函数，确保了只有等到真实DOM发生Click事件之后，才会调用React.findDOMNode方法。
React组件支持很多事件，除了Click事件以外，还有KeyDown、Copy、Scroll等，完整的事件清单请查看官方文档。
七. this.state
组件免不子要与用户互动，React的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染UI，如下实例所示。
实例七：
<!DOCTYPE html>
<html >
<head>
<script src="es5-shim.min.js"></script>
<script src="es5-sham.min.js"></script>
<script src="console-polyfill.js"></script>
<script type="text/javascript" src="react.min.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example" ></div>
<script type="text/jsx">
var LikeButton = React.createClass({
getInitialState: function() {
return {liked:false};
},
handleClick: function(event) {
this.setState({liked:!this.state.liked});
},
render: function() {
var text = this.state.liked?'like':'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this.click to toggle.
</p>
);
}
});
React.render(
<LikeButton/>,
document.getElementById('example')
);
</script>
</body>
</html>
运行效果：
点击上面这行，将会变成如下内容
再次点击，会变回初始内容，即点击内容会交替变换。
上面代码是一个LikeButton组件，它的getInitialState方法用于定义初始状态，也就是一个对象，这个对象可以通过this.state属性读取。当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改以后，自动调用this.render方法，再次渲染组件。
由于this.props和this.state都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props表示那些一旦定义，就不再改变的特性，而this.state是会随着用户互动而产生变化的特性。
八. 表单
用户在表单填入的内容，属于用户跟组件的互动，所以不能用this.props读取。如下实例所示。
实例八：
<!DOCTYPE html>
<html >
<head>
<script src="es5-shim.min.js"></script>
<script src="es5-sham.min.js"></script>
<script src="console-polyfill.js"></script>
<script type="text/javascript" src="react.min.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
var Input = React.createClass({
getInitialState: function() {
return {value:'Hello!'};
},
handleChange: function(event) {
this.setState({value:event.target.value});
},
render: function() {
var value=this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange}/>
<p>{value}</p>
</div>
);
}
});
React.render(
<Input/>,
document.body
);
</script>
</body>
</html>
运行效果：
上面代码中，文本输入框的值，不能用this.props.value读取，而要定义一个onChange事件的回调函数，通过event.target.value读取用户输入的值。textarea元素、select元素、radio元素都属于这种情况，更多介绍请参考官方文档。
九. 组件的生命周期
组件的生命周期分成三个状态：
Mounting：已插入真实DOM
Updating：正在被重新渲染
Unmounting：已移出真实DOM
React为每个状态都提供了两种处理函数，will函数在进入状态之前调用，did函数在进入状态之后调用，三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
这些方法的详细说明，可以参考官方文档。
实例九：
<!DOCTYPE html>
<html >
<head>
<script src="es5-shim.min.js"></script>
<script src="es5-sham.min.js"></script>
<script src="console-polyfill.js"></script>
<script type="text/javascript" src="react.min.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
var Hello = React.createClass({
getInitialState: function() {
return {
opacity: 1.0
};
},
componentDidMount: function() {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function() {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});
React.render(
<Hello name="world"/>,
document.body
);
</script>
</body>
</html>
运行效果：
上面代码在hello组件加载以后，通过componentDidMount方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。
另外，组件的style属性的设置方式也值得注意，不能写成
style=”opacity:{this.state.opacity};”
而要写成
style={{opacity:this.state.opacity}}
这是因为React组件样式是一个对象，所以第一重大括号表示这是JavaScript语法，第二重大括号表示样式对象。
十. Ajax
组件的数据来源，通常是通过Ajax请求从服务器获取，可以使用componentDidMount方法重新渲染UI。
实例十：
<!DOCTYPE html>
<html >
<head>
<script src="es5-shim.min.js"></script>
<script src="es5-sham.min.js"></script>
<script src="console-polyfill.js"></script>
<script type="text/javascript" src="react.min.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<script type="text/jsx">
var UserGist = React.createClass({
getInitialState: function() {
return {
username:'',
lastGistUrl:''
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
if(this.isMounted()) {
this.setState({
username:lastGist.owner.login,
lastGistUrl:lastGist.html_url
});
}
}.bind(this));
},
render: function() {
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});
React.render(
<UserGist source="https://api.github.com/users/octocat/gists"/>,
document.body
);
</script>
</body>
</html>
上面代码使用jQuery完成Ajax请求，这是为了便于说明。React没有任何依赖，完全可以使用其他库。
相关推荐
React 入门实例教程React 入门实例教程React 入门实例教程React 入门实例教程
通过学习和实践这个"react入门实例"，你将具备构建复杂Web应用的基础能力。不断探索React生态系统，如Redux（状态管理）、React Router（路由管理）和React Hooks（函数组件的新特性），将使你在React开发领域...
React入门实例是一个面向初学者的教程，旨在帮助他们快速理解并掌握React的基本概念和实践技巧。React是一个由Facebook开发的JavaScript库，用于构建用户界面，尤其是单页应用程序（SPA）。它以其组件化的方式、虚拟...
这个“ReactNative开发实例带你入门reactnative开发”的资源，显然是一个针对初学者的教程，旨在帮助他们理解并掌握React Native的基本概念、架构以及实际开发流程。 React Native的核心理念是“Learn Once, Write ...
本篇，将记录如何使用React实现一个简版的印象笔记App的入门实例，本实例也比较好实现，但内容相对于上个Demo更加丰富，用到了许多新的知识点，都是非常实用，必须掌握的一些内容,本菜鸟自己实践了一遍，收益非常多...
这份“react教学笔记，从入门到精通”应该会详细解释以上知识点，并通过实例演示如何将它们应用到实际项目中。通过学习这些内容，你将能够熟练掌握React，无论是创建简单的组件还是构建复杂的Web应用。
《React开发实战》初级入门篇是一本旨在帮助新手快速入门React开发的教程，通过实例教学，使得学习过程更加直观易懂。 1. **React基础知识**：React是由Facebook开发的一个JavaScript库，主要用于构建用户界面，...
这个压缩包文件包含了React初级入门学习的各类资源，包括原理图、静态页面、依赖包、课件、其他相关材料以及源码，是初学者系统学习React的基础工具包。 1. **React原理图**： 原理图通常会帮助我们理解React的...
学习React时，通常会使用`create-react-app`脚手架快速创建项目，它集成了必要的构建工具和配置，简化了项目的初始化过程。接下来，开发者会学习如何编写第一个React应用程序，掌握JSX语法，了解Class组件和函数式...
React是目前最流行的JavaScript库之一，...通过这个项目，你可以学习到React的基础知识，以及如何将React与其他生态工具结合，构建完整的前端应用程序。如果你深入研究并实践这些代码，将对提升React开发技能大有裨益。
《React小书（完整版）1》作为一本专门针对React.js编写的入门书籍，其内容安排和知识点的讲解对于初学者来说是非常友好的。本书不仅仅提供了React.js的基础知识，还深入探讨了React.js的高级特性，使得读者能够在...
这个 React 全家桶教程涵盖了 React 的基础知识、React Hooks、React 路由、Redux、React-Redux、Immutable、Mobx、TS、styled-components、单元测试、Redux-saga 等知识点，是一个非常全面的 React 教程。
工程师，都可以学习到 React 的基本思想以及基本用法。在之后慢慢深入的过程中，各节均会不 同程度地带上进阶的实践与分析。希望在本章结束时，我们能够带领你实现应用 React 进行基本 的组件开发。请从这里开始你的...
React基于Virtual DOM实现了一个SyntheticEvent层（合成事件层），定义的事件处理器会接收到一个合成事件对象的实例，它符合W3C标准，且与原生的浏览器事件拥有同样的接口，支持冒泡机制，所有的事件都自动绑定在最...
描述中提到的"简单的react入门实例"表明这是一个适合初学者的项目，旨在快速引导学习者掌握React的基本概念和编程模式。通过实践项目，学习者可以了解如何设置React环境，创建组件，管理状态，处理事件，以及与其他...
text: 'ECharts 入门示例' }, color: ['#3398DB'], tooltip : { trigger: 'axis', axisPointer : { type : 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, ...
通过这个入门教程，你将不仅理解React的基本操作，还能掌握React Hooks的实用技巧，为开发高效且易于维护的React应用打下坚实基础。实践是检验理论的最好方式，所以请务必动手尝试，结合代码示例进行学习，这样才能...
ReactDemos 一个专门用于写React demo的仓库 工具 basicExample **hello-react：**hello react **simple-component：**最简单...一个较为完整的React入门实例 前端才用React构建commentBox组件，后台采用nodejs提供数据
React.js入门实例教程之创建“Hello, World”的5种方式，是学习React基础的重要实践。React作为当前前端开发的热门框架，由Facebook开发并开源，因其独特的设计思想、高效的性能和简洁的代码逻辑受到开发者们的青睐...