React项目搭建

最新推荐文章于 2024-05-08 17:14:51 发布
最新推荐文章于 2024-05-08 17:14:51 发布
阅读量244 收藏 1
点赞数
分类专栏： react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wendy_monkey/article/details/124848845
版权

确定node已安装
在这里插入图片描述
执行 npm i -g create-react-app 安装react脚手架在这里插入图片描述
执行 create-react-app rproject (rproject为自定义项目名)，最后出现 happy hacking说明创建成功。
在这里插入图片描述
在这里插入图片描述
项目创建成功后，在对应路径下可以看到项目文件结构
在这里插入图片描述
在项目所在路径下命令行执行npm start
执行成功后，自动打开浏览器访问
在这里插入图片描述

前端小花❀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
REACT实战项目从0到1搭建（仅供参考）
不怕麻烦的鹿丸的博客
12-06 2万+
按照。
如何创建React项目
hwx865的专栏
10-13 8275
默认，create react app 创建的项目是看不到 webpack 相关的配置的，如果熟悉 webpack 的小伙伴，知道 package.json 中的配置会很多，而react脚手架中的 package.json 中，依赖为什么这么少。不同于 vue-cli 这样的工具。这是因为像 webpack，babel 等等都是被 creat react app 封装到了 react-scripts 这个项目当中，包括基本启动命令 都是通过调用 react-scripts 这个依赖下面的命令进行启动的。
如何创建一个 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项目(简易版)
最新发布
m0_61097007的博客
05-08 1032
在日常工作中，我大多是在已有的项目基础上进行开发，而非从头构建项目。因此，我期望通过本次学习能填补我在项目初始化阶段知识的空白，与大家共同进步。在此过程中，我欢迎并感激任何指正或建议，无论是关于错误修正还是更优的解决策略，让我们相互促进，共同提升。在我们正式开发之前，请确认您的计算机已安装Node.js环境，这是进行后续任务的前提。如未安装，请访问Node.js官网(https://nodejs.org/)，根据您的操作系统挑选并安装最新版本。安装完毕后，通过在命令行界面分别执行node -v和。
React创建项目（保姆级讲解，配置文件详细介绍）
shensanbai95的博客
04-06 1万+
由于学习需要，就简单记录一下，react通过脚手架创建项目的过程，从0到1，附带一个小demo。
如何搭建一个react项目（详细介绍）
LBOcean的博客
09-13 5167
这些步骤是一个基本的 React 项目搭建过程。你可以在此基础上继续添加更多功能和库，例如路由、状态管理等，以满足项目的需求
react项目搭建
09-27
此项目包含了 路由配置（嵌套路由） fetch请求接口 redux状态管理 webpack代理设置 蚂蚁金服ant使用 调用h5+手机摄像头功能，绝对物超所值，页面简单 但是架子稳定 涉及的知识全面
react项目搭建步骤.pdf
08-25
"React 项目搭建步骤" React 项目搭建是指使用 React 库创建一个新的项目，并进行基本的配置和设置。下面是 React 项目搭建的步骤： 步骤一：创建项目 创建一个新的 React 项目，使用 `create-react-app` 工具...
react环境搭建
01-05
React环境的搭建是开发工作的重要第一步，因为这将决定你的项目能否顺利进行。本项目已经为你提供了一个预配置好的React环境，集成了Redux和其他必要模块，可以直接使用。 首先，我们来了解一下`npm install`这个...
react-一步一步搭建一个react项目环境
08-14
在本文中，我们将深入探讨如何一步一步地搭建一个React项目环境，包括使用React和Webpack的基础配置。React是一个流行的JavaScript库，用于构建用户界面，而Webpack是一个模块打包器，它能够管理和优化项目的依赖...
react 入门，项目搭建
09-13
本教程将引导你入门React，介绍如何使用Webpack等基础工具搭建一个React项目。 React的核心概念是组件。组件是可重用的代码块，它们可以像HTML元素一样被组合起来，构建出复杂的UI。React组件可以接收props（属性）...
【React进阶-1】从0搭建一个完整的React项目（入门篇）
jsjxxx的博客
06-29 1万+
这篇文章带领大家从零开始手动撸一个React项目的基础框架，集成React全家桶。万字长文，请各位有足够的时间时再来阅读和学习。概述 平时工作中一直在用React提供的脚手架工具搭建React项目，一行命令全都搞定，自己只管做需求开发即可，从来没仔细研究过各个模块代码怎么去配置，相互之间怎么去进行交互。这周正好有时间，所以决定仔细研究下React项目中的各个功能模块，所以我们来讲解下如何从零搭建一个完整的React项目。目录 项目初始化 安装NodeJS环境和初始化项目安装webpack新建项目目录和文件
如何从零开始创建React项目（三种方式）
weixin_45242865的博客
12-02 1万+
在开发 React 项目前最关键的当然是项目的创建，现在的前端工程化使得前端项目的创建也变得越来越复杂，在这里介绍三种从零开始创建 React 项目的方式，分别是 “在浏览器中直接引入”、“使用官方脚手架 create-react-app” 以及 “使用 Webpack 创建”。 浏览器中通过标签直接引入 React 框架有两个核心的包，分别是 react 以及 react-dom；若想直接在浏览器中使用 React，那么把这两个包直接引入就可以了。 <!-- 引入 react --> <
搭建React项目
tian19920813的博客
03-14 1322
创建一个新文件夹my-react-app，并在该文件夹下使用终端创建项目my-react-app。暴露webpack配置，此操作不可撤销，请按需要操作。react项目默认隐藏了webpack相关配置，执行。在src下新建文件src/api/http.ts。在页面上看到欢迎按钮，引入成功。此时，项目已经创建完成，运行。
React 从零开始学习（一） —— 搭建项目
且听风吟的博客
07-10 1173
学习react。
创建React项目全过程（傻瓜式教程）
m0_52358470的博客
12-29 1万+
创建React项目。npm无法识别
react项目搭建实战
08-16
要搭建一个React项目，你可以按照以下步骤进行操作: 1. 首先，使用官方提供的CRA(create-react-app)脚手架新建一个React项目。在命令行中输入以下命令: [1] ``` npx create-react-app front-proj --template typescript ``` 2. 接下来，根据你的技术栈需求，安装所需的依赖项。根据你提供的引用，你可以在项目文件夹中运行以下命令: [2] ``` yarn add antd axios moment redux react-redux react-router-dom redux-saga connected-react-router redux-devtools-extension @types/react-redux @types/react-router-dom ``` 3. 在项目中创建一个布局组件。可以按照你提供的引用中的示例代码创建一个名为Layout的组件。该组件接受一个名为children的props，用于渲染子组件。示例代码如下: [3] ```javascript import { FC } from 'react'; interface Props { children: React.ReactNode; } const Layout: FC<Props> = ({ children }) => { return <div>Layout {children}</div>; }; export default Layout; ``` 以上是搭建一个React项目的基本步骤。你可以根据自己的需求和项目要求进行进一步的开发和配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [[React 实战系列] 项目的搭建与配置](https://blog.csdn.net/weixin_42938619/article/details/119591695)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值