首页手记 Craco.js项目实战：从入门到简单应用

Craco.js项目实战：从入门到简单应用

标签：

JavaScript 前端工具 React.JS

概述

Craco.js项目实战涵盖了从安装配置到实战操作的全过程，详细介绍如何使用Craco.js增强和扩展React项目的构建流程。文章还通过一个简单的CRUD应用实例，展示了如何在实际项目中应用Craco.js的各项功能。此外，文章还介绍了Craco.js插件的使用方法和如何扩展其配置以支持更多功能。

Craco.js简介与安装

Craco.js是一个构建工具，专门为React应用设计，用于增强和扩展Create React App（CRA）的配置。Craco.js允许开发者自由地修改构建过程中的配置，如修改Webpack加载器、添加别名等，而无需担心破坏CRA的基础配置。

什么是Craco.js

Craco.js本身是基于Create React App的一个构建工具，它提供了一个灵活的配置接口，用于调整CRA的构建流程。这使得开发者能够更自由地定制自己的开发环境，满足项目特定的需求。Craco.js提供了丰富的插件生态系统，能够帮助开发者轻松地扩展和修改CRA的构建配置。

Craco.js的优势

Craco.js提供了一系列优点，使其成为开发React应用时的首选工具：

灵活性：Craco.js允许开发者通过配置文件调整Webpack加载器、别名、环境变量等，提供了极大的灵活性。
兼容性：Craco.js完全兼容Create React App生态，这意味着你可以继续使用CRA的所有优点，而无需破坏现有的项目结构。
易于学习和使用：Craco.js的文档详尽，社区活跃，使得学习和使用都非常直接。
插件生态：Craco.js支持多种插件，可以用于实现复杂的功能，如代码分割、热重载等。
社区支持：Craco.js拥有一个活跃的社区，开发者可以寻求帮助或贡献自己的插件。

如何使用npm或yarn安装Craco.js

安装Craco.js非常简单，可以通过npm或yarn进行安装。下面分别介绍了两种安装方法：

使用npm安装：
```
npm install craco@latest
```
使用yarn安装：
```
yarn add craco@latest
```

在安装完成后，你需要在项目中配置Craco.js。首先，在项目根目录中创建一个craco.config.js文件，该文件将用于配置Craco.js的各项设置。

module.exports = {
  /* 配置项 */
};

接下来，在项目的package.json文件中，将start、build和test命令指向Craco.js，如下所示：

{
  "name": "your-project-name",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "craco": "latest"
  }
}

通过上述步骤，你可以成功地将Craco.js集成到你的React项目中，从而开始自定义构建流程。

配置Craco.js项目

配置Craco.js项目是一项基础但至关重要的任务，它决定了项目的构建流程和开发体验。以下部分将详细介绍如何初始化一个React项目，集成Craco.js，并进行基本配置。

初始化一个React项目

首先，确保你已经安装了Node.js和npm或yarn。接下来，使用Create React App（CRA）创建一个新的React项目：

npx create-react-app my-app
cd my-app

此命令将会初始化一个新的React项目，并安装基本的依赖包。项目初始化完成后，你需要进入项目目录并安装Craco.js。

在项目中集成Craco.js

在项目根目录下，运行以下命令来安装Craco.js：

npm install craco@latest

或者使用yarn：

yarn add craco@latest

安装完成后，你需要修改package.json文件中的脚本来指向Craco.js。将start、build和test命令指向Craco.js，如下所示：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "craco": "latest"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

在项目根目录创建一个craco.config.js文件，用于配置Craco.js：

module.exports = {
  webpack: {
    configure: {
      resolve: {
        alias: {
          "@": "/src" // 添加项目路径别名
        }
      }
    }
  },
  style: {
    modules: true // 启用CSS Modules
  }
};

基本配置详解

通过上述步骤，你已经成功地将Craco.js集成到了你的项目中。接下来，我们将详细介绍一些基本配置项，以进一步定制你的构建流程。

修改CSS加载器

Craco.js允许你修改Webpack中使用的CSS加载器。例如，你可以更改CSS模块的后缀名，或调整CSS Loader的配置。以下是一个修改CSS加载器的例子：

