技术 2025-08-25 阅读: 10

react项目学习第一天

最近一直看到React 的项目,但是不知道怎么个回事。于是准备开始学习下。

首先是搭建环境。

React 开发依赖 Node.js 与它自带的包管理器 npm,前往  nodejs.org 下载安装最新版 Node.js,其通常已包含npm。安装完成后,可在终端用 node -v  npm -v 命令检查是否安装成功。

实际操作:

Windows环境,Windows键+R,输入CMD,回车,打开命令行窗口。

1756085600-collectedimage

输入 node -vnpm -v提示已经安装完成。

1756085615-collectedimage

创建新 React 应用

推荐用Create React App 脚手架快速创建项目。在终端依次执行下面的命令:

npx create-react-app my-react-app
cd my-react-app
npm start

其中 my-react-app 为项目名,可按需修改,我用了myapp。执行上述命令后,开发服务器启动,浏览器打开 http://localhost:3000 即可看到应用页面。

1756085711-collectedimage

项目结构

进入项目文件夹,关键文件及文件夹有:

1756085731-collectedimage

  • public/index.html:应用主 HTML 文件,React 渲染的内容会插入至该文件指定位置。
  • src/index.js:React 应用入口,通常在此引入根组件,并把其渲染至 index.html 内对应 DOM 节点上。
  • src/App.js:定义了基本 App 组件,能对其编辑修改,预览基础的组件修改效果。

标签:

分享本文:

链接已复制到剪贴板
作者头像

管理员

博客作者 | 技术爱好者

热爱分享编程技术和经验,专注于PHP、前端开发和Web性能优化。

搜索文章