react脚手架create-react-app 搭建自由配置的应用

一、安装

npm install -g create-react-app

 

二、创建react应用

create-react-app是全局命令来创建react项目

create-react-app my-app

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

此时生成的目录如下，但是，默认所有配置是隐藏起来的，要想自定义配置，需要运行一个命令：

npm run eject

此时会提示，该命令不可逆，是否继续，输入y，这样所有配置项就都出来了

如果出现以下错误：

This git repository has untracked files or uncommitted changes:
Remove untracked files, stash or commit any changes, and try again.

原因： git 配置问题 到安装目录 以此执行以下命令

解决方案：

//第一步
git add .
//第二步
git commit -m "init"
//第三步
npm run eject

这样就生成的新的结构目录,主要是增加config 和scripts packjage文件也发生了变化

my-app
├── README.md
├── node_modules
├── config
│  ├──env.js
│   ├──paths.js
│   ├──webpack.config.js
│  ├──webpackDevServer.config.js
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── scripts
│   ├── build.js
│   ├── start.js
│   └── test.js
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

运行之后，如果出现

Cannot find module '@babel/plugin-transform-react-jsx' 安装之后 会继续出现 

Cannot find module '@babel/plugin-transform-react-jsx-source'

yarn add 对应的模块即可