目录

1.React环境搭建

2.React项目结构

 3.React优点和缺点

1.声明式设计

2.高效-React通过对DOM的模拟(创建虚拟DOM)               ，最大限度地减少DOM操作(底层是Diff算法)

3.单向响应的数据流

4.组件化开发-复用和便于维护

5.缺点：React本身能做的事并不多 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，想做大的项目必须用React插件(全家桶)eg:网络请求库















，UI库等这些没有

4.接受React的中二设定：JS中遇到了<>  会当作标签解析 
  
  
  
  
  
  
  
，标签中遇到了{} 
  
  
  
  
  
  
  
 ，就会把这个{}中的表达式判定为JS语法

5.快速创建组件

1.React环境搭建

1.安装React脚手架（安装一次就好）

npm install -g create-react-app

2.验证脚手架是否安装完毕/查询版本

create-react-app  -V

3.创建项目(如果丢包了

 


 


 


 


 


 


 


 ，npm i 一下)

create-react-app  项目名称   （js版本）

create-react-app 项目名称  --template typescript  （TS版本）

4.进入项目目录

cd 项目名称

5.启动项目

npm run start

2.React项目结构

（1）node_modules： 这里面包含了react项目中会用到的一些组件 
 
 
 
 
 
 
 
，install的时候下载下来的 
   
   
   
   
   
   
   
 ，你可以进去看看
 

 

 

 

 

 

 

 ，有一些如base64之类的我们可能会用到的组件
 

 

 

 

 

 

 

 
，或者一些第三方库；

（2）public：里面包含了我们项目中的启动页面               ，react比较适合单页面项目应用开发 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，所以暂时只包含一个index.html















，并且这也是react工程的入口页面                       ，入口页面怎么理解 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，就是你启动项目后























，打开的首页               ，第一眼呈现的那个页面；

（3）src：里面包含了一些我们自己使用的js文件 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，css文件















，img文件等等 
  
  
  
  
  
  
  
，但你打开src文件夹你会发现很混乱 
  
  
  
  
  
  
  
 ，不要管什么app.js

 


 


 


 


 


 


 


 ，你就看到index.js即可 
 
 
 
 
 
 
 
，系统默认将index.html对准了index.js 
   
   
   
   
   
   
   
 ，index.js也就是我们项目的入口js
 

 

 

 

 

 

 

 ，他和index.html所对应               。

（4）修改：让目录结构更易懂:接下来
 

 

 

 

 

 

 

 
，我们改动一下src里面的内容和结构               ，让首次接触react的小伙伴尽量能觉得他有点亲切的感觉 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，事实证明















，越亲切的事物我们越希望去接近 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  。src文件夹下原来的所有东西                       ，除了index.js之外 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，都可以删掉























，这样就可以轻装上阵了

 3.React优点和缺点

1.声明式设计

2.高效-React通过对DOM的模拟(创建虚拟DOM)               ，最大限度地减少DOM操作(底层是Diff算法)

3.单向响应的数据流

React 实现了单向响应的数据流 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，从而减少了重复代码















，这也是它为什么比传统数据绑定更简单















。

4.组件化开发-复用和便于维护(推荐使用函数组件)

5.缺点：React本身能做的事并不多 
  
  
  
  
  
  
  
，想做大的项目必须用React插件(全家桶)eg:网络请求库 
  
  
  
  
  
  
  
 ，UI库等这些没有

4.接受React的中二设定：JS中遇到了<></>  会当作标签解析

 


 


 


 


 


 


 


 ，标签中遇到了{} 
 
 
 
 
 
 
 
，就会把这个{}中的表达式判定为JS语法

JSX的理解：

JSX 是 JavaScript 语法的扩展 
  
  
  
  
  
  
  
。React 开发不一定使用 JSX  
   
   
   
   
   
   
   
 ，但我们建议使用它 
  
  
  
  
  
  
  
 。

JavaScript XML:JS中可以用标签
 

 

 

 

 

 

 

 ，标签里面也可以用JS语言

 


 


 


 


 


 


 


 。

JS中遇到了<></>  会当作标签解析
 

 

 

 

 

 

 

 
，标签中遇到了{}               ，就会把这个{}中的表达式判定为JS语法

//js - string 变量中保存的是一个字符串 let a = <div>hello react!</div> //jsx React中 变量中可以保存标签 let a = <div>hello react!</div> //jsx JS中遇到了<></>  会当作标签解析 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，标签中遇到了{}















，就会把这个{}中的表达式判定为JS语法 let a = <div>{num}</div>

 JSX中标签其实就是对象                       ，react中 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，箭头函数也可以用做创建对象

//App是一个函数组件























，是一个函数 //JSX中标签其实就是对象 //<App></App> ==> 相当于 new App(); react中               ，箭头函数也可以用做创建对象 let Mon = ()=>{ return <h1>6666666</h1> } root.render(<Mon></Mon>); //相当于 new Mon()

组件传值：

5.快速创建组件

在vscode中 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，下载插件：ES7+ React/Redux/React-Native snippets

然后输入rfc ,再按下回车

 再在需要用到该组件的时候记得要引入：import Search from 组件地址