react--1.react环境搭建、JSX语法、注释、样式、列表渲染、定义单个组件、eact Props、react State

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

1.react环境搭建

（1）npm install -g create-react-app  下载环境

（2）create-react-app my-app 创建项目,应用名称不要有大写字母

（3）cd my-app          进入项目目录

（4）npm run start                           启动项目

2.react项目结构

（1）node_modules：这里面包含了react项目中会用到的一些组件。

（2）public：里面包含了我们项目中的启动页面，react比较适合单页面项目应用开发，所以暂时只包含一个index.html，并且这也是react工程的入口页面。

（3）src：里面包含了使用的js文件，css文件，img文件等等，打开src文件夹，不要管什么app.js，你就看到index.js即可，系统默认将index.html对准了index.js，index.js也就是我们的入口js，他和index.html所对应。

（4）修改：让目录结构更易懂:改动一下src里面的内容和结构。src文件夹下原来的所有东西，除了index.js之外，都可以删掉。

3.JSX语法

（1）JSX全称： JavaScript XML， React 使用 JSX 来替代常规的 JavaScript。

（2）JSX作用：用来创建react虚拟DOM(元素)对象
const root = ReactDOM.createRoot(document.getElementById('root'));//关联页面根元素
let App=<div>666</div>
root.render(App);
let App=<div>666</div> 保存的是一个标签，这种语法就算是JSX语法

注意1: 它不是字符串, 也不是HTML/XML标签

注意2: 它最终产生的就是一个JS对象

标签名任意: HTML标签或其它标签

标签属性任意: HTML标签属性或其它

（3）JSX优点：

        JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。

        它是类型安全的，在编译过程中就能发现错误。

        使用 JSX 编写模板更加简单快速。

JSX简单示例应用：

JSX语法规则：

（1）遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));//关联页面根元素

function App(){
  return <div>666</div>
}
root.render(<App/>);//给元素内部渲染组件模板
（2）遇到以 { 开头的代码，以JS的语法解析: 标签中的js代码必须用{ }包含
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));//关联页面根元素

function App(){
  let a="hello react"
  return <div>666,{a}</div>
}
root.render(<App/>);//给元素内部渲染组件模板

4.注释

注释需要写在花括号中，需要注意的是：

在标签内部的注释需要花括号=={/*注释功能*/}

在标签外的的注释不能使用花括号

5.样式

React 推荐使用内联样式。React 会在指定元素数字后自动添加 px 。

import React from "react";
class App extends React.Component{
    render(){
        let colorBox={
            color:"green",
            fontSize:"20px",
            fontWeight:"bold"
        }
        let change=()=>{
            console.log("输出打印的值change");
        }
        return (<div>
             <div style={colorBox}>样式设置</div>
             <button onClick={change}>change</button>
        </div>
           
        )
    }

}
export default App;

6.列表渲染

通过数组的map函数

示例如下：

import React,{Component} from "react";
export default class App extends Component{
    render(){
        let arr=["hello1","hello2","hello3","word"]
        let arr2=arr.map(el=>{return (<div>{el}</div>)})
        return (
            <div>
                <div>{arr2}</div>
            </div>
        )
    }
}

7.定义单个组件

注册的组件名必须大写，小写会报错！

（1）先在app.jsx文件里面写入定义单个组件的路径：

（2）在定义的子组件Box2里面去写入格式1（类定义）：方法1
import React,{Component} from "react";
export default class Box2 extends Component{
    render(){
        return (
            <div>
                <h1>box1子组件</h1>
            </div>
        )
    }
}
（3）在定义的子组件Box2里面去写入格式2（函数定义）：方法2
import React,{Component} from "react";
export default function Box2(){
    return (
        <div>
            <h2>box2</h2>
        </div>
    )
}

8.react Props

React 的一大特点是单向数据流。React 中的每一个组件，都包含有一个属性（props），属性主要是从父组件传递给子组件的，在组件内部，我们可以通过this.props获取属性对象。

在主页上的代码：

import React,{Component} from "react";
import Box2 from "./Box2.jsx"
import Box3 from "./Box3.jsx"
export default class App extends Component{
    render(){
        return (
            <div>
                <Box2></Box2>
                <Box3 name="box3上的数据"></Box3>
            </div>
        )
        
    }
}

在Box3里面的代码（接收数据）：

import React,{Component} from "react";
export default class Box3 extends Component{
   render(){
    return (
        <div>
            <h2>box3--{this.props.name}</h2>
        </div>
    )
   }
}

（8.1）多属性传值

（1）定义一个this.props对象，在对象中声明多个键值对，用于表示组件的属性

（2）在组件中使用{...this.props}的方式传递属性。“...”表示JSX的延展操作符，这种方式可以很方便的为组件指定多个属性，并且为属性的值指定数据类型。

9.react State

React在ES6的实现中，规定state在constructor中实现

正确定义State的方式如下：

（1）在constructor中实现state

（2）在constructor中通过bind绑定事件函数（事件函数是用来改变状态）

（3）在事件函数内部使用setState函数更改状态

（4）在组件中的render函数中使用该状态

（5）在组件上需要设置监听事件，去触发事件函数的执行

state示例应用如下：

state当点击的时候，不仅打印的值会改变，页面也会发生变化。

import React,{Component} from "react";
export default class Box2 extends Component{
    constructor(arg){
        super(arg)
        this.state={
            msg:"app组件里面的state属性"
        }
        this.change2=()=>{
           
            // 方法2
            this.setState({msg:"修改了state属性的数据"})

            // 方法1
            // this.state.msg="change了state属性的data"
            // this.setState(this.state)
        }
    }
   
    render(){
        return (
            <div>
                <p>{this.state.msg}</p>
                <button onClick={this.change2}>change3</button>
            </div>
        )
    }
}

在计时器和原生dom函数中是state是同步函数，其他情况全部是异步函数