react 01

最新推荐文章于 2022-04-04 12:43:52 发布

子非鱼emma

最新推荐文章于 2022-04-04 12:43:52 发布

阅读量238

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/qq_38998319/article/details/118904909

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、React脚手架的安装

使用 npm/cnpm 安装React官方脚手架(create-react-app)到全局

npm install create-react-app -g

二、创建第一个React项目

4.1、构建一个名为 demo 项目

create-react-app demo

4.2、进入这个文件夹，并且跑起来

切换到demo文件夹   cd demo

运行项目           npm start

项目运行，自动打开谷歌浏览器看见项目页面

如果有webpack的版本问题,可以把webpack卸载

npm uninstal webpack

然后重新下载

//npm i webpack@报错中要求的版本

npm i -g webpack@4.44.2

三,项目架构解析

public/index.html入口文件,

//index.js 就是react的入口文件 , 必须叫这个名字
//1. 引入核心模块
import React from "react";
import ReactDOM from "react-dom";
import App from "./App7.js";



//把对应的内容渲染到 id 为root 标签上

//ReactDOM.render(参数1,参数2)    把参数1 渲染到 参数2 上
// 参数1 : 要把谁渲染
// 参数2 : 渲染到谁身上 


// ------------------简写方式------
ReactDOM.render(
    <App />     //jsx
    ,
    document.getElementById("root")
)
// ---------------------------------


// --------------------复杂的写法----
// ReactDOM.render(
//     React.createElement("div",null,"hello,react")
//     ,
//     document.getElementById("root")
// )
// -----------------------------------

四、VSCode中JSX的编写优化

在vscode中的 文件>首选项>设置 中，直接搜索 include Language ，进入 settings.json ：

找到 "emmet.includeLanguages" 字段，添加：

"emmet.includeLanguages": {
        "javascript": "javascriptreact"
},

推荐图形化操作

搜索 trigger ，找到如图位置，打钩：

设置后就可以通过标签名+Tab 键快速码出标签

五,组件化开发

1.在src中新建一个文件App.js (一个组件)

2.引入核心模块

3.定义一个组件

4.将组件开放出去

5.在src/index.js文件中使用组件

//src/App.js
//1. 组件化开发   组件首字母  推荐大写 
//(1).引入核心模块
import React from 'react'

//定义一个组件类 
class App extends React.Component{
    render(){ //渲染组件
        // return (要返回的组件的内容)
        return (
            // 这里面的代码称为jsx代码
            <div>
                <p>我知道为什么一到学校就困了,因为学校是让人追梦的地方</p>
                <p>我知道为什么一到学校就困了,因为学校是让人追梦的地方</p>
                <p>我知道为什么一到学校就困了,因为学校是让人追梦的地方</p>
                <p>我知道为什么一到学校就困了,因为学校是让人追梦的地方</p>
            </div>
        )
    }
}

export default App;

//index.js 就是react的入口文件 , 必须叫这个名字
//1. 引入核心模块
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";


ReactDOM.render(
    <App />     //jsx
    ,
    document.getElementById("root")
)

以下的代码在src/index.js文件中使用组件引用的步骤就不展示了,都是一样的步骤

六.react基本知识(class,图片,style,label的使用)

//jsx 语法糖 
import React,{Component} from 'react';
import "./assets/css/style.css";
// 图片使用:1.先引入图片
import Img from "./assets/img/1.jpg";

export default class App2 extends Component {
    render(){
        return (
            <div>
                {/* jsx 的注释 
                    1. 行内css样式写法 
                      style="{js对象}"
                    2. class 要改成  className
                    3. 图片使用 , 先引入后使用   以后其他方法
                    4. label 标签的for 要改成 htmlFor
                    

                    总结: jsx 语法中  只要想运行js代码 加{} 
                */}
                <p style={{color:'red',background:'pink'}}>菜炒咸了,放一会就好了,因为时间可以冲淡一切</p>
                <p className="box"></p>
				// 图片使用:使用图片
                <img src={Img} width="100%" alt="" />
                <br />

                <label htmlFor="user">用户名</label>
				// 使用label可实现:当用户点击文字也可以将光标定位到输入框中
                <input type="name" name="" id="user" />

            </div>
        )
    }
}

