react学习笔记

本片笔记是根据jspang的个人博客学习所得

一、准备工作

1.1 脚手架的搭建

npm install -g create-react-app

1.2 第一个react项目

mkdir ReactDemo  //创建ReactDemo文件夹
create-react-app demo01   //用脚手架创建React项目
cd demo01   //等创建完成后，进入项目目录
npm start   //预览项目，如果能正常打开，说明项目创建成功

1.3 目录结构的介绍 

1.3.1 根目录

• README.md :这个文件主要作用就是对项目的说明，已经默认写好了一些东西，你可以简单看看。如果是工作中，你可以把文件中的内容删除，自己来写这个文件，编写这个文件可以使用Markdown的语法来编写。

• package.json: 这个文件是webpack配置和项目包管理文件，项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置，当然脚手架已经为我们配置了一些了，目前位置，我们不需要改动。如果你对webpack了解，对这个一定也很熟悉。

• package-lock.json：这个文件用一句话来解释，就是锁定安装时的版本号，并且需要上传到git，以保证其他人再npm install 时大家的依赖能保证一致。

• gitignore : 这个是git的选择性上传的配置文件，比如一会要介绍的node_modules文件夹，就需要配置不上传。

• node_modules :这个文件夹就是我们项目的依赖包，到目前位置，脚手架已经都给我们下载好了，你不需要单独安装什么。

• public ：公共文件，里边有公用模板和图标等一些东西。

• src ： 主要代码编写文件，这个文件夹里的文件对我们来说最重要，都需要我们掌握。

1.3.2 public目录

这个文件都是一些项目使用的公共文件，也就是说都是共用的

• favicon.ico : 这个是网站或者说项目的图标，一般在浏览器标签页的左上角显示。

• index.html : 首页的模板文件，我们可以试着改动一下，就能看到结果。

• mainifest.json：移动端配置文件，这个会在以后的课程中详细讲解。

1.3.3 src目录

这个目录里边放的是我们开放的源代码，我们平时操作做最多的目录。

• index.js : 这个就是项目的入口文件

• index.css ：这个是index.js里的CSS文件。

• app.js : 这个文件相当于一个方法模块，也是一个简单的模块化编程。

• serviceWorker.js: 这个是用于写移动端开发的，PWA必须用到这个文件，有了这个文件，就相当于有了离线浏览的功能。

二、HelloWorld和组件的讲解

这节课先把src目录里的文件全部删除，我们一点点写一个·HelloWorld·程序，并通过编写这个程序了解一下什么是React中的组件化编程。

2.1 入口文件的编写

写一个项目的时候一般要从入口文件进行编写的，在src目录下，新建一个文件index.js，然后打开这个文件。

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />,document.getElementById('root'))

 上面的代码，我们先引入了React两个必要的文件，然后引入了一个APP组件，目前这个组件还是没有的，需要一会建立。然后用React的语法把APP模块渲染到了root ID上面.这个rootID是在public\index.html文件中的

2.2 app组件的编写

新建一个 App.js 文件

import React, {Component} from 'react'

class App extends Component{
    render(){
        return (
            <div>
                Hello React
            </div>
        )
    }
}
export default App;

这样子执行npm start 就可以在浏览器上看到效果了。

此处加入个人看法：React组件其实就是通过class语法糖继承Component的写法，通过render方法将html字符串渲染到页面，方法可以直接写在这个class下，属性写在constructor

JSX语法简单介绍

 JSX : JavaScriptXml

