React基础安装和特点

概述：

react构建用户界面的javascript库

特点：

虚拟dao节点

单向数据流

组件开发思维

安装：

npm i -g create-react-app  //安装全局脚手架
create-react-app myreact
cd /myreact //进入项目目录
npm start   //启动

启动后

命令行如下图

 进入网址http://localhost:3000显示如下：

表示创建项目成功 

创建完成后目录结构

jsx语法：

        定义：javascript和xml(html)标签混合写法

        目的：更好的在javascript中写html模板

特点：

        1.有且只有一个根节点
        2.class写成className
        3.在{}写javascript
        4.对象自动展开
        5.数组里面可以直接写html标签
        6.注释用{/* */}

模板语法：

文本渲染：

        方式一：{}
        方式二：dangerouslySetInnerHTML={{__html:xxx}}

条件渲染：

        方式一： 条件？<>:<>   

        方式二：{{条件&&<>}}

列表渲染：

        this.state.list.map(item=><p key={item}>{item}</h3>

事件：

       onClick = {this.sayHi}

        onClick={()=>{this.sayHi(参数)}}

        onClick={this.sayHi.bind(this,参数)}

更新状态：

        this.setState({k:v})

        this.setState({k:v},()=>console.log("执行了")}

来吧，举个栗子：

import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: "学习react",
      isLog: false,
      list: ["vue", "react", "jQuery", "js"],
    };
  }
  sayHi = (msg = "哟，来了") => {
    alert(msg);
  };
  render() {
    return (
      <div>
        {/* 更新数据 setState */}
        <button
          onClick={() => {
            this.setState({ isLog: !this.state.isLog },()=>{
                console.log("切换数据");
            });
          }}
        >
          切换
        </button>{" "}
        <br />
        {/* 事件 */}
        <button
          onClick={() => {
            this.sayHi("让我进去");
          }}
        >
          传参
        </button>
        <button onClick={this.sayHi.bind(this, "来个提示")}>
          点一下
        </button>
        <button onClick={() => alert("入门了")}>点我试试</button>
        {/* 列表渲染 */}
        {this.state.list.map((item) => (
          <h3 key={item}>{item}</h3>
        ))}
        {/* 文本渲染 */}
        {this.state.msg}
        <div dangerouslySetInnerHTML={{ __html: this.state.msg }}></div>
        {/* 条件渲染 */}
        {this.state.isLog ? <p>欢迎你</p> : <p>请登录</p>}
      </div>
    );
  }
}