共计 2045 个字符，预计需要花费 6 分钟才能阅读完成。
“ 小和山的菜鸟们 ”，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 (https://xhs-rookies.com/) 进行学习，及时获取最新文章。
前言
这节咱们将教你如何导入 React 并率领你编写出一个简略的 React 页面。
本文会向你介绍以下内容：
React引入办法- 实现
Hello React Demo
React 引入办法
React 开发必须依赖三个库，别离是：
react：蕴含react外围代码react-dom：帮忙react在各平台渲染的外围代码babel：将JSX转换为React代码的工具
React 的这三个依赖有以下几种办法进行引入：
- 应用
CDN引入，间接应用script标签引入近程的React外围代码库 - 下载
React外围代码库，应用本地导入 - 应用脚手架工具，应用包管理工具进行我的项目搭建
React 从一开始就被设计为逐渐采纳，并且 你能够依据须要选择性地应用 React。对于初学者，咱们不倡议你间接应用 React 脚手架创立我的项目，所以在这篇教程的前几章，咱们将应用 CDN 引入的形式，缩小你对简单操作的纳闷，先学会 React 和 JSX 语法。
实现 Hello React Demo
Demo 性能介绍：界面中有一个按钮和一个文本框，当你第一次点击按钮，文本框会从 hello React 变成 hello xhs-rookies。
第一步：创立一个容器放入 HTML
<div id="app"></div>第二步：导入 React 依赖
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>第三步：编写须要实现的组件
这一步将应用到前面须要学习的 JSX 语法和组件写法，临时你不须要了解这些代码的含意，咱们将很快带你学习。
<script type="text/babel">
class App extends React.Component {constructor() {super();
this.state = {message: 'hello React'}
}
render() {
return (
<div>
<p>{this.state.message}</p>
<button onClick={() => this.setState({message: 'hello xhs-rookies'})}> 点我一下 </button>
</div>
)
}
}
</script>此处的 script 标签肯定要定义 type 为 ”text/babel“，这样 babel 将会解析咱们所写的 JSX 代码。
第四步：将所写的组件挂载到容器上
ReactDOM.render(<App />, document.getElementById('app'))综上，你的代码将变成这样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
class App extends React.Component {constructor() {super()
this.state = {message: 'hello React',}
}
render() {
return (
<div>
<p>{this.state.message}</p>
<button onClick={() => this.setState({ message: 'hello xhs-rookies'})}>
点我一下
</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
</script>
</body>
</html>接下来让咱们来看看成果：
这是点击前的页面
这是点击后的页面
祝贺你曾经实现了一个简略的 React demo 了。
正文完