运行结果:

七. react 的循环三元运算符

// react 的循环  三元运算符
import React,{Component} from 'react';

let name = "张三",age = 10,score = [89,99,10];
 
export default class App3 extends Component {
    
    render(){
        return(
            <div>
                <p>姓名:{name}</p>
                <p>年龄:{age}</p>
                <p>成年:{age>=18?'自愿':"犯法"}</p>
                <p>成绩:</p>
                <ul>
                {
                    score.map((v,k)=>{
                        return(
                            <li key={k}> {v} </li>
                            )
                    })
                }
                </ul>
            </div>
        )
    }
   
}

运行结果:

八 .foreach循环

// react 的循环  三元运算符
import React,{Component} from 'react';

let name = "张三",age = 10,score = [89,99,10];
 
export default class App3 extends Component {
    
    render(){
        let a = [];
        score.forEach((item)=>{
            a.push(<li>{item}</li>)
            //react.createElement("li")
        })

        return(
            <div>
                <p>姓名:{name}</p>
                <p>年龄:{age}</p>
                <p>成绩:</p>
                <ul>
                    {a}
                </ul>
            </div>
        )
    }
    
}

九 .快速补全组件内容

1.下载插件ES7 React/Redux snippets

2.rcc 快捷创建React组件

十 .事件帮定,插值语法

// 安装 ES7 Reactxxxxxxx插件
// rcc 快捷创建React组件

//事件 和 "插值语法" 的使用

import React, { Component } from 'react'
// 可以直接把Component也直接引入,这样就可以直接继承Component

export default class App4 extends Component {

    constructor(props) {
        super(props); //如果一个类,继承了其他类, 构造方法里,第一行必须写super()
        
        //定义一个数据
        this.state = {
            num:10
        }
    }
    
    render() {
        return (
            <div>
                <p>当前的数字是:{this.state.num}</p>
                {/* 绑定事件的时候 传入this的值 ****  */}
                <button onClick={this.dian1}>按钮666</button>
                <button onClick={this.dian2.bind(this)}>按钮+++</button>
            </div>
        )
    }
    
    //单机后调用的方法
    dian1(){
        console.log(666);
    }
    
    dian2() {
        this.setState({
            num:this.state.num+1
        })
    }

    
}

十一 .双向数据绑定

//双向绑定

import React, { Component } from 'react'

export default class App5 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            val:"初始值"
        }
    }

    render() {
        return (
            <div>
                {/* 首先 input 设置一个 value   设置一个 onChange事件修改这个value对应的值 */}
                <input type="text" value={this.state.val} onChange={this.model.bind(this)}/>
                <p>{this.state.val}</p>
            </div>
        )
    }

    //双向绑定
    model(e) {
        console.log(e);
        console.log(e.target.value);
        this.setState({
            val:e.target.value
        })
    }

    
}

可通过e.target获取input的元素

十二 . 选项卡案例

//选项卡 
import React, { Component } from 'react';
import "./assets/css/tab.css";

export default class App6 extends Component {
    constructor(props){
        super(props);

        this.state = {
            num:2
        }
    }
    render() {
        return (
            <div className="tab_con">
                <div className="tab_btns">
                    <button className={this.state.num===1?"active":''} onClick={this.qie.bind(this,1)}>按钮1</button>
                    <button className={this.state.num===2?"active":''} onClick={this.qie.bind(this,2)}>按钮2</button>
                    <button className={this.state.num===3?"active":''} onClick={this.qie.bind(this,3)}>按钮3</button>
                </div>

                <div className="tab_cons">

                    <div className={this.state.num===1?"show":''}>按钮1 的内容</div>
                    <div className={this.state.num===2?"show":''}>按钮2 的内容</div>
                    <div className={this.state.num===3?"show":''}>按钮3 的内容</div>
                </div>
            </div>
        )
    }
    //切换
    qie(v) {
        this.setState({
            num:v
        })
    }
}
// 配合assets中的style.css

// .tab_cons div{
//     width:100%;
//     height:350px;
//     background:orange;
//     font-size:40px;
//     display:none;
// }
// .tab_con div.show{
//     display:block;
// }