react创建项目

使用脚手架的步骤
cnpm install create-react-app -g

create-react-app 项目名

npm start

npm run eject 把脚手架原本隐藏封装的脚本，还原回来
注意：在执行eject时，会报错。
解决：先创建本地git仓库，并把代码进行本地提交。

cd react-antd-cms (cd 项目名)
git init
git add .
git commit -m 'first commit'
npm run eject
执行npm run eject会在package.json,生成配置一些环境
? Are you sure you want to eject? This action is permanent. y  就会生成有一堆东西
为什么使用npm run eject
其中：
1.node_modules是各个插件存放位置
2.public用于放置静态资源，里面的资源不会参与构建
3.src是源码文件，一般做开发就在这个文件夹，会参与打包构建

重点来了：
在package.json中：
只有三个依赖，分别是react，react-dom,react-scripts,依赖为什么这么少，
是因为像webpack，babel等等都是被creat react app封装到了react-scripts这个项目当中，
包括基本启动命令 都是通过调用react-scripts这个依赖下面的命令进行启动的，
creat react app搭建出来的项目默认支持这4种命令，start以开发模式启动项目，
build将整个项目进行构建，test进行测试，eject，会将原本creat react app对webpack，
babel等相关配置的封装弹射出来
，如果我们要将creat react app配置文件进行修改，现有目录下是没有地方修改的，
此时，我们就可以通过eject命令将原本被封装到脚手架当中的命令弹射出来，然后就可以在项目的目录下看到很多配置文件


1.在scripts中start的文件,来修改端口号
找到
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
改为3000
2.vue识别@
react不识别   alias可以@
别是路径的问题
找到resolve.alias
在webpack.config.js
loaders把浏览器不认识的文件打包成浏览器识别的文件
sass 继承 混入 混合 解决csss的作用域

resolve配置alias  
'@':path.resolve(__dirname,'../src')

file-loader是文件的loader
overlay:false
proxy:proxy
改了配置文件,要重启项目
favicon.icon 的生成
3.favicon 制作
   找免费的网站
   下载是32*32
4.sass的安装
   react的文档都是分开的
   flux的facebook的
   sass只能cnpm安装
   cnpm  i  node-sass -S  是运行环境安装在是-S  工具是-D
    mainifest.json文件要   
    src中的index.js中的,相当于main.js,如果把它改成了main.js 
    在webpack文件也要改入口文件
      引入react-dom要引react

5.代理
安装axios
cnpm install axios -D  
在src中新建utils(app).js
在有状态组件一定要render
和无状态组件一定要render,
在componentDidMount中,调生命周期


在create-react-app.dev/docs/proxying-api-requests-in-development

5.1安装 
5、本地环境怎么配置代码

  安装 cnpm install http-proxy-middleware -D
 cnpm install http-proxy-middleware --save
 在src新建setupProxy.js文件 (新建代理文件 src/setupProxy.js)
看文档     setupProxy
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://xxx.com',// 目标服务器
      changeOrigin: true,
    })
  );
};


重启服务器
在package.json中,
 1 开启
 2 关闭
 0
  "eslintConfig": {
    "extends": "react-app"
     "rules":{
         "eqeqeq": false
     }
  },

找eslint的文档

amiate文档变了

6.cnpm i react-router-dom -D  使用路由,必须先安装

新建views 组件名大写

无状态组件,可以服用的子组件

render是返回jsx的对象
home有10个组件,都有样式
放在一个文件中style.scss

安装异步加载组件
text一般是4个字
安装这个可以动态加载组件
react-loadable
loadable-components
安装 npm i @loadable-component  路由的赖加载
 在需要的文件去引入
import  loadable from '@loadable-component'
react 使用@loadable/component 实现路由动态懒加载

在app.js引入路由
import {  HashRouter } from 'react-dom'

在app.js引入抛出的路由
布局栅格系统
Layout

Link
现在，我们应用需要在各个页面间切换，如果使用锚点元素实现，在每次点击时，页面被重新加载，React Router提供了组件用来避免这种状况发生。当 你点击时，url会更新，组件会被重新渲染，但是页面不会重新加载
点击Link后，路由系统发生了什么？

Link 组件最终会渲染为 HTML 标签 ，它的 to、query、hash 属性会被组合在一起并渲染为 href 属性。虽然 Link 被渲染为超链接，但在内部实现上使用脚本拦截了浏览器的默认行为，然后调用了history.pushState 方法（注意，文中出现的 history 指的是通过 history 包里面的 create*History 方法创建的对象，window.history 则指定浏览器原生的 history 对象，由于有些 API 相同，不要弄混）。history 包中底层的 pushState 方法支持传入两个参数 state 和 path，在函数体内有将这两个参数传输到 createLocation 方法中，返回 location 的结构如下：
location = {
  pathname, // 当前路径，即 Link 中的 to 属性
  search, // search
  hash, // hash
  state, // state 对象
  action, // location 类型，在点击 Link 时为 PUSH，浏览器前进后退时为 POP，调用 replaceState 方法时为 REPLACE
  key, // 用于操作 sessionStorage 存取 state 对象
};


系统会将上述 location 对象作为参数传入到 TransitionTo 方法中，然后调用 window.location.hash 或者window.history.pushState() 修改了应用的 URL，这取决于你创建 history 对象的方式。同时会触发history.listen 中注册的事件监听器。
NavLink
是的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，组件的属性有

activeClassName(string)：设置选中样式，默认值为active
activeStyle(object)：当元素被选中时，为此元素添加样式
exact(bool)：为true时，只有当导致和完全匹配class和style才会应用
strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线
isActive(func)判断链接是否激活的额外逻辑的功能