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

时间 2019-11-17

原文原文链接

一，React是什么

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

React 起源于 Facebook 的内部项目，由于 FB 对市场上全部 JavaScript MVC 框架，都不满意，就决定本身写一套，用来架设 Instagram 的网站。作出来之后，发现这套东西很好用，就在2013年5月开源了。html

因为 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却很是简单。因此，愈来愈多的人开始关注和使用，认为它多是未来 Web 开发的主流工具。java

React的优势react

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

二,下载React

官网下载请点击，git

也能够在个人github上面，下载个人demo进行练习点击github

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

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

官方下载的react中含有如下几个文件服务器

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

在此处，Browser.js是将React的JSX语法转换为JS语法的工具包，正常状况下这个包只放在服务器端。由于，咱们须要本地调试并开发，因此就加载进来了。babel

在这里不少人会问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，全部内容都是我实践过的，遇到的坑也都会展现给你们。谢谢