react项目启动

初始化项目

create-react-app脚手架安装(路由可选)

1.1 - 安装 : npm i -g create-react-app

1.2  - 初始化 vue 项目 : create-react-app 项目名称

1.3    - 项目安装过程 :

清除不需要的东西

清除 src 下面的所有代码,新建index.jsimport React from 'react'import ReactDOM from 'react-dom'import App from './App'

ReactDOM.render(, document.querySelector('#root'))

新建App.js快捷键:rcc

配置ant-design(要是用的话)

安装 : npm i antd --save

配置按需加载

安装react-app-rewired取代react-scripts,可以扩展webpack的配置,类似vue.config.js安装 : 'npm i [email protected] babel-plugin-import --save'

在package.json同级目录下新建config-overrides.js文件,写入

const { injectBabelPlugin } = require('react-app-rewired')

module.exports = function override(config, env) {  config = injectBabelPlugin([    'import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }  ], config);  return config}

在package.json中修改(启动项)为如下:"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject"  },

使用(不再需要引入路径和css)

引入组件例:import {Button} from 'antd'

你可能感兴趣的:(react项目启动)