module.exports = {
  webpack: {
    configure: {
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              {
                loader: "style-loader"
              },
              {
                loader: "css-loader",
                options: {
                  importLoaders: 1,
                  modules: {
                    localIdentName: "[name]__[local]--[hash:base64:5]"
                  }
                }
              },
              {
                loader: "postcss-loader"
              }
            ]
          }
        ]
      }
    }
  }
};

添加别名

别名可以帮助你简化项目中的模块引用路径。在craco.config.js文件中，你可以通过webpack.configure.resolve.alias来添加别名。

const path = require('path');

module.exports = {
  webpack: {
    configure: {
      resolve: {
        alias: {
          "@components": path.resolve(__dirname, "src/components"), // 示例别名
          "@styles": path.resolve(__dirname, "src/assets/styles")  // 示例别名
        }
      }
    }
  }
};

别名的设置可以极大地简化代码开发中对于路径的引用，使得代码更加简洁易懂。

使用Craco.js进行样式处理

在React项目中，样式处理是开发过程中一个非常重要的环节。Craco.js提供了强大的功能来帮助你有效地管理样式的加载、分割和模块化。下面我们将详细介绍如何使用Craco.js进行全局样式、组件样式、以及CSS Modules的处理。

如何处理全局样式

全局样式通常应用于整个应用的公共部分。例如，你可以使用全局样式来定义按钮的默认样式，或者设置整个应用的字体和颜色。使用Craco.js处理全局样式，你可以将样式文件放在项目的指定目录中，然后通过配置来加载这些全局样式。

首先，在项目的public目录下创建一个全局样式文件，例如global.css：

/* public/global.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

button {
  padding: 10px 20px;
  font-size: 16px;
}

然后，你可以在craco.config.js文件中配置Craco.js来加载这个全局样式文件：

module.exports = {
  webpack: {
    configure: {
      module: {
        rules: [
          {
            test: /\.css$/,
            include: /global.css$/,
            use: ["style-loader", "css-loader"]
          }
        ]
      }
    }
  }
};

这样，Craco.js会将public/global.css文件加载到你的应用中，并应用到整个应用的全局范围内。通过这种方式，你可以轻松地管理全局样式，确保所有组件都遵循统一的样式规范。

组件样式与CSS-in-JS

CSS-in-JS是一种将CSS样式直接写入JS文件中的方法，它允许你动态地修改样式，非常适合React组件的开发。使用Craco.js，你可以通过配置来引入CSS-in-JS库，如styled-components或emotion。

首先，安装你需要的CSS-in-JS库，例如styled-components：

npm install styled-components

或者使用yarn：

yarn add styled-components

然后，在组件文件中使用styled-components定义样式：

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;

function App() {
  return (
    <div>
      <Button>Click Me</Button>
    </div>
  );
}

export default App;

通过这种方式，你可以利用CSS-in-JS的优势，实现更强大、更灵活的样式管理。

处理CSS Modules

CSS Modules是一种将CSS文件与特定组件绑定的技术，它可以避免全局样式命名冲突的问题。Craco.js提供了内置的支持来处理CSS Modules，使得你可以轻松地将它们集成到你的项目中。

首先，在组件目录中创建一个新的CSS文件，并将其命名为MyComponent.module.css：

/* src/components/MyComponent.module.css */
.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

然后，在组件文件中导入并使用这个CSS模块：

import React from 'react';
import styles from './MyComponent.module.css';

function MyComponent() {
  return (
    <div>
      <button className={styles.button}>Click Me</button>
    </div>
  );
}

export default MyComponent;

通过这种方式，你可以在组件范围内管理样式，确保样式不会影响到其他组件。这使得你的样式代码更加模块化和易于维护。

动手实践：创建一个简单的CRUD应用

为了更好地理解如何使用Craco.js构建React应用，我们将通过一个简单的CRUD（创建、读取、更新、删除）应用来实践。这个应用将包括添加、编辑、删除和显示数据的功能。下面将详细介绍如何准备项目、添加CRUD功能和进行样式与布局设计。

准备工作

在开始编码之前，我们需要先进行一些准备工作，包括设置路由、状态管理和样式方案。

