React安装篇

1.设置npm镜像代理
npm config set registry https://registry.npm.taobao.org
查看是否成功
npm config get registry
或者
npm config ls

1.安装create-react-app

安装node.js

查看node版本
node -v

全局安装create-react-app
npm install -g create-react-app

2.创建项目

e:
cd workspace/

create-react-app hello-react
注意:没有设置淘宝代理前慢如狗,设置之后快如闪电,哈哈

3.运行项目

切换到项目目录
cd hello-react
运行
npm start

4.安装prop-types
作用:类型检测
npm install --save prop-types

5.安装axios
作用:发送请求
npm install --save axios

6.安装pubsub-js
作用:发布订阅
npm install --save pubsub-js

7.安装react-router
作用:路由操作
npm install --save react-router-dom

### 如何安装 React React安装可以通过多种方式实现,其中一种流行的方法是通过工具如 Vite 来快速搭建开发环境。以下是关于如何使用 Vite 创建一个新的 React 项目的说明。 #### 使用 Vite 初始化 React 项目 Vite 是一个现代前端构建工具,能够显著提升开发体验。要创建基于 Vite 的 React 项目,请按照以下方法操作: 1. 打开终端或命令提示符,进入希望存储项目的目录。 2. 运行以下命令来初始化新项目: ```bash npm create vite@latest my-react-project --template react ``` 此处 `my-react-project` 可替换为你想要的项目名称[^1]。 3. 完成上述步骤后,切换至新建的项目文件夹: ```bash cd my-react-project ``` 4. 启动开发服务器以验证配置是否成功: ```bash npm install npm run dev ``` 此时,你应该能够在浏览器中访问默认地址(通常是 http://localhost:3000),看到由 Vite 和 React 提供的服务页面。 #### 配置路由组件 (AppRoutes) 对于更复杂的项目结构,通常需要引入路由功能以便管理多个视图之间的跳转。可以借助 React Router 实现这一目标。下面是一个简单的例子展示如何定义主路由组件 `AppRoutes` 并加载相应的模块[^2]: ```javascript import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Home from './views/Home'; import About from './views/About'; function AppRoutes() { return ( <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </Router> ); } export default AppRoutes; ``` 此代码片段展示了如何利用 React Router DOM 设置基础路径映射关系。 #### 清理旧版 Create React App 文件夹 如果你之前尝试过使用 create-react-app 构建应用,并且现在想清除其自带 Git 存储库,则可以在命令行界面输入如下指令完成清理工作: ```bash rm -rf .git ``` 这会移除当前目录下的 `.git` 文件夹及其内容,从而允许重新开始个人化的版本控制流程[^3]。 #### 更多学习资源链接 如果对集成支付网关感兴趣的话,这里有一英文文章介绍了如何结合 Stripe API、React 和 Node.js 开发电子商务网站的功能部分[^4]: [Stripe API Tutorial with React and Node.js](https://medium.com/better-programming/stripe-api-tutorial-with-react-and-node-js-1c8f2020a825)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花生糖葫芦侠

创作不易,请多多支持!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值