react搭建项目

本文主要是介绍react搭建项目，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.npm install create-react-app -g
2.create-react-app demo  (demo为项目名)
3.cd demo   
4.npm install
5.npm start     //运行

public里面的文件：

    favicon.ico即为html的ico 图标，可以替换
    manifest.json，是app的配置文件，设置icons，首页路径等；

src文件夹：

    index.js 是入口文件
    App.js是最大的组件App
    registerserviceworker.js 用来做资源离线的缓存，registerServiceWorker注册的service worker 只在生产环境(正式环境)中生效。

常用命令

    npm start 启动项目，在 http://localhost:3000查看项目运行
    npm run build 项目打包，生成build文件夹
    npm run eject弹出配置文件，用于修改默认的配置，操作不可逆
    npm test --测试

安装Ant Design

　　npm install antd --save  或者 cnpm install antd-mobile --save

　　npm install react-app-rewired --save-dev
配置 package.json

　　"scripts": {
            "start": "react-app-rewired start",
            "build": "react-app-rewired build",
            "test": "react-app-rewired test",
            "eject": "react-scripts eject"
        }

项目根目录创建一个 config-overrides.js 用于修改默认配置

　　由于引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，还需要安装 customize-cra，否则会出现问题。

　　npm install customize-cra --save-dev

　　npm install less-loader less --save-dev

　　cnpm install --save-dev react-app-rewire-less

　　const {
    　　override,
    　　fixBabelImports,
    　　addLessLoader,
  　 } = require("customize-cra");
 
 
  　module.exports = override(
    　　fixBabelImports("import", {
      　  libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
     }),
     addLessLoader({
       javascriptEnabled: true,
       modifyVars: { "@primary-color": "#1DA57A" }
     })
   )

如果启动报Cannot find package 'babel-plugin-import'错误，则说明axios所需的插件没有装上，需安装

　　npm install axios qs --save

　　npm install antd babel-plugin-import --save

这篇关于react搭建项目的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！