第一讲 React环境搭建Hello World
本帖最后由 Sian 于 2017-12-21 14:40 编辑1、开发集成环境Atom，下载地址：http://atom.io/
1.1、安装三个插件(Settings--Packages)：atom-html-preview、autocomplete-paths、open-in-browser
2、React包下载：https://github.com/facebook/react/releases
2.1、React的几个JS文件有：react-dom-server.js、react-dom.js、react-with-addons.js、react.js；
2.2、除此之外，还有一个JSX支持的JS文件，browser.min.js，可以在http://cdnjs.com里搜索下载或直接引用该js链接，这里使用5.0版本；
3、小试牛刀Hello World
3.1、准备好以上这两样东西就可以了，至少安装好Atom了，插件不是必须的，方便后续工作而已，不影响开发；
3.2、编写一个基本的Html文件，在atom中直接输入html再按回车即可生成一段基础的html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
3.3、在title下面加入js的引入
<!-- react.js是react的核心库 -->
<script src="../build/16.2.0/react.development.js" charset="utf-8"></script>
<!-- react-dom.js提供与Dom相关的功能 -->
<script src="../build/16.2.0/react-dom.development.js" charset="utf-8"></script>
<!-- browser.min.js作用是将jsx语法转换成js语法 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script>
3.4、在body里面写一个div标签
<!-- React渲染的模板内容会插入到这个节点容器中 -->
<div id="container">
</div>
3.5、在body后面添加一个script标签，说明在注释中
<!-- 在React开发中使用jsx，与javascript不兼容，在使用jsx的地方设置type为text/babel -->
<!-- babel是转换编译器，可以将ES6转换成可以在浏览器中运行的代码 -->
<script type="text/babel">
// 在此处编写React代码
// 1、渲染一行标题文字：Hello React
/**
* ReactDOM.render();
React的最基本方法，用于将模板转换成Html语言，渲染DOM，并插入到指定的DOM节点中
3个参数
第一个：模板的渲染内容；
第二个：这段模板需要插入的DOM节点
第三个：渲染后的回调，一般不用
*/
ReactDOM.render(
<h1>Hello React</h1>,
document.getElementById("container")
);
/**
* JSX 入门
JSX不是一门语言，只是语法(语法糖)；
*/
// 1、JSX必须借助React环境运行；
// 2、JSX标签其实就是HTML标签，只不过我们可以直接在JavaScripty中书写，不需要引号包含，可以像XML一样书写；
// 3、转换：JSX语法能够让我们更直观地看到组件的DOM结构，不能直接在浏览器上运行，最终会转换成Javascript代码
ReactDOM.render(
React.createElement("h1",null,"Hello React"),
document.getElementById("container")
);
// 4、在JSX中运行Javascript代码，使用{}来引用表达式或变量
var text = "Sian is studing React";
ReactDOM.render(
<h1>{text}</h1>,
document.getElementById("container")
);
// 5、属性、组件等其他
</script>
3.6、参考效果链接：http://www.yusian.com/react/hello
页:
[1]