初探 React 奇妙之旅：第一天揭秘基础框架搭建

前端

2024-01-14 02:17:32

前言

作为一名经验丰富的 Vue 开发者，我踏上了探索 React 的奇妙之旅。为了记录下这段旅程，我决定以每日一小时的节奏，分享我的学习心得。我将以自己对 Vue 的理解为映射，探究 React 与之的异同。

初探 React 基础

第一天：搭建基础框架

搭建 React 基础框架是迈出 React 之旅的第一步。我们将使用以下工具：

1. Create React App

Create React App 是一个命令行工具，可快速创建一个新的 React 项目，它集成了必要的配置和依赖项。

2. Tailwind CSS

Tailwind CSS 是一款流行的实用程序优先的 CSS 框架，可轻松创建响应式设计。

3. Material UI

Material UI 是一个组件库，它提供了丰富的 Material Design 组件，可显著简化 UI 开发。

搭建步骤

安装 Create React App
```
npx create-react-app my-react-app
```
安装 Tailwind CSS
```
npx tailwindcss init -p
```
安装 Material UI
```
npm install @material-ui/core
```

配置 Tailwind CSS

在 tailwind.config.js 中添加：

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

导入 Tailwind CSS 和 Material UI

在 index.css 中导入 Tailwind CSS：

@tailwind base;
@tailwind components;
@tailwind utilities;

在 App.js 中导入 Material UI：

import { ThemeProvider } from "@material-ui/core";
import { createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>Hello React!</div>
    </ThemeProvider>
  );
}