create-react-app创建初始化过程

蔚落 2021-07-25 00:59 426阅读 0赞

# 1. 创建过程 #

1.  在一个合适的地方创建一个文件夹 （在当前创建的这个文件夹中npm init初始化）
2.  开始安装脚手架（只安装一次以后再创建的时候就不用下载这个了但是从装系统或者node之后要重新安装） npm install -g create-react-app
3.  在刚才创建的文件夹中 初始化项目create-react-app空格自己起个名字（等时间比较久）
4.  创建好项目后cd空格项目名
5.  启动npm start
6.  在浏览器中输入localhost:3000  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70]

# 2. 项目创建好之后：文件结构 #

1.  public文件夹：里面的index.html，是整个react项目最终打包的index入口页面的项目模板。但是和我们的代码编写无关，和最终的页面展示是相关的。
2.  src文件夹：是我们编写代码的地方。  
    2.1 src/index.js：是整个项目的入口js文件。  
    2.2 src/app.js：是被index引入的一个组件，也用一个js文件表示。  
    2.3 src/index.css：index.js中的的样式文件。  
    2.4 src/app.css：是app.js的样式文件。  
    2.5 logo.svg：是一个svg的图片文件。用于界面展示使用。

# 要删除脚手架默认给我们的内容： #

**1.在app.js与app.css与index.css这几个文件夹中吧css与jsx的模板内容删除掉**

# 3. 开始使用脚手架 #

1.  由于当前脚手架的文件结构并不符合我们的实际开发需求（需要手动创建符合我们需求的文件夹）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70 1]

## 创建组件： ##

1.  创建组件文件 在刚才创建好的components文件夹中创建一个xxx.js的文件 在里面输入如下内容（也可以跨快捷键 rcc）

import React, { Component } from 'react'
    
    export default class home extends Component {
        render() {
            return (
                <div>
                    
                </div>
            )
        }
    }

由于现在还没有学路由所以必须依赖于app.js

## 使用刚才创建的组件有个固定使用方式 ##

1.  先引用（import 给引用的组件起个名字 from ‘路径’）
2.  在使用 在需要显示组件的地方 <组建名/>

# 4. props使用 #

1.  在需要接受外部传参的地方输入\{this.props.xxx\}

import React, { Component } from 'react'
    
    export default class home extends Component {
        render() {
            return (
                <div>
                    <h1>我是自己创建的组件+++++(this.props.text)</h1>
                </div>
            )
        }
    }

1.  在当前组件被调用的时候从外部传递数据

function App() {
      return (
        <div className="App">
          <Home text="我是渣渣辉，是兄弟就来砍我"/>
          哈哈哈
        </div>
      );
    }

# 5. State #

import React, { Component } from 'react'
    
    export default class home extends Component {
    
        //1.创建state数据
        state={
            statetext:"我是state的默认值"
        }
    
        fun(){
            //3.修改
            this.setState({
                statetext:"我是修改后的statetext数据"
            })
        }
    
        render() {
            return (
                <div>
                    <h1>我是自己创建的组件+++++{this.props.text}</h1>
                    {/* 2.页面绑定 */}
                    <p>{this.state.statetext}</p>
                    <button onClick={()=>{this.fun()}}>点我修改数据</button>
                </div>
            )
        }
    }

# 6. demo练习 #

**模拟传统页面中的新闻列表**

1.  由于没有学习ajax所以我们使用假数据替代  
    创建一个父子组件  
    ![在这里插入图片描述][20190912152421397.png]
2.  设置父子组件的引用
3.  在父组件中创建模拟数据

export default class Fu extends Component {
        state={
            arr:[
                {title:"渣渣辉1",content:"是兄弟就来砍我1"},
                {title:"渣渣辉2",content:"是兄弟就来砍我2"},
                {title:"渣渣辉3",content:"是兄弟就来砍我3"},
                {title:"渣渣辉4",content:"是兄弟就来砍我4"},
                {title:"渣渣辉5",content:"是兄弟就来砍我5"},
                {title:"渣渣辉6",content:"是兄弟就来砍我6"},
                {title:"渣渣辉7",content:"是兄弟就来砍我7"}
            ]
        }
    }

1.  把数据传递给子组件

render() {
        return (
            <div>
                父组件
                <Zi data={this.state.arr}/>
            </div>
        )
    }

1.  在子组件中接受父组件传递过来的数据并且进行遍历展示

import React, { Component } from 'react'
    
    export default class Zi extends Component {
        render() {
            return (
                <div>
                    <h1>新闻列表</h1>
                    <ul>
                        {
                            this.props.data.map((v,i)=>{
                                return (
                                    <li key={i}>
                                        <h2>{v.title}</h2>
                                        <p>{v.content}</p>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
            )
        }
    }

# 7. 组件传值 #

**正向传值：props之前一直在用**  
**逆向传值：必须通过事件来进行出发一个抛出动作**

this.props.起个名字.bind(this,”数据”)

<button onClick={this.props.zipao.bind(this,"我是子组件逆向传递的数据")}>点我进行逆向传值</button>

**在子组件被调用的时候来绑定这个抛出的数据,并且调用一个父组件的函数**

<div>
        父组件
        {this.state.text}
        <Zi data={this.state.arr} zipao={this.funFu}/>
    </div>

**创建这个父组件的函数并且必须必须形参**

//必须要有一个形参(子组件传递过来的数据)
    funFu=(data)=>{
        console.log(data);
        this.setState({
            text:data
        })
    }

# 8. 样式 #

**Js文件中不能直接写样式**  
所以在之前创建的styles文件夹中创建对应组件的css文件(该怎么写样式就怎么写但是注意class要换成className)  
**引用：**  
Import “css文件的相对路径”

# 9. Ajax #

## 9.1 Jquery ajax ##

1.  下载：npm install --save jquery
2.  使用:
    
     *  在使用的地方 import $ from “jquery”
     *  在适合的地方调用ajax

componentWillMount() {
            $.ajax({
                type: "get",
                url: "https://api.github.com/search/repositories?q=re&sort=sorts",
                success: function (response) {
                    console.log(response);
                }
            });
        }

## 9.2 Axios ##

1.  下载：npm install --save axios
2.  引用 在需要的组件中引用  
    `import axios from "axios"`

axios({
        url:"https://api.github.com/search/repositories?q=re&sort=sorts",
        method:"get"
    }).then((ok)=>{
        console.log(ok);
    })

## 9.3 Fetch请求 ##

1.  fetch是es6提供的一种数据请求方式
2.  因为是es6自带不需要下载任何内容

fetch("https://api.github.com/search/repositories?q=re&sort=sorts").then((data)=>{
        console.log(data);
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70]: /images/20210724/b2c52d235bc74d8cbd0694ee5915afe6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70 1]: /images/20210724/a4e0b4a6be194577a09db54ba7ea97b5.png
[20190912152421397.png]: /images/20210724/940de9f270fb4de3aa699c38b20de770.png