第二章 React安装
来源：互联网 发布：codewarrior软件 编辑：程序博客网 时间：2024/06/06 09:32
第二章 React安装
一、下载react的文件
从react官网http://reactjs.cn/react/docs/getting-started.html点击
，
下载所有的react文件和示范，从build文件夹中包含如下
其中react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js
的作用是将 JSX 语法转为 JavaScript 语法., react-dom-server.js是服务端渲染dom的功能，react-with-addons是一些插件功能。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8"/>
<title>Hello React!</title>
<scriptsrc="js/react.min.js"></script>
<scriptsrc="js/react-dom.min.js"></script>
<scriptsrc="js/browser.min.js"></script>
</head>
<body>
<divid="hello"></div>
<scripttype="text/babel">
ReactDOM.render(
<h1>Welcome to React world!</h1>,
document.getElementById('hello')
);
</script>
</body>
</html>
babel是下一代 JavaScript 语法的编译器，是一个JavaScript编译工具，Babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码。browser.js是babel的浏览器版本。源代码<h1>Hello, world!</h1>，这是React的jxs语法，js不认识它，所以要借助babel把它翻译成为js识别的代码。凡是使用 JSX 的地方，都要加上 type="text/babel"，所以要引用browser.js，不然程序无法执行。
如果不想用JSX,则代码修改如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8"/>
<title>Hello React!</title>
<scriptsrc="js/react.min.js"></script>
<scriptsrc="js/react-dom.min.js"></script>
</head>
<body>
<divid="hello"></div>
<scripttype="text/javascript">
ReactDOM.render(
React.createElement("h1",null,"Welcome to ReactWorld!"),
document.getElementById('hello')
);
</script>
</body>
</html>
ReactElement createElement(string/ReactClass type, [object props],[children ...])，它有三个参数，type参数可以是一个html标签名称字符串，也可以是一个ReactClasss。这个type参数对于createElement来说是必须的。第二个参数是该标签的属性，这个参数是可选的。第三个参数是该元素的子节点，同样也是可选的。
二、使用CDN
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8"/>
<title>Hello React!</title>
<scriptsrc="https://unpkg.com/react@15/dist/react.js"></script>
<scriptsrc="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<scriptsrc="https://npmcdn.com/babel-core@5.8.38/browser.min.js">
</script>
</head>
<body>
<divid="hello"></div>
<scripttype="text/babel">
ReactDOM.render(
<h1>Welcome to React world!</h1>,
document.getElementById('hello')
);
</script>
</body>
</html>
还可以使用如下React的CDN地址：
<scriptsrc="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><scriptsrc="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><scriptsrc="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
其中babel还可以从下面的网站获取：
http://www.bootcdn.cn/babel-core/
<script src="//cdn.bootcss.com/babel-core/6.1.19/browser.js"></script>
Babel的官网：
https://babeljs.io/
- 第二章 React安装
- 第二章、React-Native生命周期
- 《React极简教程》第二章 React JSX
- React native学习第二章：State
- react+webpack 第二篇
- React Native 第二天
- 第二章 Linux安装
- 第二章 安装Python
- 第二章-安装Oracle10g
- 第二章 安装maven3
- 第二章 MAD安装
- 第二章 安装JDK
- react 安装
- React安装
- 第二章：typescript与js开发react的区别
- 深入浅出React之第二章：如何设计高质量的react组件
- React Native学习第二天
- 第二章 redis的安装
- 通过oclint自动化codereview生成html文档步骤
- POJ1845Sumdiv（逆元or等比数列求和）
- java接口回调的实用技术
- Spring中ApplicationContextAware的理解
- MongoDB学习笔记001－－常用操作速查笔记
- 第二章 React安装
- 谈一谈程序员写作
- Python中字典创建、遍历、添加等实用操作技巧合集
- springmvc上传文件
- 【语音识别】日语语音识别系统Julius(v4.4)的基于DNN的识别（5月8号：识别结果更新）
- 程序猿必修课之数据结构（八）队列
- C#.net 关键字之base老司机教学
- 创建模式->简单工厂模式-工厂方法模式-抽象工厂模式
- Qt creater5.5.1+win环境下加载vs2010编译的动态库
