React-19:初始化React脚手架

简介: React-19:初始化React脚手架

安装流程

  1. npm i -g create-react-app
  2. create-react-app react_staging (名字可以自己起)
  3. npm start (开启项目)

使用React脚手架实现Hello组件

public下的index.html

  • 这个文件主要是一个id为root的容器,用来存放React渲染的组件

image.png

入口文件index.js

  • 这个文件是一个入口文件,这个文件主要负责,引入React核心库,React-dom库,以及引入App.js文件
  • App.js是所有组件的外壳。
  • 在index.js文件下可以直接通过DOM操作public下的index.html文件,因为底层React已经帮我们实现。

image.png

外壳文件App.js

image.png

相关文章
|
3月前
|
前端开发
React | 修改React脚手架的默认端口号?
React | 修改React脚手架的默认端口号?
156 64
|
2月前
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
106 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
1月前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
3月前
|
前端开发 NoSQL MongoDB
React技术栈-基于react脚手架编写评论管理案例
这篇文章介绍了在MongoDB中使用sort和投影来对查询结果进行排序和限制返回的字段,通过具体的命令示例展示了如何实现这些操作。
55 6
React技术栈-基于react脚手架编写评论管理案例
|
3月前
|
前端开发 JavaScript
React技术栈-react的脚手架创建应用案例
本文介绍了如何使用React的官方脚手架工具create-react-app快速创建React项目,并展示了项目的目录结构和基本的代码文件,以及如何启动和运行React应用。
37 2
|
4月前
|
前端开发 JavaScript 中间件
React脚手架create-react-app简介
【8月更文挑战第13天】React脚手架create-react-app简介
261 4
|
4月前
|
前端开发 JavaScript 开发者
React生命周期方法完全指南:深入理解并高效应用每个阶段的钩子——从初始化到卸载的全方位解析
【8月更文挑战第31天】本文详细介绍了React组件生命周期方法,包括初始化、挂载、更新和卸载四个阶段的关键钩子。通过探讨每个阶段的方法,如`componentDidMount`和`componentWillUnmount`,帮助开发者在正确时机执行所需操作,提升应用性能。文章还提供了最佳实践,指导如何避免常见错误并充分利用最新钩子。
112 0
|
5月前
|
资源调度 前端开发 C++
react环境搭建,及脚手架使用
react环境搭建,及脚手架使用
|
4月前
|
前端开发 JavaScript API
React学习-初始化react项目
【8月更文挑战第16天】
|
5月前
|
JavaScript 前端开发
vitepress初始化安装,最全 “vitepress > @docsearch/js > @docsearch/react > ,ENOENT: no such file or
vitepress初始化安装,最全 “vitepress > @docsearch/js > @docsearch/react > ,ENOENT: no such file or