构建你的第一个 React 组件：从 0 到 1 发布你的 React 组件 (第 1 部分：创建基本项目)<#

**<#title>构建你的第一个 React 组件：从 0 到 1 发布你的 React 组件 (第 1 部分：创建基本项目)<#/title>**

引言

作为一名 JavaScript 开发人员，你一定遇到过在多个项目中重复编写相似组件的情况。React 组件可以帮助你有效地解决这一问题，让你创建可重用的 UI 元素。在本文中，我们将从头开始构建一个 React 组件，并将其发布到 NPM 上，以方便其他人使用。

第 1 步：搭建项目框架

1. 创建项目文件夹： 首先，创建一个新的文件夹，用于存放你的 React 组件项目。

2. 初始化 NPM 包： 打开终端，导航到你的项目文件夹，并运行以下命令：

npm init -y

3. 安装 Create React App： Create React App 是一个脚手架工具，可简化 React 项目的创建。运行以下命令：

npx create-react-app my-component

4. 进入项目文件夹： 创建完成后，进入项目文件夹：

cd my-component

第 2 步：创建组件

1. 创建组件文件： 在 src 文件夹中创建一个新的文件，命名为 MyComponent.js。

2. 编写组件代码： 在 MyComponent.js 文件中，编写以下代码：

import React from 'react';

const MyComponent = () => {
  return <h1>Hello, world!</h1>;
};

export default MyComponent;

3. 导出组件： 使用 export default 导出组件，以便其他模块可以使用它。

第 3 步：安装和配置 Babel

Babel 是一个编译器，可将 ES6 代码转换为兼容旧浏览器的 JavaScript。

1. 安装 Babel： 运行以下命令：

npm install --save-dev @babel/core @babel/preset-env

2. 创建 .babelrc 文件： 在项目根目录中创建一个名为 .babelrc 的文件，并添加以下内容：

{
  "presets": ["@babel/preset-env"]
}

3. 配置 webpack： 打开 webpack.config.js 文件，并确保以下部分已存在：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
      },
    },
  ],
}

下一步

在本指南的第二部分中，我们将介绍如何为组件编写测试、将其发布到 NPM 上，以及其他一些高级主题。敬请期待！