Sunshine

安装Simple React Snippets

打开VSCode的插件查单，然后在输入框中输入Simple React Snippets,然后点击进行安装就可以了。

###　快速进行引入import

直接在vscode中输入imrc，就会快速生成最常用的import代码。

1

import React, { Component } from 'react';

快速生成class

在作组件的时候，都需要写一个固定的基本格式，这时候你就可以使用快捷键cc.插件就会快速帮我们生成如下代码：

1
2
3
4
5
6
7
8

class  extends Component {
    state = {  }
    render() { 
        return (  );
    }
}

export default ;

还有很多快捷键，如果你需要理解，打开插件的说明文件看一下就可以了。

JSX代码注释

JSX中的代码注释是非常有讲究的，这个书上介绍的也非常少，所以在这里讲一下，因为在初学React在这里踩过坑。

第一次写JSX注释，是直接这样写的，当然这样写是完全不对的。

1
2
3
4
5
6

<Fragment>
    //第一次写注释，这个是错误的
    <div>
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
        <button onClick={this.addList.bind(this)}> 增加项目 </button>
    </div>

那写JSX的注释，可以有下面两种写法:

1
2
3
4
5
6

<Fragment>
    {/* 正确注释的写法 */}
    <div>
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
        <button onClick={this.addList.bind(this)}> 增加项目 </button>
    </div>

如果你记不住，有个简单的方法，就是用VSCode的快捷键，直接按Ctrl+/，就会自动生成正确的注释了。

你可以把这个理解为，在jsx中写javascript代码。所以外出我们套入了{}，然后里边就是一个多行的javascript注释。如果你要使用单行祝注释//，你需要把代码写成下面这样。

1
2
3
4
5
6
7
8

<Fragment>
    {
        //正确注释的写法 
    }
    <div>
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
        <button onClick={this.addList.bind(this)}> 增加项目 </button>
    </div>

也就是你要进行换行，所以个人认为这种方法不太优雅，所以推荐第一种注释方法。

JSX中的class陷阱

react中要把class换成className，它是防止和js中的class类名 冲突，所以要求换掉。这也算是一个小坑吧。

JSX中的html解析问题

如果想在文本框里输入一个标签，并进行渲染。默认是不会生效的，只会把标签打印到页面上，这并不是我想要的。如果工作中有这种需求，可以使用dangerouslySetInnerHTML属性解决。具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

上面的代码就可以实现html格式的输出。

JSX中label标签的坑

JSX中``的坑，也算是比较大的一个坑，label是html中的一个辅助标签，也是非常有用的一个标签。

先看下面的代码，我们在文本框前面加入一个``。

1
2
3
4
5

<div>
    <label>加入项目：</label>
    <input className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加项目 </button>
</div>

这时候想点击“加入项目”直接可以激活文本框，方便输入。按照html的原思想，是直接加ID就可以了。代码如下：

1
2
3
4
5

<div>
    <label for="Sunshine">加入项目：</label>
    <input id="Sunshine" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加项目 </button>
</div>

这时候你浏览效果虽然可以正常，但console里还是有红色警告提示的。大概意思是不能使用for.它容易和javascript里的for循环混淆，会提示你使用htmlfor。

1
2
3
4
5

<div>
    <label htmlFor="Sunshine">加入项目：</label>
    <input id="Sunshine" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加项目 </button>
</div>

这时候代码就正确了，可以实现点击后,激活标签了。

这节算是我总结的一些JSX中的坑吧，总结出来，希望小伙伴们少踩这些坑，能快速上手React。

让列表数据化

现在的列表还是写死的两个``标签，那要变成动态显示的，就需要把这个列表先进行数据化，然后再用javascript代码，循环在页面上。

我们先给list数组增加两个数组元素，代码如下：

1
2
3
4
5
6
7
8
9

constructor(props){
    super(props) //调用父类的构造函数，固定写法
    this.state={
        inputValue:'Sunshine' , // input中的值
        //----------主要 代码--------start
        list:['项目一','项目二']   
        //----------主要 代码--------end
    }
}

有了数据后，可以在JSX部分进行循环输出，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

