用 TypeScript 和 css-in-js 的方式写 react app

前言

React 是一个用于构建用户界面的 JavaScript 库，它允许你创建具有声明式、高效且灵活代码的应用程序。TypeScript 是 JavaScript 的超集，它添加了类型系统，使你可以编写更健壮、更易维护的代码。CSS-in-JS 是一种将 CSS 与 JavaScript 结合起来的样式技术，它允许你在组件中直接编写样式，从而使你的代码更加模块化和可维护。

初始化项目

首先，我们需要初始化一个新的 React 项目。我们可以使用 create-react-app 工具来快速创建一个项目。打开终端并输入以下命令：

npx create-react-app my-app --template typescript

这将创建一个新的 React 项目，并使用 TypeScript 作为模板。

添加 css-in-js 模块

接下来，我们需要添加一个 css-in-js 模块。有很多不同的 css-in-js 库可供选择，例如 styled-components、emotion、JSS 和 Aphrodite。在本教程中，我们将使用 styled-components。

在终端中输入以下命令来安装 styled-components：

npm install --save styled-components

安装完成后，在 src 目录下创建一个新的文件，命名为 App.tsx。在这个文件中，我们将导入 styled-components 并创建一个简单的组件。

import styled from "styled-components";

const App = () => {
  const Title = styled.h1`
    font-size: 1.5rem;
    text-align: center;
  `;

  return (
    <div>
      <Title>Hello World!</Title>
    </div>
  );
};

export default App;

在这个组件中，我们使用 styled-components 创建了一个名为 Title 的样式组件。这个组件是一个 h1 元素，具有我们指定的样式。然后，我们在组件中使用这个样式组件来渲染一个标题。

创建一个样式文件

现在，我们将创建一个样式文件，以便我们可以将所有样式集中在一个地方。在 src 目录下创建一个新的文件，命名为 styles.css。在这个文件中，我们将定义一些全局样式。

/* 全局样式 */

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

/* 组件样式 */

.my-component {
  background-color: red;
  color: white;
  padding: 10px;
}

在这个样式文件中，我们定义了一些全局样式，例如字体和边距。我们还定义了一个名为 my-component 的组件样式。这个样式将应用于任何具有 my-component 类的元素。

运行项目

现在，我们可以运行我们的项目了。在终端中输入以下命令：

npm start

这将启动开发服务器，你可以在浏览器中打开 http://localhost:3000 来查看你的应用程序。

结论

在本文中，我们学习了如何使用 TypeScript 和 css-in-js 的方式构建一个 React app。我们从初始化项目开始，然后添加 css-in-js 模块，最后创建了一个样式文件。在这个过程中，你学习了如何使用 TypeScript 和 css-in-js 来构建可扩展且易于维护的前端应用程序。