设置路由

为了实现CRUD应用的导航功能，我们将使用React Router来设置路由。首先，安装React Router：

npm install react-router-dom

或者使用yarn：

yarn add react-router-dom

然后，在项目中创建一个路由组件，例如AppRouter.js：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import CreateItem from './CreateItem';
import ItemList from './ItemList';
import EditItem from './EditItem';
import DeleteItem from './DeleteItem';

function AppRouter() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/create">Create Item</Link>
            </li>
            <li>
              <Link to="/list">List Items</Link>
            </li>
            <li>
              <Link to="/edit/:id">Edit Item</Link>
            </li>
            <li>
              <Link to="/delete/:id">Delete Item</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/" component={ItemList} />
          <Route path="/create" component={CreateItem} />
          <Route path="/list" component={ItemList} />
          <Route path="/edit/:id" component={EditItem} />
          <Route path="/delete/:id" component={DeleteItem} />
        </Switch>
      </div>
    </Router>
  );
}

export default AppRouter;

这个AppRouter组件定义了几个路由，分别对应不同的CRUD操作。

状态管理

为了管理CRUD操作的数据，我们将使用React的状态来存储和更新数据。我们可以在主组件中创建一个状态来管理当前数据。例如，在ItemList.js中：

import React, { useState } from 'react';

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ]);

  const handleAddItem = (newItem) => {
    setItems([...items, newItem]);
  };

  return (
    <div>
      <h1>Item List</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <CreateItem onAddItem={handleAddItem} />
      <EditItem />
      <DeleteItem />
    </div>
  );
}

export default ItemList;

添加样式与布局

为应用添加适当的样式和布局可以帮助提升用户体验。首先，在项目的src目录下创建一个App.css文件来存放全局样式：

/* src/App.css */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
}

nav ul li a:hover {
  color: #666;
}

然后，在App.js中引入并使用这个样式文件：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <AppRouter />
    </div>
  );
}

export default App;

这样，你就可以为应用添加基本的布局和样式。

添加CRUD功能

接下来，我们将实现CRUD操作的具体功能。我们将在每个路由组件中分别实现这些功能。

创建Item

在CreateItem.js中，我们将实现一个表单来创建新的item：

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

function CreateItem({ onAddItem }) {
  const [name, setName] = useState('');
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    const newItem = {
      id: Date.now(),
      name
    };
    onAddItem(newItem);
    setName('');
    navigate('/list');
  };

  return (
    <div>
      <h1>Create Item</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            id="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <button type="submit">Create</button>
      </form>
    </div>
  );
}

export default CreateItem;

列出Items

在ItemList.js中，我们将列出所有的item：

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import CreateItem from './CreateItem';
import EditItem from './EditItem';
import DeleteItem from './DeleteItem';

function ItemList() {
  const [items, setItems] = useState([]);
  const { id } = useParams();

  useEffect(() => {
    setItems([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]);
  }, [id]);

  const handleDelete = (itemId) => {
    setItems(items.filter((item) => item.id !== itemId));
  };

  return (
    <div>
      <h1>Item List</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.name}
            <EditItem id={item.id} />
            <DeleteItem id={item.id} onDelete={handleDelete} />
          </li>
        ))}
      </ul>
      <CreateItem onAddItem={(newItem) => setItems([...items, newItem])} />
    </div>
  );
}

export default ItemList;

编辑Item

在EditItem.js中，我们将实现一个表单来编辑已有的item：

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useParams } from 'react-router-dom';

function EditItem({ id, onDelete }) {
  const [name, setName] = useState('');
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    const updatedItem = { id, name };
    // 更新父组件状态中对应的item
    // 假设这里有一个方法来更新父组件状态
    // updateParentState(updatedItem);
    setName('');
    navigate('/list');
  };

  useEffect(() => {
    const item = items.find((item) => item.id === id);
    setName(item ? item.name : '');
  }, [id, items]);

  return (
    <div>
      <h1>Edit Item</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            id="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <button type="submit">Save</button>
      </form>
    </div>
  );
}

export default EditItem;

删除Item

在DeleteItem.js中，我们将实现删除已有的item功能：

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useParams } from 'react-router-dom';