render(){
    return  (
        <Fragment>
            <div>
                <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                <button> 增加项目 </button>
            </div>
            <ul>
                {
                    this.state.list.map((item,index)=>{
                        return <li>{item}</li>
                    })
                }
            </ul>  
        </Fragment>
    )
}

完成上面的步骤，数据就不再是固定的了，而是动态管理的，也为我们接下来的添加打下了基础，剩下的步骤也显得很简单了。

增加服务选项

要增加服务选项，我们需要再增加按钮上先绑定一个方法this.addList(这个方法目前还没有，需要我们接下来建立).

1

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

接下来就是把this.addList方法，代码如下：

1
2
3
4
5
6
7

//增加服务的按钮响应方法
addList(){
    this.setState({
        list:[...this.state.list,this.state.inputValue]
    })

}

这里需要说的是...这个是ES6的新语法，叫做扩展运算符。意思就是把list数组进行了分解，形成了新的数组，然后再进行组合。这种写法更简单和直观，所以推荐这种写法。

解决key值错误

高兴的同时其实是有一些隐患的，打开浏览器的控制台F12,可以清楚的看到报错了。这个错误的大概意思就是缺少key值。就是在用map循环时，需要设置一个不同的值，这个时React的要求。我们可以暂时用index+item的形式来实现。

1
2
3
4
5
6
7

<ul>
    {
        this.state.list.map((item,index)=>{
            return <li key={index+item}>{item}</li>
        })
    }
</ul>

数组下标的传递

如果要删除一个东西，就要得到数组里的一个编号，这里指下标。传递下标就要有事件产生，先来绑定一个双击事件.代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

为了看着更清晰，我们在return部分加了()这要就可以换行编写JSX代码了.在onClick我们绑定了deleteItem方法.

编写deleteItem方法

绑定做好了,现在需要把deleteItem,在代码的最下方,加入下面的代码.方法接受一个参数index.

1
2
3
4
5
6
7
8
9

//删除单项服务
deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })

}

其实这里边是有一个坑的,有的小伙伴肯定会认为下面的代码也是正确的.

1
2
3
4
5
6
7

//删除单项服务
deleteItem(index){
    this.state.list.splice(index,1)
    this.setState({
        list:this.state.list
    }) 
}

记住React是禁止直接操作state的,虽然上面的方法也管用,但是在后期的性能优化上会有很多麻烦,所以一定不要这样操作.这也算是我React初期踩的比较深的一个坑,希望小伙伴们可以跳坑.

响应式设计和数据绑定

React不建议你直接操作DOM元素,而是要通过数据进行驱动，改变界面中的效果。React会根据数据的变化，自动的帮助你完成界面的改变。所以在写React代码时，你无需关注DOM相关的操作，只需要关注数据的操作就可以了（这也是React如此受欢迎的主要原因，大大加快了我们的开发速度）。

数据定义一般放在构造函数里constructor

1
2
3
4
5
6
7
8

//js的构造函数，由于其他任何函数执行
constructor(props){
    super(props) //调用父类的构造函数，固定写法
    this.state={
        inputValue:'' , // input中的值
        list:[]    //服务列表
    }
}

在React中的数据绑定和Vue中几乎一样，也是采用字面量(我自己起的名字)的形式，就是使用{}来标注，其实这也算是js代码的一种声明。比如现在我们要把inputValue值绑定到input框中，只要写入下面的代码就可以了。其实说白了就是在JSX中使用js代码。

1

<input value={this.state.inputValue} />

现在需要看一下是不是可以实现绑定效果，所以把inputValue赋予一个’Sunshine’，然后预览看一下效果。在这里我们并没有进行任何的DOM操作，但是界面已经发生了变化，这些都时React帮我们作的，它还会自动感知数据的变化。

绑定事件

这时候你到界面的文本框中去输入值，是没有任何变化的，这是因为我们强制绑定了inputValue的值。如果要想改变，需要绑定响应事件，改变inputValue的值。比如绑定一个改变事件，这个事件执行inputChange()(当然这个方法还没有)方法。

1

