共计 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
了。
正文完