React教程(一)
React:
官网:进入官网后,最先引入眼帘的是这样一段描述:“用于构建用户界面的 JavaScript 库”,非常的霸气侧漏,这也是我决定学习它的原因。
特点: 声明式(交互容易)、组件化(大型项目)、一次学习,随处编写(支持手机、浏览器等)
使用CDN的方式
- demo1: 最简单的Hello World
123456789101112131415161718192021222324
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<title>React Dome</title>
<!-- CDN方式引入 -->
<script crossorigin src=
"https://unpkg.com/react@16/umd/react.development.js"
></script>
<script crossorigin src=
"https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js,可以引用 -->
</head>
<body>
<div id=
"app"
>
</div>
<script type=
"text/babel"
>
// 生成一个DOM,如果生成的dom过多时会使用虚拟dom来插入到真实的DOM中
var
hello = React.createElement(
'h1'
,{
className:
'red'
,
// 添加属性
name:
'jack'
},
"Hello React!"
)
ReactDOM.render(hello,document.getElementById(
'app'
))
</script>
</body>
</html>
- demo2: jsx,一种js和html+xml交互的方式
1234567891011121314151617181920212223242526272829303132333435363738
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<title>React Dome</title>
<!-- CDN方式引入 -->
<script crossorigin src=
"https://unpkg.com/react@16/umd/react.development.js"
></script>
<script crossorigin src=
"https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js,可以引用 -->
<!-- 引入babel可以进行jsx的语法解析 -->
<script src=
"https://unpkg.com/babel-standalone@6/babel.min.js"
></script>
<style>
.blue{
color:blue;
}
</style>
</head>
<body>
<div id=
"app"
></div>
<div id=
"app1"
></div>
<script type=
"text/babel"
>
// js中插入html代码,其实框架中帮我们创建
ReactDOM.render(
// jsx是完成我们可以在js中完成html代码的编写,同时可以html中可以嵌套js代码,属于语法糖
<h1 className=
"blue"
name=
"wang"
>Hello Jsx</h1>
// 注意这里不能是class因为它是js的关键字
,document.getElementById(
'app'
))
// 使用js中嵌套html
var
name =
"wangl"
var
ele = <h1>Hello : {name}</h1>
// html中插入js变量
ReactDOM.render(
ele,
document.getElementById(
'app1'
)
)
</script>
</body>
</html>
- demo3: 生命周期
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<title>React Dome</title>
<!-- CDN方式引入 -->
<script crossorigin src=
"https://unpkg.com/react@16/umd/react.development.js"
></script>
<script crossorigin src=
"https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js,可以引用 -->
<!-- 引入babel可以进行jsx的语法解析 -->
<script src=
"https://unpkg.com/babel-standalone@6/babel.min.js"
></script>
<style>
.blue{
color:blue;
}
</style>
</head>
<body>
<div id=
"app3"
></div>
<script type=
"text/babel"
>
// 生命周期函数演示
// 标准组件,带生命周期(带状态),查创建一个class对象继承Component
class
HelloJack
extends
React.Component {
constructor (props) {
// 构造函数
console.log(
"初始化阶段"
)
// 初始化props,组件上的属性
super
(props);
// 初始化状态
this
.state = {
name:
"Xing"
,
age:30
}
}
componentWillMount(){
// 常用于发送ajax请求
console.log(
"组件加载之前"
)
}
componmentDidMount(){
console.log(
"组件加载后"
)
}
updateUser = ()=>{
// => 函数
this
.setState({
// this是指向上下文的button,自动触发更新,并render
name:
"666"
,
age:30
})
}
shouldComponentUpdate(){
// 返回true更新
console.log(
"数据是否更新?"
)
// 逻辑判断...
return
true
;
// 默认为true,不用实现
}
componentWillUpdate(){
console.log(
"数据将要更新"
)
}
componentDidUpdate(){
console.log(
"数据已经更新"
)
}
render(){
console.log(
'组件加载中或者数据更新'
)
return
<div>
<h1>Hello: {
this
.props.name}, 默认值:{
this
.state.name}</h1>
<p>年纪: {
this
.props.age}</p>
<button onClick={
this
.updateUser}>更新数据</button>
</div>
// 带参数的传递使用this
}
}
ReactDOM.render(
<HelloJack name=
"xxx"
age=
"25"
/>,
document.getElementById(
'app3'
)
)
</script>
</body>
</html>
- demo4: 组件传参
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<title>React Dome</title>
<!-- CDN方式引入 -->
<script crossorigin src=
"https://unpkg.com/react@16/umd/react.development.js"
></script>
<script crossorigin src=
"https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js,可以引用 -->
<!-- 引入babel可以进行jsx的语法解析 -->
<script src=
"https://unpkg.com/babel-standalone@6/babel.min.js"
></script>
<style>
.blue{
color:blue;
}
</style>
</head>
<body>
<div id=
"app"
></div>
<div id=
"app1"
></div>
<div id=
"app3"
></div>
<script type=
"text/babel"
>
// 组件化开发:函数组件(无状态)、标准组件(有状态,可以使用this代表class的实例)
// 创建函数返回一个jsx,函数组件
function
Hello() {
return
<h1> Hello, Jack</h1>
}
ReactDOM.render(
<Hello/>,
// 这里直接调用函数名加<>,就成为了组件了
document.getElementById(
'app'
)
)
function
Hello_plus(props){
return
<div>
<h1>Hello: {props.name}</h1>
<p>年纪: {props.age}</p>
</div>
}
ReactDOM.render(
<Hello_plus name=
"Li"
age=
"23"
/>,
document.getElementById(
'app1'
)
)
// 标准组件,带生命周期(带状态),查创建一个class对象继承Component
class
HelloJack
extends
React.Component {
// render() { // 渲染
// return <h1> Hello JackLove </h1>
// }
render(){
return
<div>
<h1>Hello: {
this
.props.name}</h1>
<p>年纪: {
this
.props.age}</p>
</div>
// 带参数的传递使用this
}
}
ReactDOM.render(
<HelloJack name=
"xxx"
age=
"25"
/>,
document.getElementById(
'app3'
)
)
</script>
</body>
</html>
- demo5: render渲染函数
1234567891011121314151617181920212223242526272829303132333435363738
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<title>React Dome</title>
<!-- CDN方式引入 -->
<script crossorigin src=
"https://unpkg.com/react@16/umd/react.development.js"
></script>
<script crossorigin src=
"https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js,可以引用 -->
<!-- 引入babel可以进行jsx的语法解析 -->
<script src=
"https://unpkg.com/babel-standalone@6/babel.min.js"
></script>
<style>
.blue{
color:blue;
}
</style>
</head>
<body>
<div id=
"app"
></div>
<div id=
"app1"
></div>
<script type=
"text/babel"
>
// 元素的实时渲染
function
tick() {
// 使用js中嵌套html,react 是单向数据流
var
time =
new
Date().toLocaleTimeString();
var
ele = <div>
<h1>Hello : Wang </h1>
<h1>{time}</h1>
</div>
// 当要渲染的标签是多个时必须要又一个父标签,类似与vue中的template下必须要有一div
ReactDOM.render(
ele,
document.getElementById(
'app1'
)
)
}
setInterval(tick,1000)
</script>
</body>
</html>
相对而言,React的学习成本可以相对低,网上有很多教程,如果可以我们可以通过网上更好的学习,这里推荐去官网学习,已经很详细了(基础),对于更加深入的学习,我们会使用react来创建一个比较复杂的应用。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步