react(一）：特点-基本使用-JSX语法
初识React
React是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。
官网文档：React 官方中文文档
特点
1.声明式编程
2.组件化开发
3.多平台适配
开发依赖
开发React必须依赖三个库：
1.react：包含react所必须的核心代码
2.react-dom：react渲染在不同平台所需要的核心代码
3.babel：将jsx转换成React代码的工具
引入依赖的方式：
1.CDN引入
<!-- CDN引入 -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>2.下载后，添加本地依赖
3.npm管理
案例-普通方式实现
注意：React18前后，渲染组件的书写方式较为不同
React18之前：使用 ReactDOM.render() 方法来渲染组件
React18之后：使用 ReactDOM.createRoot() 方法来渲染组件
<body>
<div id="root"></div>
<!-- 1.引入依赖 -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 编写React代码 -->
<script type="text/babel">
// React18之前：ReactDOM.render()
// ReactDOM.render(<h2>Hello World</h2>,document.getElementById('root'))
// React18之后：createRoot
const root = ReactDOM.createRoot(document.getElementById('root'))
/*
要修改文本内容
step1:将文本定义成变量
*/
let message = 'Hello World'
//step2:监听按钮的点击
function btnClick() {
// 2.1修改数据
message = 'Hello React'
// 2.2重新渲染界面
rootRender()
}
rootRender()
// step3.封装一个渲染函数
function rootRender( ){
// 第一个（）表示方法；第二个()表示它是一个整体
root.render((
<div>
<h1>{message}</h1>
<button onClick={btnClick}>修改文本</button>
</div>
))
}
</script>
</body>案例-组件化开发
可使用类的方式，将其封装成一个组件
<body>
<div id="root"></div>
<script src="../lib/react.js"></script>
<script src="../lib/react-dom.js"></script>
<script src="../lib/babel.js"></script>
<script type="text/babel">
// 使用组件重构代码
// 1.类组件-类名必须大写！！
// 2.函数式组件
class App extends React.Component {
// 组件数据
constructor() {
super()
//this.state = {定义的数据}
this.state = {
message:"Hello World"
}
}
// 组件方法(实例方法)
btnClick() {
//该函数默认this指向为undefined——改变其this指向
// 内部完成两件事：1.将state中的值修改掉 2.自动重新执行render函数
this.setState({
message:"Hello React"
})
}
// render中返回的jsx内容即root根节点渲染内容
render() {
// console.log("render",this);//此处this-App组件实例
return (
<div>
<h2>{this.state.message}</h2>
<button onClick={this.btnClick.bind(this)}>修改文本</button>
</div>
)
}
}
// 将组件渲染到界面上
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)
</script>
</body>JSX语法解析
jsx书写规范
render(){
const {message} = this.state
/*
书写规范：
1.JSX结构中只有一个根元素
2.JSX结构通常包裹一个（）—— 将整个jsx当成一个整体，实现换行
、3.jsx可以是单标签，也可以是双标签，但是单标签必须以/>结尾
*/
return (
<div>
<h1>{ message }</h1>
<br/>
</div>
)
}jsx注释写法
render(){
const {message} = this.state
return (
<div>
{/* jsx注释写法 */}
<h1>{ message }</h1>
</div>
)
}jsx插入内容
<body>
<div id="root"></div>
<script src="../lib/react.js"></script>
<script src="../lib/react-dom.js"></script>
<script src="../lib/babel.js"></script>
<script type="text/babel">
//1.创建root
const root = ReactDOM.createRoot(document.getElementById('root'))
//2..定义App根组件
class App extends React.Component {
constructor() {
super()
this.state = {
message:"Hello World",
names:[ 'Jack', 'Tom', 'Lucy' ],
count:100,
aaa:undefined,
bbb:null,
ccc:true,
friend:{name:'lucy', age:22},
firstNmae:'张',
lastName:'三',
age:20,
movies:["哪吒","唐探","三体"]
}
}
render(){
// 1.插入标识符
const {message, names,count} = this.state
const { aaa, bbb, ccc} = this.state
const {friend} = this.state
// 2.对内容进行运算后显示(插入表达式)
const {firstNmae, lastName} = this.state
const fullName = firstNmae + "" + lastName
const {age} = this.state
const ageStr = age > 18 ? '成年人' : '未成年人'
const {movies} = this.state
const items = movies.map(item => <li>{item}</li>)
// 3.返回jsx的内容
return (
<div>
{/* 1.Number/String/Array直接显示处理 */}
<h1>{ message }</h1>
<h2> {names} </h2>
<h2> {count} </h2>
{/* 2.undefined/null/Boolean页面什么都不显示-取值为空 */}
<h2>{aaa}</h2>
<h2>{bbb}</h2>
<h3>{ccc}</h3>
{/* 3.Object类型不能作为子元素显示 */}
{/* <h2>{friend}</h2> */}
<h2>{Object.keys(friend)}</h2>
{/* 4.可插入对应的表达式 */}
<h2>{ 10 + 20 }</h2>
<h2>{firstNmae + "" + lastName}</h2>
<h2>{fullName}</h2>
{/* 5.插入三元运算符 */}
<h2>{ageStr}</h2>
<h2>{age >=18 ? "成年" : "未成年"}</h2>
{/* 可以调用方法获取结果 */}
<ul>{items}</ul>
<ul>
{movies.map(item => <li>{item}</li>)}
</ul>
<ul>{this.getMovies()}</ul>
</div>
)
}
getMovies(){
const liEls = this.state.movies.map(item => <li>{item}</li>)
return liEls
}
}
// 3.将App组件渲染到root上
root.render(<App />)
</script>
</body>jsx绑定属性
<body>
<div id="root"></div>
<script src="../lib/react.js"></script>
<script src="../lib/react-dom.js"></script>
<script src="../lib/babel.js"></script>
<script type="text/babel">
//1.创建root
const root = ReactDOM.createRoot(document.getElementById('root'))
//2..定义App根组件
class App extends React.Component {
constructor() {
super()
this.state = {
title:"学习第一天",
imgURL:"https://p1.ssl.qhmsg.com/t0143b426aee3bb03cb.jpg",
link:"htttp://www.baidu.com",
isActive:true,
objStyle:{color:"red", fontSize:"30px"}
}
}
render(){
const {title, imgURL,link,isActive,objStyle} = this.state
// 需求：isActive为true时，添加active类名
// 写法一：
const className = `abc cba ${isActive? "active" : ""}`
// 写法二：
const classList = ["abc","cba"]
if(isActive) {
classList.push("active")
}
return (
<div>
{/* 1.基本属性绑定 */}
<h1 title={title}>我是h1元素</h1>
{/* <img src={imgURL} alt=""/> */}
<a href={link}>百度一下</a>
{/* 2.绑定class属性 */}
<h2 className={className}>哈哈哈哈哈</h2>
<h2 className={classList.join(" ")}>哈哈哈哈哈</h2>
{/* 3.绑定style属性:绑定对象类型 */}
<h2 style={{color:"red", fontSize:"30px"}}>11111</h2>
<h2 style= {objStyle}>888</h2>
</div>
)
}
}
// 3.将App组件渲染到root上
root.render(<App />)
</script>
</body>