React从0到1快速搭建项目

已于 2023-07-17 16:37:03 修改
阅读量204 收藏
点赞数
分类专栏： React从0到1开发项目 文章标签： react.js 前端 前端框架
于 2023-07-17 11:44:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63021947/article/details/131762295
版权

目录

一、安装node.js

 二、安装webpack

三、安装create-react-app

四、创建项目目录并cd进入创建项目

五、vscode打开对应文件

六、新建终端并执行npm run start启动项目

一、安装node.js

官网下载地址：Node.js

下载完成后一直点击下一步，直至安装完成

安装完成后检查版本：node -v；npm -v

如果出现对应版本号说明安装成功

 二、安装webpack
npm install -g webpack

 安装完成后检查版本：npm webpack -v

三、安装create-react-app
npm install -g create-react-app
四、创建项目目录并cd进入创建项目

回车等待项目创建完毕后用vscode打开

五、vscode打开对应文件

六、新建终端并执行npm run start启动项目

今天也要爱小姜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
REACT实战项目从0到1搭建（仅供参考）
不怕麻烦的鹿丸的博客
12-06 2万+
按照。
从0到1构建react完整项目2022最新无坑版
franktaoge的博客
11-04 2242
React全家桶搭建，2022最新无坑版本
react-一步一步搭建一个react项目环境
08-14
这个仓库我将会记录如何从零到一搭建出一个基于react和webpack的项目的开发环境，算是对自己工作以及学习的一种记录，同时也希望可以帮助到一些希望自己搭建项目却不知如何下手的同学。
react_start:快速搭建react项目 cms
05-06
react_start 介绍 react_start 后台管理系统 react_start 基于react-router4、redux This project was bootstrapped with . Below you will find some information on how to perform common tasks. You can find the most recent version of this guide . 项目结构 ├── build # 项目打包输出目录 │   └── ... ├── config # 配置文件 │   └── ... ├── public │   ├── favicon.ico │   └── ind
搭建React项目
tian19920813的博客
03-14 776
创建一个新文件夹my-react-app，并在该文件夹下使用终端创建项目my-react-app。暴露webpack配置，此操作不可撤销，请按需要操作。react项目默认隐藏了webpack相关配置，执行。在src下新建文件src/api/http.ts。在页面上看到欢迎按钮，引入成功。此时，项目已经创建完成，运行。
快速搭建react
github_39088222的博客
09-21 2631
如今开始学习react觉得还是很有必要的，首先需要安装node和npm。 1.安装creat-react-app cli npm install -g create-react-app 2.创建工程 create-react-app react-seed 然后进入项目根目录react-seed安装相关依赖 cd react-seed npm install 3.暴露配置项 由于采用creat...
快速创建 react 项目
君非道的博客
10-27 329
使用Create React App脚手架快速搭建react项目，搭建之前请确保安装了nodejs和npm 打开cmd或者bash等命令行，进入到你要创建项目的文件夹，执行下面命令，然后耐心等待 npx create-react-app my-test // my-test是项目名称，可以修改成你想要的名字 当出现下面命令时就说明项目创建成功 这个时候可以看到文件夹中已经有了这个项目 执行cd my-test进入项目文件夹，我是在D盘的react文件夹里创建项目的，此时看路径已经进来，可以看到后面有个
如何创建一个 react 项目
热门推荐
青蛙king的博客
12-17 3万+
前言 构建React项目的几种方式： create-react-app 脚手架快速搭建 react 项目（推荐）。 generator-react-webpack 脚手架搭建 react 项目。 webpack 一步一步构建 react 项目。 一、create-react-app 脚手架快速搭建 react 项目 要求：Node>=8.10 并且 npm>=5.6 1、安装 create-react-app npm install -g create-react-app .
React 从 0 到 1 搭建项目
m0_52775179的博客
07-24 335
input type="password" className="form-control" id="exampleInputPassword1" placeholder="输入密码">3.AOP 面向切面编程(vue.js react ,提供一种生命周期,这些函数就称之为钩子函数,钩子函数的作用就是为了扩充产品的能力,vue暴露钩子函数开放接口给用户,用户可以使用,然后去特定的执行)react-hooks hooks称为钩子,钩子函数是一种编程的思想,我们称之为 面向切面编程。
React创建项目
qq_59076775的博客
04-01 4885
React项目的创建
react总结之react创建项目
粥可温
08-31 296
1. 首先打开cmd命令行，全局安装react脚手架 npm i -g create-react-app
React脚手架，用于快速搭建React项目
06-04
React脚手架，用于快速搭建React项目
React入门案例项目，用于快速搭建React项目
最新发布
06-04
React入门案例项目，用于快速搭建React项目
React Native 快速搭建商城项目基础结构帖子附件代码
11-15
React Native 快速搭建商城项目基础结构帖子附件代码，下载此代码配合帖子流程，可以在搭建React Native 商城项目或者其他项目搭建的时候快速建成！
React脚手架搭建实战项目
11-01
IT培训机构原创视频，真实上课环境现场录制，通过该视频可实现利用React脚手架搭建项目。 React脚手架和Vue脚手架类似，都是用来帮助程序员快速创建一个基于React的模板项目
快速搭建React
weixin_34403976的博客
03-29 241
快速搭建React 搭建一个 React 的 HelloWorld 并不需要你安装了webpack,下面的命令会帮你一件部署，但是你需要有node环境来实现一些基础命令，比如yarn,npx 有了npx搭建一个react环境只需2步： 描述：1.创建 语法：create-react-app npx create-react-app my-app 描述：2.启动 语法：npm start ...
快速创建一个react项目
zerocher的博客
06-05 3201
1，先创建一个文件夹用于存放项目2，运行cmd，路径选择到你创建的文件夹内3，  npm install -g create-react-app         create-react-app my-app         cd my-app/         npm start...
react学习 新建react项目
似水流年，举重若轻
06-30 1899
一.搭建本地开发环境
如何搭建一个react项目（详细介绍）
LBOcean的博客
09-13 4529
这些步骤是一个基本的 React 项目搭建过程。你可以在此基础上继续添加更多功能和库，例如路由、状态管理等，以满足项目的需求
react 项目从0到1搭建
09-06
1. 为了搭建一个React项目，首先要确保你的开发环境已经配置好了。你需要安装Node.js和npm（Node包管理器）。 2. 使用命令行工具进入你想要保存项目的文件夹，并执行以下命令来创建一个新的React应用： ```shell npx create-react-app my-app ``` 这将使用create-react-app脚手架工具创建一个新的React应用，并在my-app文件夹中初始化项目结构。 3. 进入my-app文件夹，并启动开发服务器： ```shell cd my-app npm start ``` 这将启动一个本地开发服务器，并在浏览器中打开http://localhost:3000以查看你的React应用。 4. 现在你可以开始编写你的React组件了。你可以创建函数组件或类组件来定义你的UI。函数组件是一个纯函数，接收props对象并返回一个React元素；而类组件需要继承React.Component，并实现一个render函数来返回React元素。 5. 如果你需要在组件之间进行通信，可以使用Redux这样的状态管理库。Redux可以帮助你管理全局的状态，并使不同组件之间共享数据变得更加容易。你可以使用npm来安装Redux和相关的库： ```shell npm install redux react-redux ``` 然后，你可以在你的应用中创建Redux的store，并通过Provider组件将它提供给整个应用。你可以使用connect函数来连接你的组件，使其能够访问Redux中的状态。 6. 最后，你可以使用第三方UI库来加快你的开发速度。Ant Design是一个流行的React UI框架，它提供了丰富的组件和样式，可以帮助你快速构建漂亮的用户界面。你可以使用npm来安装Ant Design： ```shell npm install antd ``` 然后，你可以在你的组件中引入Ant Design的组件，并使用它们来构建你的UI。Ant Design的文档提供了详细的使用说明和示例代码，可以帮助你更好地了解和使用该框架。 以上是从0到1搭建一个React项目的一般步骤。你可以根据实际需求和项目要求进行相应的调整和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [REACT实战项目从0到1搭建（仅供参考）](https://blog.csdn.net/qq_31851435/article/details/121740400)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [react-从0到1新建react项目](https://blog.csdn.net/weixin_40220492/article/details/127145343)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值