用 React-create-app 搭建一个如 Vue 的初始项目（ESLint，Prettier，Router）

前言

React 是一个流行的 JavaScript 库，用于构建用户界面。Vue 也是一个流行的 JavaScript 框架，用于构建用户界面。这两个框架都有自己的特点和优势，但它们都可以在 React-create-app 中使用。

本文将详细介绍如何使用 React-create-app 搭建一个类似 Vue 的初始项目，并使用 ESLint、Prettier 和 Router 等工具进行优化。如果您想快速搭建一个 React 项目并具备类似 Vue 的功能，那么本教程将为您提供详细的步骤。

步骤 1：安装依赖项

首先，我们需要安装 React-create-app。这是一个命令行工具，可以帮助您快速创建一个新的 React 项目。

npm install -g create-react-app

安装完成后，您就可以使用 create-react-app 创建一个新的 React 项目了。

create-react-app my-app

步骤 2：配置项目

创建项目后，您需要进入项目目录并安装必要的依赖项。

cd my-app
npm install

安装完成后，您需要修改一些配置文件。

在 package.json 文件中，您需要将 "scripts" 对象修改如下：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

在 .eslintrc.json 文件中，您需要添加以下内容：

{
  "extends": "eslint:recommended",
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

在 .prettierrc.json 文件中，您需要添加以下内容：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

步骤 3：添加路由

接下来，我们需要添加路由。首先，我们需要安装 react-router-dom。

npm install react-router-dom

安装完成后，您需要在 src/index.js 文件中添加以下代码：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
};

export default App;

在 src/Home.js 文件中，您需要添加以下代码：

import React from "react";

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

export default Home;

在 src/About.js 文件中，您需要添加以下代码：

import React from "react";

const About = () => {
  return (
    <div>
      <h1>About</h1>
    </div>
  );
};

export default About;

步骤 4：添加样式

最后，我们需要添加样式。首先，我们需要安装 styled-components。

npm install styled-components

安装完成后，您需要在 src/index.css 文件中添加以下代码：

body {
  font-family: sans-serif;
}

h1 {
  color: blue;
}

h2 {
  color: green;
}

p {
  color: black;
}

总结

到这里，我们就完成了一个类似 Vue 的 React 初始项目。您可以使用这个项目来构建您的 React 应用。

我希望这篇教程对您有所帮助！如果您有任何问题，请随时留言。