<input value={this.state.inputValue} onChange={this.inputChange} />

现在还没有inputChange()这个方法，在render()方法的下面建立一个inputChange()方法，代码如下：

1
2
3

inputChange(e){
    console.log(e.target.value);
}

这时候控制台是可以打印出输入的值的。看到获得了输入的值，想当然的认为直接改变inputValue的值就可以了(错的).

1
2
3
4

inputChange(e){
    console.log(e.target.value);
    this.state.inputValue=e.target.value;
}

写完后再进行预览，会发现程序直接报错了（加项服务还真的有点难度………..）。

其实我们范了两个错误：

1. 一个是this指向不对，你需要重新用bind设置一下指向(ES6的语法)。
2. 另一个是React中改变值需要使用this.setState方法。

第一个错误很好解决，直接再JSX部分，利用bind进行绑定就好。

1

<input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />

这步做完，我们还需要加入setState方法，改变值。代码如下:

1
2
3
4
5
6
7

inputChange(e){
    // console.log(e.target.value);
    // this.state.inputValue=e.target.value;
    this.setState({
        inputValue:e.target.value
    })
}

现在测试一下，输入框可以改变值了，里边设计了React的重要思想。

JSX简介

JSX就是Javascript和XML结合的一种格式。React发明了JSX，可以方便的利用HTML语法来创建虚拟DOM，当遇到<，JSX就当作HTML解析，遇到{就当JavaScript解析.

比如我们写一段JSX语法

1
2
3
4

<ul className="my-list">
    <li>JSPang.com</li>
    <li>I love React</li>
</ul>

比如我们以前写一段JS代码：

1
2
3

var child1 = React.createElement('li', null, 'JSPang.com');
var child2 = React.createElement('li', null, 'I love React');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

从代码量上就可以看出JSX语法大量简化了我们的工作。

组件和普通JSX语法区别

这个说起来也只有简单的一句话，就是你自定义的组件必须首写字母要进行大写，而JSX是小写字母开头的。

JSX使用三元运算符

在JSX中也是可以使用js语法的，我们先简单讲解一个三元元算符的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import React from 'react'
const Component = React.Component


class App extends Component{
    render(){
        return (
            <ul className="my-list">
                <li>{false?'zhaohui58.cn':'Sunshine'}</li>
                <li>I love React</li>
            </ul>
        )
    }
}

export default App;

总结：作为一个初学者对JSX有一个简单的了解

写下下面四行代码：

1
2
3
4

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文件中的。

这样入口文件就写好了，这时候就需要写APP组件了。

app组件的编写

现在写一下App组件，这里我们采用最简单的写法，就输出一个Hello Sunshine,就可以了。

1
2
3
4
5
6
7
8
9
10
11
12

import React, {Component} from 'react'

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

这里会出现一个不能理解的地方，就是：

1

import React, {Component} from 'react'

这其实是ES6的语法-解构赋值，如果你分开写就比较清楚了，你可以把上面一行代码写成下面两行.

1
2

import React from 'react'
const Component = React.Component

当我们这两个文件都编写完成后，可以在终端使用npm start命令，来看一下我们编写的结果了。

总结：React的主要优势之一就是组件化编写，这也是现代前端开发的一种基本形式。所以我们在学习React的时候就要多用这种思想，只有不断练习，我们才能在工作中得心应手，轻松自如。小伙伴们也动手作一下吧。

项目根目录中的文件

先从进入项目根目录说起，也就是第一眼看到的文件(版本不同，可能稍有不同)

• README.md :这个文件主要作用就是对项目的说明，已经默认写好了一些东西，你可以简单看看。如果是工作中，你可以把文件中的内容删除，自己来写这个文件，编写这个文件可以使用Markdown的语法来编写。
• package.json: 这个文件是webpack配置和项目包管理文件，项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置，当然脚手架已经为我们配置了一些了，目前位置，我们不需要改动。如果你对webpack了解，对这个一定也很熟悉。
• package-lock.json：这个文件用一句话来解释，就是锁定安装时的版本号，并且需要上传到git，以保证其他人再npm install 时大家的依赖能保证一致。
• gitignore : 这个是git的选择性上传的配置文件，比如一会要介绍的node_modules文件夹，就需要配置不上传。
• node_modules :这个文件夹就是我们项目的依赖包，到目前位置，脚手架已经都给我们下载好了，你不需要单独安装什么。
• public ：公共文件，里边有公用模板和图标等一些东西。
• src ： 主要代码编写文件，这个文件夹里的文件对我们来说最重要，都需要我们掌握。

public文件夹介绍

这个文件都是一些项目使用的公共文件，也就是说都是共用的，我们就具体看一下有那些文件吧。

• favicon.ico : 这个是网站或者说项目的图标，一般在浏览器标签页的左上角显示。
• index.html : 首页的模板文件，我们可以试着改动一下，就能看到结果。
• mainifest.json：移动端配置文件，这个会在以后的课程中详细讲解。

src文件夹介绍

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

• index.js : 这个就是项目的入口文件，视频中我们会简单的看一下这个文件。
• index.css ：这个是index.js里的CSS文件。
• app.js : 这个文件相当于一个方法模块，也是一个简单的模块化编程。
• serviceWorker.js: 这个是用于写移动端开发的，PWA必须用到这个文件，有了这个文件，就相当于有了离线浏览的功能。

安装Node.js

使用React.js是可以用最原始的``标签进行引入的工作中也不会有这种形式进行引入。所以就采用脚手架形式的安装。这就需要先安装Node.js，用里边的npm来进行安装。

Node中文网址：http://nodejs.cn/

Node.js安装好以后，如果是Windows系统，可以使用Win+R打开运行，然后输入cmd`，打开终端（或者叫命令行工具）

1

node -v

如果正确出现版本号，说明Node安装成功了

然后再输入代码:

1

npm -v

如果正确出现版本号，说明npm也是没问题的，这时候Node.js安装就算完成了。

脚手架的安装

Node安装好之后，你就可以使用npm命令来安装脚手架工具了，方法很简单，只要打开终端，然后输入下面的命令就可以了。

1

npm install -g create-react-app

创建第一个React项目

React简介

React用于构建用户界面的JavaScript库

React三大体系

首先先学会React.js的基本知识，然后再学习ReactNative,这样学习难度会大大降低。

正式简介

ReactJS是由Facebook在2013年5月推出的一款JS前端开源框架,推出式主打特点式函数式编程风格。值得一说的是，到目前为止ReactJS是世界上使用人数最多的前端框架,它拥有全球最健全的文档和社区体系。

ReactJS的官方网站https://reactjs.org/

React与Vue对比

这是前端最火的两个框架，虽然说React是世界使用人数最多的框架，但是就在国内而言Vue的使用者很有可能超过React。两个框架都是非常优秀的，所以他们在技术和先进性上不相上下。

那个人而言在接到一个项目时，我是如何选择的那？React.js相对于Vue.js它的灵活性和协作性更好一点，所以我在处理复杂项目或公司核心项目时，React都是我的第一选择。而Vue.js有着丰富的API，实现起来更简单快速，所以当团队不大，沟通紧密时，我会选择Vue，因为它更快速更易用。（需要说明的是，其实Vue也完全胜任于大型项目，这要根据自己对框架的掌握程度来决定，以上只是站在我的知识程度基础上的个人总结）

React简介

React.js是全国做火的前端框架（Facebook推出的前端框架），国内的一二线互联网公司大部分都在使用React进行开发，比如阿里、美团、百度、去哪儿、网易 、知乎这样的一线互联网公司都把React作为前端主要技术栈。

React的社区很强大，随着React的普及衍生了很多有用的框架，比如ReactNative和React VR。React是从13开始推广的。

React优点总结

• 生态强大：现在没有哪个框架比React的生态体系好的，几乎所有开发需求都有成熟的解决方案。
• 上手简单: 可以在几个小时内就可以上手React技术，但是他的知识很广，可能需要更多的时间来完全驾驭它。
• 社区强大

需要的前置知识

• JavaScript基础：如果能会ES6就更好了
• npm基础：你需要会使用npm的包管理