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之后：createRootconst 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.statereturn (<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.创建rootconst 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.stateconst { aaa, bbb, ccc} = this.stateconst {friend} = this.state// 2.对内容进行运算后显示(插入表达式)const {firstNmae, lastName} = this.stateconst fullName = firstNmae + "" + lastNameconst {age} = this.stateconst ageStr = age > 18 ? '成年人' : '未成年人'const {movies} = this.stateconst 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.创建rootconst 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>