• 遇到 < 当作 HTML 来解析
• 遇到 {  当作 js 来解析

React实例-小姐姐菜单，Fragment组件

• 首先在 src 目录下新建 Xiaojiejie.js 并写下如下代码

//引入Fragment组件
import React,{Component,Fragment} from 'react';

class Xiaojiejie extends Component{
    render(){
        return (
            //这里使用<Fragment></Fragment>组件包裹代码,不会在DOM结构生成冗余的代码
            <Fragment>
                <div><input /><button>增加服务</button></div>
                <ul>
                    <li>头部按摩</li>
                    <li>精油椎背</li>
                </ul>
            </Fragment>
        )
    }
}

export default Xiaojiejie;

• 然后在 index.js 中引入该组件，并挂载到 root 下即可以在浏览器上显示

import React from 'react'
import ReactDOM from 'react-dom'
import Xiaojiejie from './Xiaojiejie'

ReactDOM.render(<Xiaojiejie />,document.getElementById('root'))

React理论，数据绑定

React不建议你直接操作DOM元素,而是要通过数据进行驱动，改变界面中的效果。React会根据数据的变化，自动的帮助你完成界面的改变。所以在写React代码时，你无需关注DOM相关的操作，只需要关注数据的操作就可以了

我们现在需要实现输入输入框文本，内容实时更新

修改 Xiaojiejie.js 内容如下

import React,{Component,Fragment} from 'react';

class Xiaojiejie extends Component{
    constructor(props){
        super(props)
        this.state = { //当前组件所有数据都可以写在state内
            inputVal:'jspang', //input输入框的数据
            list:[] //li里面的数据
        }
    }

    render(){
        return (
            <Fragment>
                <div>
                    <!--使用value来绑定input的内容,使用onChange方法来实时更新内容,注意onChange事件执行的函数必须绑定this,不然在函数内部获取不到this-->
                    <input value={this.state.inputVal} onChange={this.inputChange.bind(this)}/>
                    <button>增加服务</button>
                </div>
                <ul>
                    <li>头部按摩</li>
                    <li>精油椎背</li>
                </ul>
            </Fragment>
        )
    }

    inputChange(e){
        //使用这种方法来更新state中的输入框的文本内容
        this.setState({
            inputVal:e.target.value
        })
    }
}

export default Xiaojiejie;

方法写在 render 函数下面

属性写在 constructor 里面的 this.state 中

       constructor里面必须先使用 super 方法将参数 props 传出去

增加数据

要实现的内容是点击“增加服务”要增加到下方列表

首先，li 里面的数据是写死的，先把他循环出来

将 ul>li 改成如下代码，这样 li 就是循环的 state 中的 list

<ul>
    {
        //循环list并return li标签，一定要在标签上绑定key作为唯一项
        this.state.list.map((item,index)=>{
            return <li key={index}>{item}</li>
        })
    }
</ul>

在增加按钮上绑定一个 onClick 事件，并执行一个函数

<button onClick={this.addList.bind(this)}>增加服务</button>

addList(e){
    this.setState({
        //使用es6的扩展运算符将新输入的value值填充到原数组中
        list:[...this.state.list,this.state.inputVal],
        //然后清空该输入框的值
        inputVal:''
    })
}

删除数据

需要实现点击列表项删除该列表项

首先在 return li 的时候，给 li 绑定一个点击事件，修改 return  li  写法如下

{
    this.state.list.map((item,index)=>{
        return (
            <li key={index} onClick={this.deleteItem.bind(this,index)}>{item}</li>
        )
    })
}

其次声明一个 deleteItem 方法接收一个参数 index

// 删除列表项
deleteItem(index){
    let list = this.state.list;//正确操作，赋值给变量再操作  不允许直接操作state
    list.splice(index,1)
    this.setState({
       list:list
    })
}

这里需要注意一点：React 不允许直接操作 state 中的值

所以需要将 state 中的数据 赋值出来操作，再修改至 state 中

JSX中容易踩坑的地方

JSX的注释

class的坑

使用 class 不能直接添加 class ，需要添加 className

需要解析 html 文本时需要添加 dangerouslySetInnerHTML  属性，这样就会帮我们把 item 解析成 html  格式

label标签

label 中不能使用 for 来绑定 input 元素，因为 for 在 js 中时循环的标识，所以在 jsx 中应使用 htmlFor

未完待续。。。

QQ群：1063233592

个人网站：前端靓仔