function DeleteItem({ id, onDelete }) {
  const navigate = useNavigate();

  const handleDelete = () => {
    onDelete(id);
    navigate('/list');
  };

  return (
    <div>
      <h1>Delete Item</h1>
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
}

export default DeleteItem;

通过这些组件和路由设置，你已经实现了一个基本的CRUD操作，可以创建、读取、更新和删除数据。

Craco.js插件与扩展

Craco.js的一个强大功能是它支持使用插件来扩展和增强其配置能力。这使得你可以根据项目需求添加自定义的构建功能。以下部分将详细介绍如何安装和使用Craco插件，以及如何扩展其配置以支持更多功能。

安装与使用Craco插件

Craco.js的插件是通过npm包提供，你可以通过npm或yarn来安装这些插件。以下是一些常用的插件及其安装方法：

`craco-plugin-alias`

craco-plugin-alias插件允许你在项目中设置更多别名，简化代码路径引用。

安装方法：

npm install craco-plugin-alias

或者使用yarn：

yarn add craco-plugin-alias

安装后，你需要在craco.config.js文件中配置该插件：

module.exports = {
  plugins: [
    {
      plugin: require("craco-plugin-alias"),
      options: {
        alias: {
          "@components": path.resolve(__dirname, "src/components"),
          "@styles": path.resolve(__dirname, "src/assets/styles")
        }
      }
    }
  ]
};

`craco-plugin-babel`

craco-plugin-babel插件允许你自定义Babel配置，以支持更多的JavaScript特性。

安装方法：

npm install craco-plugin-babel

或者使用yarn：

yarn add craco-plugin-babel

安装后，配置插件：

module.exports = {
  plugins: [
    {
      plugin: require("craco-plugin-babel"),
      options: {
        babelLoaderOptions: {
          presets: ["@babel/preset-react", "@babel/preset-env"]
        }
      }
    }
  ]
};

`craco-plugin-env-variables`

craco-plugin-env-variables插件允许你在构建过程中设置环境变量，例如process.env.NODE_ENV。

安装方法：

npm install craco-plugin-env-variables

或者使用yarn：

yarn add craco-plugin-env-variables

安装后，配置插件：

module.exports = {
  plugins: [
    {
      plugin: require("craco-plugin-env-variables"),
      options: {
        envVariables: {
          NODE_ENV: process.env.NODE_ENV
        }
      }
    }
  ]
};

`craco-plugin-sass`

craco-plugin-sass插件允许你在项目中使用Sass预处理器。

安装方法：

npm install craco-plugin-sass

或者使用yarn：

yarn add craco-plugin-sass

安装后，配置插件：

module.exports = {
  plugins: [
    {
      plugin: require("craco-plugin-sass"),
      options: {
        sassLoaderOptions: {
          // 配置Sass加载器选项
        }
      }
    }
  ]
};

扩展Craco的配置以支持更多功能

除了使用插件外，你还可以通过修改craco.config.js文件直接扩展Craco的配置，以支持更多功能。以下是一些常见的配置扩展示例：

代码分割

代码分割是一种将应用代码分割成多个小文件的技术，允许用户按需加载代码，从而提高加载速度。你可以在craco.config.js文件中配置代码分割：

module.exports = {
  webpack: {
    configure: (webpackConfig, { paths }) => {
      webpackConfig.optimization = {
        runtimeChunk: "single",
        splitChunks: {
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name: "vendors",
              chunks: "all"
            }
          }
        }
      };

      return webpackConfig;
    }
  }
};

使用环境变量

环境变量是常见的配置项，用于在不同的环境中（如开发、测试、生产）使用不同的配置。你可以在craco.config.js中使用环境变量：

module.exports = {
  webpack: {
    configure: (webpackConfig, { paths }) => {
      webpackConfig.resolve = {
        alias: {
          "@env": path.resolve(__dirname, ".env")
        }
      };

      return webpackConfig;
    }
  }
};

配置热重载

热重载使你在开发过程中无需刷新浏览器即可看到代码更改。你可以在craco.config.js中配置热重载：

