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

1. 创建过程

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

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. 由于当前脚手架的文件结构并不符合我们的实际开发需求（需要手动创建符合我们需求的文件夹）
   

创建组件：

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>
        )
    }
}

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

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所以我们使用假数据替代
   创建一个父子组件
   
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"}
        ]
    }
}

4. 把数据传递给子组件

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

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

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);
})