React框架入门-创建项目、JSX了解

偏执的太偏执、 2022-11-03 00:45 240阅读 0赞

安装react官方脚手架（这里如果没有安装的话需要安装，安装一次即可）

npm install -g create-react-app

## 创建项目 ##

初始化项目

create-react-app my-project

进入项目

cd my-project

运行项目

npm start

运行项目后打开文件：，可以看到public内存放的是静态文件，src内存放的是代码，index.js是项目的入口文件。

![20210226003628179.png][]

运行项目打开后的结果为下图时，表示运行正常。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

这里的整个简单的react就创建好了，可以进行开发。可以发现这个项目内没有发现配置文件，因为项目内都隐藏起来了，如果想打开配置文件，可以运行npm run eject ，但是这个操作是不可逆的，运行之后不会再恢复到之前的状态。不建议运行。

先删除掉除index.js以外的文件。

这里先写一个简单的例子：

index.js

import React from 'react';
    import ReactDOM from 'react-dom';
    
    ReactDOM.render(<h1>Hello,React!</h1>,document.querySelector('#root'));

root是react默认的挂载点，如下图：

![20210227180117777.png][]

### 项目打包 ###

项目打包，先进入项目目录后

运行

// 1 打包命令
    
    npm run build 
    
    
    // 2 安装serve的命令，但是如果你安装了就不需要再重复安装  
    // 但是如果你不知道是否安装成功，可以在命令行内打出serve然后运行
    // 如果没报错就说明你已安装，如果报错提示未安装，就需要运行第2步
    
    npm install -g serve
    
    
    // 3 将打包好的项目运行起来
    serve -s build

这里放一张报错的截图：

![20210315174845783.png][]

这个是安装报错的情况，没安装serve。

## JSX ##

Jsx的全称是Javascript XML，react定义的一种类似XML的JS拓展语法：JS+XML。

本质是React.createElement(component, props, ...children) 的语法糖

作用：用来简化创建虚拟DOM

*  写法： var ele = <h1>Hello Jsx!</h1>
 *  注意1：它不是字符串，也不是HTML/XML标签，不要写引号
 *  注意2：它最终产生的是一个JS对象，需要使用 \{\}运行js表达式
 *  注意3：样式类名指定不要用class，要用className（因为class是ES6内定义的关键字，所以这里需要使用className进行区分）
 *  注意4：内联样式，要用style=\{ \{key:value\}\} 的形式去写。
 *  注意5：只能有一个根标签。
 *  注意6：标签必须闭合。
 *  注意7：标签首字母
    
     *  若字母小写开头，则将标签转为html内同名元素，若html中无该标签对应的同名元素，则报错。
     *  若字母大写开头，react就去渲染相应的组件，若组件没有定义，则报错。

标签名任意：HTML标签或者其他标签。

### jsx基本概念及例子 ###

JSX是一种js的语法拓展，表面上是HTML，本质上是通过babel转换为js执行，在所有JSX里，我们是可以在 \{\} 中使用js的语法。

JSX本质是转换为React.createElement在React内部构件虚拟DOM，最终渲染处页面。

举个例子：这个是jsx的写法

class App extends React.Component{
      render(){
        return {
          <div>
            Hello {this.props.name}, I am {3+4} years old.
          </div>
        }
      }
    }
    
    ReactDOM.render(
      <App name="React"/>,
      mountNode
    )

转换成js的写法：

class App extends React.Component{
      render(){
        return React.crehateElement(
          "div",
          null,   // 这里为div的属性
          "Hello",
          this.props.name,
          ", I am",
          3 + 4,
          " year old"
        )
      }
    }
    
    ReactDOM.render(
      React.createElement(App, {name: "React"}),
      mountNode
    )

### jsx的基本用法 ###

主要的

标签内的注释是  \{/\* 注释内容\*/\}

这里展示jsx实现变量操作等，具体目录结构

![20210228012738651.png][]

App.css内：

.img{
        border: 1px solid #f00;
    }

logo.js内随便找一张将图片即可。

App.js   （全部代码）

