从零搭建React项目全家桶

2020-04-20

创建React-APP

设置npm为淘宝镜像源

1	npm config set registry http://registry.npm.taobao.org/

通过官方的create-react-app，找个喜欢的目录，执行

1	npx create-react-app react-app

进入项目目录，并启动项目

1 2	cd react-app yarn start

启动后，通过一下地址访问项目：

1	http://localhost:3000/

精简项目

删除文件

删除一般项目中不需要用到得文件，最简化项目

简化代码

src/App.js代码精简如下

import React from 'react'

function App(){
    return(
        <div className='App'>
            <h1>This is React App.</h1>
        </div>
    )
}

export default App

src/index.js代码简化如下

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />,document.getElementById('root'))

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

使用Fragment去掉组件外部标签

react要求每个组件html的最外层都必须是由一个标签包裹，且不能存在并列的标签。例如，在src/App.js中，如果是这样就会报错

// 以下代码将会报错，最外层不能存在并列的标签。
 function App() {
  return (
    <div className="App">
      <h1>This is React App.</h1>
    </div>
    <div className="App-other">
      <h1>This is React App-other.</h1>
    </div>
  )
}

如果确定需要这样的html,并且不想添加一个父级标签，可以使用Fragment作为最外层。代码修改如下

import React, { Fragment } from 'react'

    function App() {
        return (
           <Fragment>
                <div className="App">
                    <h1>This is React App.</h1>
                </div>
                <div className="App-other">
                    <h1>This is React App-ohter.</h1>
                </div>
          </Fragment>
        )
    }

    export default App

以上仅仅为了说明Fragment的使用效果，在某些组件嵌套的使用场景下，非常适合使用Fragment,例如父组件是<table>，而子组件可以使用<Fragment>包裹多个<tr>

项目目录结构

引入全局公用样式

在frame.css里引入其他公同样式：src/common/style/frame.css

1 2	@import './reset.css'; @import './global.css';

然后在src/index.js里引入frame.css

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './common/style/frame.css'

ReactDOM.render(<App />,document.getElementById('root'))

支持Sass/Less/Stylus

create-react-app默认情况下为暴露配置文件，要更灵活的配置项目，需要将配置文件暴露出来。
执行一下命令暴露配置文件。
执行以下命令，暴露配置文件：

※注意：暴露配置的文件的操作不可逆！
npm run eject
如果之前没有提及git的话，可能会报以下错误：

Remove untracked files, stash or commit any changes, and try again
需要先在项目根目录下执行：
git add . git commit -m "初始化项目(备注)"
稍等片刻，eject成功，目录变化如下：

支持Sass/Scss

eject后，虽然package.json以及webpack.config.js里有了sass相关代码，但是要正确使用Sass/Scss，还要再安装node-sass。

1	npm install node-sass --save-dev

报错采用

1	npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

安装完成后，项目已支持Sass/Scss，可以将原css文件后缀名修改为sacc/scss，别忘了把src/index.js中引入的frame.css后缀名修改为sacc/scss。

支持Less

支持Less稍微多一点步骤，首先安装less和less-loader：

运行 Git Bash 提示错误信息

Failed to fork child process: No such file or directory.
1
解决
重启电脑。

创建react项目报错

1	internal/models/cjs/loader.js:584