如何搭建react框架
安装 Node.js 和 npm
确保系统中已安装 Node.js(包含 npm)。可以从 Node.js 官网 下载最新版本。安装完成后,通过以下命令验证安装是否成功:
node -v
npm -v
使用 Create React App 初始化项目
Create React App 是官方推荐的脚手架工具,可快速生成 React 项目结构。运行以下命令创建项目:
npx create-react-app my-app
其中 my-app 是项目名称,可根据需求修改。
进入项目目录并启动开发服务器
项目创建完成后,进入项目目录并启动开发服务器:
cd my-app
npm start
默认情况下,开发服务器会在 http://localhost:3000 启动,浏览器会自动打开页面。
安装必要的依赖(可选)
根据项目需求,可能需要安装额外依赖,例如路由管理库 react-router-dom:
npm install react-router-dom
项目结构说明
生成的项目主要目录结构如下:
src/: 存放源代码,包括主入口文件index.js和组件文件App.js。public/: 存放静态资源,如 HTML 模板index.html。package.json: 记录项目依赖和脚本命令。
编写自定义组件
在 src/ 目录下创建新组件文件(例如 MyComponent.js),并编写 React 组件代码:
import React from 'react';
function MyComponent() {
return <div>Hello, React!</div>;
}
export default MyComponent;
集成组件到主应用
在 App.js 中引入并使用自定义组件:
import React from 'react';
import MyComponent from './MyComponent';
function App() {
return (
<div>
<MyComponent />
</div>
);
}
export default App;
构建生产版本
完成开发后,运行以下命令生成优化后的生产版本:
npm run build
构建结果会保存在 build/ 目录中,可直接部署到服务器。







