React全家桶+博客实战小解

#1.react基础

React.js是全球最火的前端框架(Facebook推出的前端框架)，衍生出了reactnative（移动端），reactAR（虚拟现实）。

安装nodejs好，再安装脚手架create-react-app，官方推出的。

npm install -g create-react-app

再用脚手架创建一个demo

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

src ：主要代码编写文件，这个文件夹里的文件对我们来说最重要。
node_modules :这个文件夹就是我们项目的依赖包，脚手架已经都给我们下载好了，你不需要单独安装什么。
gitignore : 这个是git的选择性上传的配置文件，比如node_modules文件夹，就需要配置不上传。
package.json: 这个文件是webpack配置和项目包管理文件，项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置。
package-lock.json：这个文件用一句话来解释，就是锁定安装时的版本号，并且需要上传到git，以保证其他人再npm install 时大家的依赖能保证一致。
README.md :这个文件主要作用就是对项目的说明，已经默认写好了一些东西，编写这个文件可以使用Markdown的语法来编写。

src文件夹简介：

index.js : 这个就是项目的入口文件。
index.css ：这个是index.js里的CSS文件。
app.js : 这个文件相当于一个方法模块。
serviceWorker.js: 这个是用于写移动端开发的，PWA必须用到这个文件，有了这个文件，就相当于有了离线浏览的功能。

入口文件的编写：

在src目录下，新建一个文件index.js，然后编写最简单的代码。

import React from 'react'  //一二行是必须要引入的
import ReactDOM from 'react-dom'  //DOM（DOM—Document Object Model）是W3C国际组织的一套Web标准。DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。也叫浏览器对象，是一个分层结构。

import App from './App'   //在引入app组件，现在还没写
ReactDOM.render(<App />,document.getElementById('root'))  //APP组件渲染到了root ID上面，rootid在public/index.html

写app组件：

import React, {Component} from 'react'   //安插件，快捷键imrc

class App extends Component{
    render(){
        return (
            <div>
                Hello JSPang
            </div>
        )
    }
}
export default App;    //暴露出组件

npm start 启动，可以查看一下效果。

JSX简介：

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

component与JSX的区别：

自定义的组件必须首字母大写，jsx是小写字母开始。

使用自己定义的组件：把入口文件的<App />组件换成自己组件名字。

现在新建一个Xiaomeimei.js文件，打出如下代码：简单的列表。

import React,{Component} from 'react'

class Xiaomeimei extends Component{
    render(){
        return  (
            <div>
               <div><input /> <button> 增加服务 </button></div>
               <ul>
                   <li>头部按摩</li>
                   <li>精油推背</li>
               </ul> 
            </div>
        )
    }
}
export default Xiaomeimei

组件外层包裹原则：写一个组件的时候，组件的最外层都需要有一个包裹

。

若在布局中，真的用不上最外层的标签怎么办，没关系，react已经考虑到这个问题，用,去浏览器中看，发现没有了最外层的包裹。

响应式设计和数据绑定：无需直接操作dom元素，只需要关注数据的操作就可以了，数据驱动（这也是React如此受欢迎的主要原因，大大加快了我们的开发速度）。

数据定义在组件的构造函数中即可

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

数据绑定到输入框：但这样会把数据绑死。

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

如果想要改变，需要绑定响应事件

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

绑定个inputChange（）

inputChange(e){
    // console.log(e.target.value);
    // this.state.inputValue=e.target.value;
    this.setState({
        inputValue:e.target.value
    })   //只能用这个setstate来改变值，直接赋值是错的。
}

列表在页面上循环输出：map循环函数，里面的箭头函数带两个参数item，index。关于箭头函数，这是es6语法新增的一种新的函数，因为长得像箭头，所以叫箭头函数，相当于匿名函数。这里为了按照react的要求，我们在每个循环的li元素里，再加上key值，通常是item+index（一个index也行）。

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

当然数据还是绑死在构造函数里面：添一个列表。

constructor(props){
    super(props) //调用父类的构造函数，固定写法
    this.state={
        inputValue:'jspang' , // input中的值
        //----------主要 代码--------start
        list:['基础按摩','精油推背']   
        //----------主要 代码--------end
    }
}

增加添加服务功能：在按钮上绑定一个this.addList（）方法。

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

补充响应的方法：这里的三个点，是扩展运算符，也是es6的新语法，用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中，有点循环复制的意思，当然还有其他用法，这里就不展开，以后有机会写到这块儿时再展开。

//增加服务的按钮响应方法
addList(){
    this.setState({
        list:[...this.state.list,this.state.inputValue]
    })  //之前的内容循环拷贝，加上输入的内容，得到想要的。

}

增加删除功能：首先要得到要删的东西的下标，然后添加删除方法，若用纯js代码，确实需要点技术，我现在说实话是没学过js的，我是直接上手的react。此外，现在的typescript有取代js的趋势，所以我学的话是会“双管齐下”的。

说到这里，我就忍不住想补充点我的学习心得：

这个特殊的寒假，我会好好肝博客的，说点题外话，这个假期是我自学的第二个假期，第一个是大一下的暑假，现在是大二上的寒假。这个寒假因为武汉肺炎事件，寒假过成了暑假，在家自学前端，javaspringboot等。比起第一个假期，这个假期显然是学的东西更充实，大一下的暑假自学了Python，当时是在中国大学mooc上找的课，学了一段时间，后来在新生群里闲逛的时候，看到了一个学长提到淘宝上可以买教程来学，于是当晚便找到了了心仪的教程，立刻买下，下完客服让下的资源，就开始兴致勃勃的看，当时看的挺爽的，感觉学了很多不管是基础还是简单的骚操作，对我来说，开启了一个新世界。随后开始刷这些培训班的教程，也加了交流群。后来在群里了，我又发现了一座新大陆，就是大名鼎鼎的blibli，b站，当时是一位管理员提到了一位b站的up主的视频，于是我去搜，发现，哎呦，这个up主讲的东西很多啊，还很有体系。当时就想能不能在b站上找到更多类似的教程，结果让我喜出望外，果然是有的，天哪而且还免费，天哪，真香，于是我的**“面向b站编程之路”**便开始了。也不是说我当时不知道b站这个东西，其实早就知道的，但我一直以为这是看动漫的一个视频播放器而已，还没发现有学习的奇效。也理解了为什么许多人叫b站为当代大学生学习平台。嘿嘿，围绕b站的学习资源也是多的让我头大，不仅学到知识和技巧，也学到了不少巨佬的学习经验。

//删除单项服务
deleteItem(index){
    let list = this.state.list   //这里有个坑，react是禁止直接操作state的，
    // 要另外在赋到一个变量上，然后再进行处理。
    list.splice(index,1)
    this.setState({
        list:list
    })

}