React学习一

react简介：facebook推出开源框架（2013年开源）

react16之后的都叫react fiber；

对比vue.js：react更加灵活

react使用：1、可以通过原生的js引入；2、可以通过使用脚手架工具（web开发过程中的辅助工具）【常见的：webpack\grunt\create-react-app(官方出的)】

官网：reactjs.org

---

 

脚手架工具create-react-app的使用：1、环境：安装node.js环境【官网nodejs.org】2、安装create-react-app:通过命令行：npm install -g create-react-app【安装】或者npx create-react-app my-app【安装并创建应用my-app，注：没有install】3、创建react app：create-react-app my-app;4、cd my-app【命令提示符cd，进入my-app目录下】;5、npm start/yarn start【访问localhost:3000】

注意1：

npm install几种方式的区别：见https://www.jianshu.com/p/920c1a6e999c

npm install  moduleName	安装模块到项目目录下	会把moduleName包安装到node_modules目录中； 不会修改package.json 之后执行npm install命令时，不会自动装入moduleName
npm install moduleName  -g	将模块安装到全局，具体安装到磁盘下的哪个位置，要看npm config prefix的位置	安装模块到全局，不会在项目node_modules目录中保存模块包。 不会将模块依赖写入devDependencies或dependencies 节点。 运行 npm install 初始化项目时不会下载模块。
npm install moduleName --save	安装模块到项目目录下	并在package文件的dependencies节点写入依赖。
npm install moduleName --save-dev	安装模块到项目目录下

 

 

注意2：

 

 

 npm和yarn都是依赖（js包）管理工具，yarn可以替代npm。windows下npm下的安装方式：npm install -g yarn

各种安装方式：https://www.jb51.net/article/95630.htm

 

yarn与npm：yarn是为了弥补 npm 的一些缺陷而出现的,但是npm5已经做了类似的改进

 

 见https://www.jianshu.com/p/254794d5e741

---

 

工程目录简介：

重要的有三个文件：public下的index.html文件，是项目的首页展示的模板html文件

src下的index.js，是所有js文件的js入口文件

src下的App.js文件，是往页面写入文本内容的js文件

其他的都不是很重要【对于初学者】

各个文件介绍：

① yarn.lock：项目依赖的安装包的版本控制文件

②readme.md: 项目说明文件（markdown语法，可以写自己的内容）

③package.json：所有的脚手架工具都有，说明这个脚手架工具是node包文件，让你的项目变成node包，一般不动这个文件，脚手架自动生成。

npm run start能启动的原因是：package.json中有start命令，当我们运行npm run start时，运行的就是script中的start中react-scripts start启动服务器。

④.gitgnore：用git管理时，不想传到git上，则把这些文件写在这里

⑤node_modules：放的是我们项目依赖的第三方包，这些包不是我们自己写的，是脚手架工具如果想实现他的一些功能就要依赖这些外部的包

⑥public：负责项目显示的html文件；public下的manifest.json文件：如果写手机端的h5app，图标、主题颜色等是在这个文件里是设置的

⑦src：放所有项目文件的源代码（js文件）入口文件为index.js；src下registerServiceWorker.js文件，它是写手机app【h5】用到的，应用举例：将网页放到https协议的服务器上，如果用户断网了，设置了registerServiceWorker，则用户可以访问到，它把网页缓存到浏览器内，没有网络也可以使用。src下：App.test.js：自动化测试文件

 

---

react的组件概念

组件：页面的每一个部分就是组件

react组件：当一个类继承React.Component时这就是一个组件（关键字：class\extends）【es6语法】，组件显示的内容由render()函数返回值决定。

两种定义方式：1、继承类React.Component；2、js函数定义；【不能使用state和lifecycle（或者说如果使用的话需要hook）】

 

//两种定义组件的方式：
    //1、类继承：class【es6语法，可以使用state和lifecycle】 
    class App extends React.Component{
          render(){
            return(
            <div>
                helloworld
            </div>
            );
          }
    }
    //2、js函数定义；【不能使用state和lifecycle（或者说如果使用的话需要hook）】
    function App() {
  return (
      //jsx语法
    <div className="App">
      <header className="App-header">
      helloworld
      </header>
    </div>
  );
}

 

语法详解：

①import  React，{Component}  from 'react'

等价于

import React  from 'react'

import {Component} from 'Component'  【ES6里面的结构赋值】 等价于 Const Component = React.Component

②ReactDOM.render(<App />,document.getElementById('root')); //将app这个组件挂载到root节点下

<App />为jsx语法，需要引入 import  React  from  'react'  才能编译jsx语法

document.getELementById('root'); //index.html中有一个<div id="root"></div> 放网页的内容

ReactDOM为第三方模块，render（）为其将组件挂接到某个dom节点下的方法。