module.exports = {
  webpack: {
    configure: (webpackConfig, { paths }) => {
      webpackConfig.devServer = {
        hot: true,
        hotOnly: true
      };

      return webpackConfig;
    }
  }
};

这些配置示例展示了如何扩展Craco的配置以支持更多功能。通过这些配置，你可以使你的React应用更加灵活和高效。

测试与部署

测试和部署是确保应用质量和稳定性的关键步骤。以下部分将介绍如何进行项目测试和部署，包括单元测试、端到端测试以及如何将应用部署到GitHub Pages或其他在线服务。

项目测试方法

测试是确保应用稳定性和可靠性的关键步骤，主要有两种测试类型：单元测试和端到端测试（E2E测试）。

单元测试

单元测试是测试应用程序的基本单元（如函数、组件）是否按预期工作。我们将使用Jest和React Testing Library来编写单元测试。

安装测试工具：

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

或者使用yarn：

yarn add --dev jest @testing-library/react @testing-library/jest-dom

在src目录下创建一个测试文件，例如App.test.js：

import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

执行单元测试：

npx jest

端到端测试

端到端测试是模拟用户在应用中的操作，以确保整个流程按预期工作。我们使用Cypress进行端到端测试。

安装Cypress：

npx cypress install

创建一个测试文件，例如cypress/integration/first-test.spec.js：

describe('First Test', () => {
  it('should visit the homepage', () => {
    cy.visit('/');
    cy.contains('Item List');
  });
});

运行端到端测试：

npx cypress open

通过这些测试方法，你可以确保应用在不同环境下的稳定性和可靠性。

部署到GitHub Pages或其他在线服务

部署是将应用发布到生产环境的过程。这里我们介绍如何将应用部署到GitHub Pages或其他在线服务。

部署到GitHub Pages

配置GitHub Actions：在项目根目录下创建一个.github/workflows/deploy.yml文件，配置GitHub Actions以自动化部署：

name: Deploy to GitHub Pages
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14.x'
    - name: Install dependencies
      run: npm ci
    - name: Build project
      run: npm run build
    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        deploy_key: ${{ secrets.GITHUB_PAGES_DEPLOY_KEY }}
        publish_dir: ./build

设置环境变量：在GitHub仓库设置中添加GITHUB_PAGES_DEPLOY_KEY环境变量，用于部署密钥。
推送到GitHub：将项目代码推送到GitHub，并触发GitHub Actions进行自动部署。

部署到其他在线服务

除了GitHub Pages，你还可以选择其他在线服务来部署React应用，例如Netlify、Vercel等。这里以Netlify为例：

安装Netlify CLI：
```
npm install -g netlify-cli
```
配置Netlify：运行netlify init，按照提示完成设置。
构建应用：运行npm run build。
部署应用：运行netlify deploy，将构建好的应用部署到Netlify。

通过这些步骤，你可以将应用部署到各种在线服务，使你的应用能够被用户访问。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕姐8265434

手记
篇

粉丝

222

获赞与收藏

1065

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 312438 2198

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Craco.js项目实战：从入门到简单应用

Craco.js简介与安装

什么是Craco.js

Craco.js的优势

如何使用npm或yarn安装Craco.js

配置Craco.js项目

初始化一个React项目

在项目中集成Craco.js

基本配置详解

修改CSS加载器

添加别名

使用Craco.js进行样式处理

如何处理全局样式

组件样式与CSS-in-JS

处理CSS Modules

动手实践：创建一个简单的CRUD应用

准备工作

设置路由

状态管理

添加样式与布局

添加CRUD功能

创建Item

列出Items

编辑Item

删除Item

Craco.js插件与扩展

安装与使用Craco插件

craco-plugin-alias

craco-plugin-babel

craco-plugin-env-variables

craco-plugin-sass

扩展Craco的配置以支持更多功能

代码分割

使用环境变量

配置热重载

测试与部署

项目测试方法

单元测试

端到端测试

部署到GitHub Pages或其他在线服务

部署到GitHub Pages

部署到其他在线服务

阅读免费教程

`craco-plugin-alias`

`craco-plugin-babel`

`craco-plugin-env-variables`

`craco-plugin-sass`