创建React项目(新手小白篇)

开发小白，本篇主要记录创建React项目时遇到的问题及其解决方法。
React版本:18.3.1

  React.js 是一个由 Facebook 开发的 JavaScript 库，用于构建用户界面。它是一个用于构建交互式的、可重用的 UI 组件的开源库。React 主要用于构建单页面应用(SPA)，但也可以与其他 JavaScript 库和框架集成，用于开发更复杂的应用程序。

1.React项目创建

1.1 安装node.js

  关于node.js的安装这里不做介绍。可以根据自己的系统在网上找到资料。node.js安装完成之后，可以使用下列命令校验是否安装成功。如果命令返回node.js的版本号，则安装成功。

node -v

1.2 安装create-react-app

  创建React新项目有多种方法，其中一种常见的方法是使用Facebook官方发布的create-react-app快速脚手架工具。可以使用npm指令对其进行快速安装：

npm install -g create-react-app

  上述指令中的-g意味这全局安装(即任何地方都可以使用)， 不添加-g则会局部安装，仅当前目前可用。全局安装和非全局安装在后续使用上会有些区别。

1.3 创建项目

  create-react-app安装完成之后，即可使用该工具创建项目。具体命令如下：

#全局安装模式下
create-react-app my-app
#非全局安装模式下
npx create-react-app my-app --template typescript

其中--template指令可以制定项目的编程语言，这里使用typescript。若不设置该指令，则默认使用javascript语言。
  命令执行完成之后，会生成一个名为my-app的文件夹。这里主要介绍一下src目录中的几个文件：

• index.tsx：这是你的React应用的入口文件。当你运行你的应用时，Webpack将从这个文件开始打包你的代码。
• App.tsx：这通常是你的主React组件。它通常会被导入到index.js或index.tsx中，并作为根组件被渲染。

至此，新的React项目已经完成(一般不会遇到什么问题)。执行如下命令：

cd my-app #项目所在目录
npm start

接着打开http://localhost:3000(默认端口为3000，可修改)即可打开官方提供的案例项目。

2 运行React项目

  搭建一个React简单的项目案例：利用react、echarts和echarts-for-react构建一个简单的可视化图表展示页面。

2.1 相关包的安装

接着使用npm install命令安装echarts和echarts-for-react。具体命令如下：

npm install echarts
npm install echarts-for-react
npm install recoil #如果不再创建项目的时候使用--template设定为typescript语言，这个包可能无法正确安装。

2.2 编写相关代码

  现在src目录下创建一个文件夹components存放组件Page的定义。其代码如下:
components/Page.tsx

import React from 'react';
import ReactECharts from 'echarts-for-react';

const Page: React.FC = () => {
  const options = {
    grid: { top: 8, right: 8, bottom: 24, left: 36 },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
  };
  return <ReactECharts option={options} />;
};
export default Page;

App.tsx

import React from 'react';
import Page from "./components/page";

function App() {
    return (
        <div>
          <Page />
        </div>
    );
  }
  export default App;

修改index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { RecoilRoot } from "recoil"
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode> 
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
);

2.3 运行项目

代码编写完成之后，使用npm start运行命令，并打开https://localhost:3000即可看到所画的图。