第二章 React安装

最新推荐文章于 2025-10-29 08:55:04 发布

原创最新推荐文章于 2025-10-29 08:55:04 发布 · 414 阅读

1 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

9 篇文章

订阅专栏

本章节介绍如何安装React。你可以通过下载React文件或使用CDN来引入React库。在HTML中，你需要引用react.js、react-dom.js以及转换JSX的browser.min.js。JSX是React中用于创建组件的语法，如果不使用JSX，可以使用React的createElement函数。此外，还提供了使用不同CDN链接引入React和Babel的方法。

第二章 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是一些插件功能。

<!DOCTYPE html>

<html>

<head>

<title>Hello React!</title>

</head>

<body>

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,则代码修改如下：

<!DOCTYPE html>

<html>

<head>

<title>Hello React!</title>

</head>

<body>

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

<!DOCTYPE html>

<html>

<head>

<title>Hello React!</title>