初识React

React安装

1.首先要安装Node.js以及相对应的NPM

[https://nodejs.org/] 进入官网下载相对应的版本，下载安装直接点击下一步，安装完成后cmd打开命令提示符

检测版本 输入 node -v

安装node会自带一个npm包管理工具

检测npm版本 输入 npm -v

以上两条命令都返回版本号，则安装成功

2.设置npm，国内的npm有点慢，可以设置成淘宝的镜像来代替

cmd命令提示符输入：npm config set registry https://registry.npm.taobao.org

3.安装create-react-app

通过安装create-react-app来创建React项目

在命令行输入 npm install -g create-react-app

4.创建一个React项目

cmd进入项目文件目录，键入命令npx create-react-app demo

这里create-react-app是创建命令，demo是要创建的项目名，根据自己实际情况取

这样就算创建成功了，根据最后两行的提示进入刚刚创建的demo目录中（cd demo）,启动项目（npm start）。

稍等片刻，跳出上面的网页代表一个基本的项目创建成功。

React环境介绍

node_modules:依赖包
public：入口文件
src：源码文件

React学习

认识react

1.将代码简化，删除css,js代码，只留下一个index.js文件，方便学习，如图所示：

2.ReactDOM.render的两个参数：

(1)jsx语法:JavaScript+XML语法(HTML)

(2)document.getElementById(‘root’) 获取要插入的容器 'root’在public入口文件index.html中声明了
解读jsx语法：遇到<>按照HTML语法解析，遇到{}按照JavaScript

元素渲染

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

()的使用，如果存在标签结构，并且标签结构要换行，需要用()

组件

一个React项目，是由成千上万个组件组成

每创建一个组件，需要引入react库 import React from "react"

使用类的形式创建组件，使用render渲染函数

app.jsx

// 引入react库
import React from "react"

//可以在组件中引入组件
import Home from "./home"

// 用类的形式创建组件
class App extends React.Component{
    // 渲染函数
    render(){
        return(
            <div>
              <h1>Hello React Component</h1>
              <h3>学习react</h3>
              <Home />
            </div>
        )
    }
} 

// 导出组件
export default App

也可以直接导出组件

home.jsx

import React from "react"

//直接导出组件
export default class Home extends React.Component{
    render(){
        return(
            <div>
                Home
            </div>
        )
    }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';

// 引入组件
import App from "./app" ;

//元素渲染
ReactDOM.render(<App />, document.getElementById('root'));

porps属性

app.jsx

// 引入react库
import  React from "react"

//引入组件
import Home from "./home"

import MyNav from "./MyNav"


// 用类的形式创建组件
class App extends React.Component{
    // 渲染函数
    render(){
        const nav1 = ["首页","视频","学习"];
        const nav2 = ["WEB","JAVA","PHP"];

        return(
            <div>
              <h1>Hello React Component</h1>
              <h3>学习react</h3>
              <Home />
              <MyNav nav={ nav1 } title="路径导航"/>
              <MyNav nav={ nav2 } title="学习导航"/>
            </div>
        )
    }
} 

// 导出组件
export default App

父组件定义好传到子组件的 props不可以被修改，但是父组件可以无限复用

MyNav.jsx

import React from "react"

// 父亲定义好传到子元素的 props不可以被修改 
export default class MyNav extends React.Component{
    render(){
        console.log(this.props.nav);
        return(
            <div>
                {/* jsx语法 */}
                <h3>{this.props.title}</h3>
                <ul>
                    {
                        this.props.nav.map((element,index) =>{
                            return <li key={index}>{ element }</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

State

组件中的状态：state

以前我们操作页面元素的变化，都是修改Dom，操作Dom

但是有了react框架，不直接操作Dom，页面元素的改变使用State进行处理

app.jsx

// 引入react库
import  React from "react"

//引入组件
import Home from "./home"

import MyNav from "./MyNav"

import StateComponent from "./StateComponent"

// 用类的形式创建组件
class App extends React.Component{
    // 渲染函数
    render(){
        const nav1 = ["首页","视频","学习"];
        const nav2 = ["WEB","JAVA","PHP"];

        return(
            <div>
              {/* <h1>Hello React Component</h1>
              <h3>学习react</h3>
              <Home />
              <MyNav nav={ nav1 } title="路径导航"/>
              <MyNav nav={ nav2 } title="学习导航"/> */}
              <StateComponent />
            </div>
        )
    }
} 

// 导出组件
export default App

使用this.state定义状态

StateComponent.jsx

import React from "react"

export default class StateComponent extends React.Component{
    constructor(props){
        super(props);
        this.state = {//定义状态
            count:10,
            flag:true
        }
    }
    increment(){
       this.setState({
         count:this.state.count+=1
       })
    }
    decrement(){
      this.setState({
        count:this.state.count-=1
      })
    }
    clickHandler = () =>{
      console.log(this);
    }
   
    render(){
        let showView = this.state.flag ?'我是孙悟空' : '我是假的'
        return(
            <div>
                <h3>组件的state</h3>
                <p> {this.state.count} </p>
                <button onClick={  this.increment.bind(this) }>增加</button>
                <button onClick={  this.decrement.bind(this) }>减少</button>
                <button onClick={  this.clickHandler} >关于this</button>
                <p> { showView }</p>
            </div>
        )
    }
}