从零开始学React(1)—

一，React是什么

React只是一个javascript 库，只不过它是facebook公司编写并发布的。

React 起源于 Facebook 的内部项目，因为 FB 对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

React的优点

快速的渲染性能。
跨平台的特性
实现了组件化，便于复用
facebook帮我们做了充分的测试，每天移动端7亿以上的访问量

二,下载React

官网下载请点击，

也可以在我的github上面，下载我的demo进行练习点击

$ git clone https://github.com/wszyf2100/git_demo.git

我介绍使用的几个js文件。

官方下载的react中含有以下几个文件

react.js 是React的核心包，需要先加载。
react-dom.js React中提供与DOM相关功能的包。
react-dom-server.js
react-width-addons.js

在此处，browser.js是将React的JSX语法转换为JS语法的工具包，正常情况下这个包只放在服务器端。因为，我们需要本地调试并开发，所以就加载进来了。

在这里很多人会问JSX是什么?

JSX 使用的是预编译模板，React 提供了一个预编译工具，叫 react-tools，可以通过 npm 命令安装，一般是在开发时期运行，运行后它会启动一个监听程序，实时监听 JSX 源码的修改，然后自动编译为 JS 代码。

三，开始我们React生涯的第一个Hello wolrd

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="div_hello"></div>
<div id="div_hello2"></div>
<script type="text/babel">
	ReactDOM.render(
		<h1>Hello World!</h1>,document.getElementById('div_hello')
	);
</script>
</body>
</html>

$ babel src --out-dir build

上面命令可以将src子目录的js文件进行语法转换，转码后的文件全部放在build子目录。

想要对转码babel了解更多，可以移步babel入门教程

稍微介绍下第一个demo

render是ReactDOM的一个方法，该方法有2个参数React.render(para1,para2),参数1是我们构建的HTML，js等文件，参数2是参数1插入的位置。注:参数1最高的父节点只能有一个

一个html页面中可以有多个ReactDOM.render()方法。

运行结果如下：赶紧去试试吧！

接下来的一章是从零开始学React(2)——React语法 http://my.oschina.net/u/2608629/blog/675744

所有内容取自http://www.ruanyifeng.com/blog/2015/03/react.html，所有内容都是我实践过的，遇到的坑也都会展示给大家。谢谢

从零开始学React(1)——HelloWorld

一，React是什么

二,下载React

在这里很多人会问JSX是什么?

三，开始我们React生涯的第一个Hello wolrd

相关文章