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

本文主要是介绍创建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>
);