React 安装及简单用法 （一）

一 React的定义

React 是Facebook在2013 年开源在github上的javaScript库,React把用户界面抽象成一个个组件,

获得功能，然后通过引入jsx语法，复用组件变得非常容易。

二 React的安装与使用

（1）window+R 然后输入cmd

（2）npm i -g create-react-app 创建react 的脚手架

（3）create-react-app "文件名"  创建一个react 项目

 （4）npm start  启动项目
          npm run eject  暴露webpack配置文件
          nom run build 打包项目

三 vscode 安装

启动react框架需要一个软件 可以去百度自己搜索 vscode安装下载

 

进入vscode 我们需要安装几个react运作的相关插件 

1.Simple React Snippets    react快捷键插件

2.Path Intellisense  智能获取路径插件

3.Live Server 本地服务器插件

4.ESLint  本地服务器插件

5.Chinese(Simplified) Language Pack for Visual Studio 中文汉化插件

然后 打开创建react 文件夹即可

四 react结构

(1)目录结构

 (2) src结构

 五 React的jsx语法

jsx含义：javascript混合xml(html)语法格式

jsx语法的作用:复用组件变得非常容易，同时也能保证组件结构清晰，目的更好的在javascript中写html模板。

jsx格式:

import './App.css'
function APP() {
//定义数组 arr
  var arr = [
    <h3>你好react</h3>,
    <h3>我喜欢react</h3>,
    <p>runrunrun</p>,
  ]
//定义的css
  var styles = {
    fontSize: "48px",
    color: "#f70",
  }
  return (

    <div>
      你好react
      <p className='active'>快润</p> //className 绑定类名
      <p>{2 + 3}</p>
      {arr}  //页面输出 arr
      <p style={styles}>一起学习react</p>
    </div>
  )
}
export default APP;

jsx的结构特点:

特点:
1. 有且只有一个根节点
2. class写成classname
3. 在{} 内写JavaScript
4. 数组里面可以直接写html标签
5.注释用（/**/）
6 .样式可以直接展开

六 React 组件的应用

使用react的组件前 我们先要了解react组件分为哪些

函数组件  类组件

（1）函数组件的形式

function App{
return(<div>你好react</div>)
}
export default App;

（2）类组件 快捷键 rcc 快速创建类组件

import React,{Component} from 'react'
export default class App extends Component{
render(){
  retutn(<div>你好react</div>)

}
}

七 react 模板语法

(1)文本渲染

1.文本渲染的基本形式为 { }

2.html文本渲染 dangerouslySetinnerHTML={{__html:xxx}}   不推荐使用

import React, { Component } from 'react';

export default class APP extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: "你好啊，<b>react</b>",            
        }
    }
    render() {
        return (
            <div>               
                {/*文本渲染  */}
                {this.state.msg}
                <div dangerouslySetInnerHTML={{ __html: this.state.msg }}></div>          
            </div>
        )
    }
}

(2) 条件渲染

1.三元运算符号  条件？<>:<>

2.&&符号  {{条件&&<>}}

import React, { Component } from 'react';

export default class APP extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: "你好啊，<b>react</b>",
            isLog: false, //设置的参数           
        }
    }
    render() {
        return (
            <div>               
                 {/*条件渲染 */}
                 //isLog为flase 为请登录 true为你好！
                {this.state.isLog ? <p>你好啊！</p> : <p>请登录</p>} 
                {this.state.isLog && <p>中午吃肉！</p>}        
            </div>
        )
    }
}

(3) 列表渲染

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

import React, { Component } from 'react';

export default class APP extends Component {
    constructor(props) {
        super(props)
        this.state = {
              list: ['vue', 'react', 'jQuery', 'js']  
        }
    }
    render() {
        return (
            <div>               
                {/* 列表渲染 */}
                //list.map 给每一个item找到相对应的条件
                {this.state.list.map(item => <h3 key={item}>{item}</h3>)}       
            </div>
        )
    }
}

八 react 点击事件

点击事件几种写法：

和普通js事件一致，需要驼峰式写法
onClick={this.sayHi}
onClick={()=>{this.sayHi(参数)}}
onClick={()=>{this.sayHi.bind(this,参数)}}

创建一个sayHi方法  

import React, { Component } from 'react';

export default class APP extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: "你好啊，<b>react</b>",
            isLog: false,
            list: ['vue', 'react', 'jQuery', 'js']

        }
    }
    sayHi = (msg = '加油努力') => {
        console.log();
        alert(msg)
    }
    render() {
        return (
            <div>
            
                {/* 事件 */}
                <button onClick={this.sayHi.bind(this, '呜呜呜呜')}>问候-传参2</button>
                <button onClick={() => { this.sayHi('你好啊msr') }}>问候-传参</button>
                <button onClick={this.sayHi}>问候-许愿</button>
                <button onClick={() => alert('你好react')}>问候</button>
               
            </div>
        )
    }
}

九.更新状态State

基本形式：

this.setState({k:v})
this.serState({k:v}),()=>console.log("执行完毕的回调函数))

import React, { Component } from 'react';

export default class APP extends Component {
    constructor(props) {
        super(props)
        this.state = {
              list: ['vue', 'react', 'jQuery', 'js']  
        }
    }
    render() {
        return (
             {/* 更新数据 setState */}
                <button onClick={() => {
                    this.setState({ isLog: !this.state.isLog }, () => {
                        console.log("数据切换完毕");
                    })

                }}>切换</button><br/>
        )
    }
}

设置一个setState 当点击button时 更新数据