react脚手架（create-react-app）

史学娇

已于 2022-11-18 09:55:49 修改

阅读量1.1k

点赞数

分类专栏： react 文章标签： react.js

于 2022-04-20 16:33:57 首次发布

本文链接：https://blog.csdn.net/weixin_46151381/article/details/124300618

版权

react 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1 开始

npx create-react-app my-app//执行后自动安装依赖包（需要node>=14）
npm start//启动：在内存中生成打包文件；启动服务器运行内存中的打包文件
npm run build//生产环境下打包 React：在内存中/本地生成打包文件；
npm run eject//暴露配置文件，一旦你执行 eject 命令，将无法撤销

npm i create-react-app -g//全局安装
create-react-app xxx //创建项目

问题：Cannot find module 'react-scripts/package.json'

解决：执行npm run eject后，会删除react-scripts，重新安装一下即可。

2 文件结构

public/index.html—— 页面模版；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <!-- %PUBLIC_URL%代表public文件夹的路径 -->
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <!-- 引入bootstrap -->
  <link rel="stylesheet" href="/css/bootstrap.css">

  <title>React App</title>
  <style>
    .demo{
      background-color: rgb(209, 137, 4) !important;
      color: white !important;
    }
  </style>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

</body>

</html>

问题：to改为二级路由后刷新：找不到bootstrap文件，找public/index.html

解决：改为绝对路径：public(React)或者/(常用)

改为HashRouter（少见）

src/index.js —— JavaScript 入口文件。

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

src/App.jsx —— App组件

//默认暴露和分别暴露可以同时使用
import React, { Component } from 'react'
// 防止不同组件中的相同类名冲突
import hello from './testCss.module.css'
//引入样式用import；引入.js  .jsx 可以省略文件后缀，index文件也可以省略

export default class App extends Component {
  render() {
    return (
      <div className={hello.title}>
        app组件
      </div>
    )
  }
}

src/setupProxy.js —— 代理配置

监视拦截请求，转发请求。只能在开发时使用。

const proxy = require('http-proxy-middleware');
/*
  changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
  changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
  changeOrigin默认值为false，但我们一般将changeOrigin值设为true
*/
module.exports = function (app) {
  app.use(//可以配置多个代理
    proxy('/api1', {
        target: 'http://localhost:5000',
        changeOrigin: true,
        pathRewrite:{'^api1':''}
    }),
    proxy('/api2', {//api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
        target: 'http://localhost:5001',//服务器地址
        changeOrigin: true,//服务器接收到的请求头中host字段的值
        pathRewrite:{'^api2':''}//去除请求前缀，保证交给后台服务器的是正常请求地址
    }),
  )
}

3 环境变量

注意：react-scripts的版本需要高于0.2.3。

3.1 定义

.env.development/.env.test/.env.production文件中定义

REACT_APP_URL=http://www.baidu.com:8080

3.2 读取

process.env.NODE_ENV （默认）

process.env.REACT_APP_URL（自定义）

命令及变量的对应关系

npm start：NODE_ENV 值为'development'；.env.development文件中读取变量。

npm test：NODE_ENV 值为'test'；.env.test文件中读取变量。

npm run build：NODE_ENV 值为'production'；.env.production文件中读取变量。

4 样式

4.1 CSS Modules

基本用法如下：

react组件样式覆盖问题_史学娇的博客-CSDN博客

如果需要使用sass：

 npm install node-sass --save

4.2 CSS Reset

在CSS文件中的任意位置添加 @import-normalize;。只需添加一次，重复的引入会被自动删除。

@import-normalize;

4.3 图片引入

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}
export default Header;