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

发布时间：2020-12-15 03:32:59 所属栏目：百科来源：网络整理

导读：一，React是什么 React只是一个javascript 库，只不过它是facebook公司编写并发布的。 React 起源于 Facebook 的内部项目，因为 FB 对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很

一，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，所有内容都是我实践过的，遇到的坑也都会展示给大家。谢谢

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!