import React, { Component } from 'react'
    import logo from "./logo.jpg";
    import "./App.css";
    
    //函数型组件传递props，在这里必须带属性,这用于父子组件数据传递
    function Welcome1(props) {
      return (
        <div>
          Hello,{props.name}
        </div>
      )
    }
    
    export default class App extends Component {
      //1.当需要状态时，需要构造函数
      constructor(props){
        super(props);
        //2.初始化状态，现在为响应式数据
        // 每次状态更新都会导致render函数重新执行
        this.state = {
          count: 0,
          date: new Date()
        }
      }
      componentDidMount(){
        this.timer = setInterval(() =>{
          //3.更新状态
          this.setState({
              date:new Date(),     //最简单的更新状态的方式
              count:this.state.count + 1
          })
          //注意1.不能直接改状态
          //this.state.data = new Date();  //错误的
        },1000);
        //注意2.setState()是异步的,需要在后面加一个参数进行异步调用
        //这个写法是函数写法   setState
        this.setState((prevState,prevProps)=>{
          return {
              count :prevState.count + 1
          }
        },() => {
            console.log(this.state.count);
        })
      }
      componentWillUnmount(){
        clearInterval(this.timer);
      }
      formatName(user){
        return user.firstName+' '+user.lastName;
      }
      render() {
        const name = "123";
        //jsx本身也是变量
        const jsx = <p>hello,everyone</p>
        return (
          <div>
            App组件
            {/* 表达式 */}
            <h1>{name}</h1>
            <p>{this.formatName({firstName:'tom',lastName:'jerry'})}</p>
            {/* 属性 */}
            <img src={logo} style={
       {width:'100px'}} className="img" alt="11"/>
            {/* jsx本身也是表达式 */}
            {jsx}
            {/* 组件属性传值(父传子) ：传入的属性是只读的，单向数据流 */}
            <Welcome1 name="tom"></Welcome1>
            {/* 使用状态 */}
            <p>{this.state.date.toLocaleTimeString()}</p>
          </div>
        )
      }
    }

在js内class是关键字，在react内均使用className作为额它的类名，没有class。

这个里面包含了jsx的几种简单用法。

只是简单例子运行完成后基本展示如下：

![20210228013811513.png][]

### 标签内行内样式 ###

注：标签内行内样式的写法：

这里是两层 \{ \{\}\}，可能学过vue的人知道，这个  使用“Mustache”语法 (双大括号) 的文本插值，用于展示数据。

但是这里不一样，最外层的大括号代表需要在内部写js的表达式，里面大括号表示你需要写关于样式的对象。

具体的值内需要加上 '引号'      style=\{ \{width:'100px',fontSize:'30px'\}\}

### 自定义组件 ###

在jsx内的实现：

function Welcome1(props) {
      return (
        <div>
          Hello,{props.name}
        </div>
      )
    }
    
    
    <Welcome1 name="tom"></Welcome1>

这里呢，引入自定义标签，都必须是首字母大写（这里的代码是App.js内的例子代码）。

JSX内只能有js表达式（返回的值有结果），不能有js语句（if,for等）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1][]

## 状态State ##

在组件内的值不断变化时需要使用到状态

setState用于修改状态这里可以传递你需要更新的对象或者是一个回调函数。

1.   setState(\{\})
2.  setState(prev=>(\{\}))

这两种方式，如果你更新的值是基于上一个状态的基础上（值相互依赖），就要使用第二种方法了。

如下，第一个方法的例子：

this.setState({
      text:"111"
    })

第二个方法的例子：

this.setState(prevState =>({
      goods:[...prevState.goods,{id:3,text: prevState.text,price:666}]
    }))

这里呢，因为setState是异步操作，所以在值改变后不会立即更新。

[20210226003628179.png]: /images/20221024/5bcab2ff43ed434cb6a9e98718672c71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: /images/20221024/67016ece8ea24344b8b1398836dd3c0e.png
[20210227180117777.png]: /images/20221024/1968e7a7ade3423196d6e274ff5a76d9.png
[20210315174845783.png]: /images/20221024/887784ba75b04b4eaa7361d2f113a03a.png
[20210228012738651.png]: /images/20221024/ef79fd8890ba4f148d080366bb5d0c53.png
[20210228013811513.png]: /images/20221024/c5ec70593a4e4523b502a749a15a6387.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1]: /images/20221024/006187fc19324a2896ccfd09f63f6d8b.png