React脚手架的创建流程和基础使用(1)

最新推荐文章于 2025-12-09 23:02:15 发布
原创 最新推荐文章于 2025-12-09 23:02:15 发布 · 115 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #react native #javascript

本文介绍了如何使用npx create-react-app创建React脚手架，并通过npm或yarn启动项目。在src/index.js中导入并使用React和ReactDOM，展示了JSX的使用方式，包括条件渲染和数据循环。强调了在JSX中避免JavaScript自动插入分号的注意事项。

1.创建react脚手架 npx create-react-app demo

 

2.根据提示启动项目,想cd到目录文件app-demo里面

启动项目有npm start 和yarn start 都可以 类似于vue中的yarn serve

3.基本使用过程

在src目录下index.js中导入react,reactDom适用与web应用

         然后进行使用,先创建一个元素,在渲染到一个dom节点上

 4.写法繁琐,所以我们都使用另一种写法jsx

 注意点:创建的react元素用小括号包裹起来,避免js自动插入分好的陷阱

 5.react元素里面可以使用if/else , 三元运算符,逻辑与运算符 来实现

  5.1 数据的循环渲染

 

React学习03-react脚手架
Meowmow的博客
10-16 936
脚手架用来帮助快速创建基于xxx库的模板项目，包含了所有需要的配置，下载好了所有相关依赖，可以直接运行一个简单的效果。使用脚手架的项目特点有：模块化、组件化、工程化。react脚手架：create-react-app项目的整体技术架构为react+webpack+es6+eslint。
React---使用react脚手架搭建项目
lelara的博客
04-21 1108
一、使用create-react-app创建react应用 1.1. react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置(语法检查、jsx编译、devServer…) 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: re...
React脚手架创建以及基本使用
qq_46026593的博客
04-17 1934
React脚手架创建以及基本使用
React脚手架创建与内置文件介绍
weixin_68160847的博客
11-08 429
ReactDom.render( content123456789 ,document.getElementById("root"))
React 脚手架
hsyldw2000的博客
04-01 1927
将css文件名改为index.module.css,在index.js文件中引入 import hello from './index.module.css' ，在渲染时 Hello React!3.创建component组件文件夹，这个是保存项目中使用的组件的。2.创建项目：create-react-app hello-react。---- 组件单元测试的文件(需要jest-dom库的支持)五、第一个react项目---Hello React。
React脚手架安装使用流程
weixin_57935165的博客
01-24 337
一、安装 全局安装 npm install -g create-react-app 以上是安装命令 二、创建项目 create-react-app myreact create-react-app是创建项目的命令 myreact 是项目名 目录 |-- node_modules //项目组件文件夹：所有安装的组件都在这 |--public //静态页面目录 |--src //源码目录 |-- .gitign...
【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
xuxuii的博客
06-01 1709
第一步，在cmd全局安装：第二步，切换到想创项目的目录，使用命令：第三步，进入项目文件夹：第四步，启动项目：当出现此页面表示项目以及创建成功了！！！🎉 页面效果显示的流程📝：index.js（入口文件，引入React需要的一些核心库和组件，渲染App组件，根据写的root自动到index.html文件下）　＝> index.html（在此文件下找到root节点，App组件就渲染到页面上了）
05_React应用（基于React脚手架）
所学所思
08-29 995
setupTests.js ----- 应用的整体测试，单元测试，组件测试（jest-dom 支持）App.test.js ------- 用于给 APP 做测试,基本不用，直接运行看效果即可。App.css ----------- App 组件的样式。App.js ------------ App 组件。logo192.png ------ logo 图。robots.txt ------- 爬虫协议文件。index.js ---------- 入口文件。工程化: 代码编写完成以后一系列都可以自动运行。
【11】基础知识：React脚手架
weixin_45559449的博客
10-15 402
xxx 脚手架：用来帮助程序员快速创建一个基于 xxx 库的模板项目1、包含了所有需要的配置（语法检查、jsx 编译、devServer…）2、下载好了所有相关的依赖3、可以直接运行一个简单效果。
【React】React全家桶（四）React脚手架
Better_Xing的博客
07-18 968
【React】React全家桶（四）React脚手架
webpack,react不用脚手架创建项目
10-14
以上就是不使用脚手架手动创建React项目的基本流程。这种方式虽然比使用Create React App等脚手架复杂，但它能让你深入了解项目结构和Webpack配置，对于学习和掌握前端工程化有极大的帮助。在实际开发中，可以根据...
React大模型网站-流式推送markdown转换问题以及开启 rehype-raw,rehype-sanitize,remark-gfm等插件的使用
m0_61998604的博客
12-04 1154
本文介绍了在React大模型网站中实现流式推送Markdown转换的方法，重点讲解了ReactMarkdown库及其配套插件的使用。主要内容包括：1）ReactMarkdown基础用法；2）通过rehype-raw插件支持HTML标签渲染；3）使用rehype-sanitize防止XSS攻击；4）利用remark-gfm支持GitHub风格的Markdown语法；5）给出了完整的流式渲染实现方案，包含SSE推送、内容累积和实时更新等关键技术。文章还提供了完整的代码示例，帮助开发者快速实现安全可靠的Markd
React18+快速入门 - 1.响应式机制之 useState 和 useReducer
weixin_63443072的博客
12-09 386
本文详细介绍了React中两个核心状态管理Hook：useState和useReducer。首先讲解了useState的基础用法，包括三种初始化方式（直接值、函数初始化、对象状态）和四种更新状态的方法（直接设置新值、函数更新、部分更新对象、重置状态），并通过TodoList示例展示复杂状态管理。然后介绍了useReducer的基本概念，适合处理复杂状态逻辑，演示了reducer函数的三种写法（switch语句最常用），通过计数器示例说明如何使用dispatch派发不同action来更新状态。全文通过丰富代码
网络安全漏洞之React 框架分析
anquan2233的博客
12-04 1315
昨日爆出的 CVE-2025-55182，CVSS 10.0 满分严重漏洞，影响 React 19 及所有 Next.js 15/16 项目。核心问题是 React Server Components 的 Flight 协议存在不安全反序列化，无需任何认证，攻击者只需向 Server Actions 端点发送一个精心构造的 multipart 请求，即可实现远程代码执行（RCE）。目前已确认多个完整 0day 利用链（包括 vm.runInThisContext 在内），未修补实例基本等于已失陷。
react redux 分组
a378113472的博客
12-06 619
这种结构的核心思想是“功能切片”（Feature Slices），即所有与某个特定功能相关的状态、动作创建函数、Reducer 逻辑、副作用（如异步 thunk）以及选择器（Selectors），都集中在一个文件夹内管理。│ │ ├── userSlice.ts # 用户相关的 Slice（使用 Redux Toolkit）│ │ └── types.ts # 用户模块的类型定义（可选）│ ├── user/ # 用户管理模块。
【React】极客园案例实践-发布文章模块
qq_50694225的博客
12-05 967
发布文章模块
从零实现：react&Ts--批量导入 & Excel 模版下载功能
ZZZxxA123的博客
12-05 902
看完这篇文章，你就能轻松实现 Excel 批量导入功能啦！🎉 从零开始，通俗易懂，配完整代码，10分钟学会！还有踩坑指南哦~ 💪
React 19：革命性升级与全面使用指南
一只爱吃糖的小羊
12-09 536
React 19 带来了颠覆性的变化，重新定义了 React 应用的开发方式。从编译器优化到全新的 Hooks，React 19 让开发更简单、应用更高效。
Solon AI 开发学习19 - 结合 Solon Flow 定制 ReAct 效果
最新发布
向往自由的少年！（我是一个少年！！！）
12-09 195
Solon Flow 是一个基于 YAML/JSON 配置的流程编排引擎，本文演示了其与 solon-ai 结合实现人机交互的 RcAct 流程。该流程通过 LLM 生成文章初稿后进入人工审核循环，支持根据反馈动态修改内容直至审核通过。核心流程包含 agent 节点（LLM 编写/修改）、review 节点（人工审核）和终审节点，通过条件分支实现循环修订机制。代码示例展示了各节点的具体实现，包括 LLM 提示词构建、审核交互逻辑和状态流转控制，实现了从内容生成到审核通过的全流程自动化编排。
使用react脚手架创建项目
01-14
### 使用 `create-react-app` 创建 React 项目 为了创建一个新的 React 应用程序，可以直接利用 `create-react-app` 工具来快速搭建开发环境。推荐的方式是通过 npx 命令来启动这一流程而不必事先全局安装该工具[^3]。 ```bash npx create-react-app my-app ``` 上述命令会在当前目录下建立名为 `my-app` 的文件夹，并在此基础上初始化一个全新的 React 应用程序。随后会自动处理依赖项的下载工作，这可能需要几分钟时间完成，因为涉及到多个包如 react, react-dom 和 react-scripts 的安装[^1]。 一旦所有必要的资源都已就绪，可以通过进入新建项目的根目录并运行以下命令来启动本地服务器： ```bash cd my-app npm start ``` 如果遇到任何问题，比如提示模板缺失，则可能是由于所使用的 `create-react-app` 版本过旧所致。此时建议确认是否采用了最新版的构建工具[^4]。 对于那些之前曾经全局安装过此工具的开发者来说，在继续操作前应当验证现有版本号以确保兼容性: ```bash create-react-app -V ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值