使用 Vite 搭建 React 开发环境基于 curriculum 开源课程创建你的第一个 React 应用【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum本篇技术指南以 GitHub 精选开源项目 cu/curriculumThe Odin Project 开源 Web 开发课程中 React 入门环境搭建一课 为核心系统讲解如何在本地从零创建一个 React 项目。读完本文你将掌握 React 项目的多种起步方式、Vite 脚手架命令的完整用法、项目目录结构与入口文件原理以及 React Developer Tools 的调试技巧能够独立搭建出可运行的 React 开发环境并完成首个Hello, World!实战练习。React 项目的多种起步方式在正式开始编码之前先要弄清楚如何启动一个 React 项目。根据课程文档起步方式大致可以分为两个极端最简单的方式在 HTML 中直接附加一组script标签从 CDN内容分发网络加载 React 及其配套脚本。这种方式零配置适合快速试验但不适合规模化开发。最复杂的方式使用高度可配置、支持规模化与性能优化的完整工具链Toolchain或框架Framework。课程中列举的代表性方案包括Vite 的 React 配置模板本课采用GatsbyNextJSCreate React App已废弃详见下文工具链的价值在于替开发者处理了大量底层工程问题。课程明确指出如果完全自己动手搭建在写出任何提供功能的业务代码之前至少需要完成以下四类配置配置项说明常见实现包管理Package Management管理项目依赖的安装、版本与脚本NPM、Yarn模块打包Module bundling把分散的 ES 模块与资源打包成浏览器可用的产物Webpack、Parcel编译Compilation把 JSX、新语法等编译为各环境可运行的 JavaScriptBabelReact 本体引入 React 核心库及其 DOM 渲染器react、react-dom课程文档总结道所有这一切有时甚至远不止这些都是让 React 项目与开发环境跑起来所必需的。 这也是为什么在入门阶段应该直接使用成熟工具链而不是从零手写构建流程。关于 Create React App 的说明文档专门强调了一个历史背景Create React App简称 CRA自 2016 年推出以来一直是官方推荐的 React 项目脚手架但由于多种原因CRA 在 2023 年初被官方废弃。由于其历史流行度大量教程和指南中仍会提及 CRA但新项目不再推荐使用它。这也是本课改用 Vite 的重要原因。为什么选择 Vite理解了从零搭建的复杂性后课程的结论令人欣慰我们可以用一条终端命令完成整个搭建流程。Vite 为开发者构建前端工具底层利用了最新技术来提供优秀的开发者体验并且对 React 生态有很好的支持。使用 Vite CLI 创建模板 React 项目具有以下特点极简配置几乎不需要手工编写配置文件开箱即用自带开发服务器、热更新HMR、构建打包等实用能力上手迅速让学习者把注意力放在 React 本身而不是构建工具。课程文档将其类比为使用我们自己的模板仓库——Vite 的 React 模板本质就是一份预置好的标准项目骨架。用 Vite CLI 创建 React 应用前置要求开始之前请确保本机安装的是最新 LTS 版本的 Node.js否则可能遇到兼容性错误。安装 Node.js 的方法可参考课程中的 JavaScript 环境安装指南。创建命令打开终端并进入存放项目的目录执行以下命令my-first-react-app可替换为你想要的任何项目名npm create vitelatest my-first-react-app -- --template react命令执行过程中终端可能依次出现以下交互提示请按文档要求处理询问是否安装create-vite包输入y并按Enter确认询问是否使用实验性功能一律回答no询问Install with npm and start now?回答yes让 Vite 自动安装依赖并启动。启动成功后的输出命令执行完毕后终端会输出类似下面的信息➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h enter to show help这表示开发服务器已在5173端口启动。打开浏览器访问localhost:5173就能看到 Vite React 模板的默认首页祝贺你第一个 React 应用已经创建成功。此时可以按CtrlC退出开发服务器然后进入项目目录之后任何时候在项目目录内运行npm run dev都可以重新启动开发服务器。关联 GitHub 仓库要把本地项目目录关联到 GitHub 仓库标准做法是在 GitHub 上新建一个空的仓库按照新仓库页面给出的指令把本地项目目录连接并推送上去。使用已有仓库的场景如果你已经创建并克隆了 GitHub 仓库可以直接进入克隆下来的仓库目录再用.作为项目名执行 Vite 命令让 Vite 使用当前目录作为项目根而不是新建子目录npm create vitelatest . -- --template react这样得到的项目目录已经是一个初始化好的 Git 仓库并且已经连接到了正确的远程地址无需重复执行git init和git remote add。深入剖析项目结构创建完成后进入my-first-react-app目录可以看到若干文件夹以及package.json、package-lock.json、.gitignore、README.md等文件。课程文档建议先通读README.md其中包含不少实用信息。public 与 src 的分工public文件夹存放应用相关的静态资源包括图片、图标以及供浏览器使用的信息文件。这些文件会被原样提供给浏览器不经过打包处理。src文件夹存放真正运行应用的源代码。其中main.jsx是整个应用的入口文件。入口文件 main.jsx 逐行解读打开main.jsx可以看到如下代码import { StrictMode } from react; import { createRoot } from react-dom/client; import App from ./App.jsx; import ./index.css; createRoot(document.getElementById(root)).render( StrictMode App / /StrictMode, );对于初学者来说这段代码可能略显陌生但其逻辑其实很清晰按文档的梳理可以拆解为五个要点导入 React 核心从react包导入StrictMode从react-dom包导入createRoot导入根组件从App.jsx导入App组件以便把它渲染render进 DOM导入样式导入index.css全局样式在 Webpack 相关内容 中你见过类似的 CSS 导入语法创建 root 对象调用createRoot传入index.html中的rootDOM 元素渲染组件树调用root对象上的render方法括号内正是 JSX 语法——StrictMode包裹着App /。StrictMode是 React 提供的开发模式组件用于在开发环境下启用额外的检查与提示帮助你尽早发现潜在问题。App /这种带尖括号的写法是 JSX它是 React 组件在 JavaScript 文件中的表现形态JSX 的详细规则单一根元素、闭合所有标签、属性使用 camelCase 等会在后续 什么是 JSX 一课中深入讲解。文档特别安抚初学者现阶段不要求理解全部细节随着课程推进这些内容都会逐步掌握。保持代码风格一致Linting 与格式化课程的Lesson overview明确把如何在 React 项目中格式化代码列为本课学习目标之一。虽然搭建脚手架时不会自动安装这些工具但课程在 JavaScript 课程中的 Linting 一课 提供了完整的配套方案ESLintLinter扫描代码并依据规则集报告风格与潜在错误部分错误可自动修复。通常作为项目的开发依赖devDependency安装通过命令行对任意文件执行检查。PrettierFormatter自动按照一套既定规则排版代码空格、缩进、换行等。它高度固执opinionated大部分格式化决策无需自定义从而把精力留给真正的问题。两者都可以通过 VSCode 扩展获得更便捷的体验ESLint 扩展直接在编辑器中以波浪线标出问题Prettier 扩展支持一键格式化文件。但课程强调扩展只是便捷工具项目的 lint/format 规则应以项目内安装的包与配置文件为唯一事实来源。React Developer Tools调试利器随着项目规模扩大、组件数量增多开发者需要能够跟踪并对应用内部状态做实时修改以理解与调试代码。为此课程推荐安装 Chrome 扩展React Developer Tools并建议尽早安装、尽早熟悉因为它是高效 React 开发中不可或缺的工具。该扩展的核心价值在于它能让开发者在浏览器中直接查看 React 组件树的结构、当前 props 与 state并对它们做实时调整从而把黑盒式的页面变成可观察、可操作的对象。实战练习把模板改造成 Hello, World!课程的 Assignment 部分给出了第一个实战任务清理my-first-react-app项目让它不再显示默认页面而是显示一条Hello, World!消息。结合 React 组件入门课 的知识实现思路非常直接模板首页内容全部渲染自src/App.jsx中的App组件因此只需修改该组件返回的 JSXfunction App() { return h1Hello, World!/h1; } export default App;保存后得益于 Vite 的热更新HMR浏览器会立即刷新显示新内容。这里可以顺带体会 React 组件的基本形态它就是一个返回 JSX 的 JavaScript 函数通过export导出、被其他文件import使用入口main.jsx正是这样引用App的。如果你想让main.jsx直接渲染自己写的自定义组件也可以参照 组件一课中的完整示例先import Greeting from ./Greeting.jsx再用Greeting /替换App /。注意组件名必须大写开头否则 JSX 会把它当作普通 HTML 标签而不是 React 组件。知识检查与小结为巩固本课要点文档提供了以下自检问题答案均可在上文对应小节中找到启动一个新 React 项目有哪些方式主要可分为 CDN script 标签与工具链/框架两条路线。为什么起步阶段应该使用现成工具链而不是自己搭建因为完整配置至少涉及包管理、模块打包、编译与 React 本身四大部分工程成本很高。什么是 Vite为什么要用它Vite 是面向开发者的前端构建工具其 React 模板配置极简、开箱即用。用 Vite 搭建 React 项目的命令是什么npm create vitelatest my-first-react-app -- --template react或对已有仓库使用.作为项目名。public文件夹里放什么静态资源图片、图标、浏览器信息文件等。src文件夹里放什么运行应用的源代码其中main.jsx是入口文件。为什么 React Developer Tools 很有用它可以查看组件树、追踪并实时修改 props/state是调试与理解应用内部结构的重要工具。至此你已经完成了一个完整的 React 开发环境搭建闭环理解起步方式 → 用 Vite 创建项目 → 解析目录结构 → 配置代码规范 → 安装调试工具 → 完成首次组件修改。下一步即可进入 React 课程后续内容从组件、JSX 开始构建真正的应用。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 使用 Vite 搭建 React 开发环境：基于 curriculum 开源课程创建你的第一个 React 应用
使用 Vite 搭建 React 开发环境基于 curriculum 开源课程创建你的第一个 React 应用【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum本篇技术指南以 GitHub 精选开源项目 cu/curriculumThe Odin Project 开源 Web 开发课程中 React 入门环境搭建一课 为核心系统讲解如何在本地从零创建一个 React 项目。读完本文你将掌握 React 项目的多种起步方式、Vite 脚手架命令的完整用法、项目目录结构与入口文件原理以及 React Developer Tools 的调试技巧能够独立搭建出可运行的 React 开发环境并完成首个Hello, World!实战练习。React 项目的多种起步方式在正式开始编码之前先要弄清楚如何启动一个 React 项目。根据课程文档起步方式大致可以分为两个极端最简单的方式在 HTML 中直接附加一组script标签从 CDN内容分发网络加载 React 及其配套脚本。这种方式零配置适合快速试验但不适合规模化开发。最复杂的方式使用高度可配置、支持规模化与性能优化的完整工具链Toolchain或框架Framework。课程中列举的代表性方案包括Vite 的 React 配置模板本课采用GatsbyNextJSCreate React App已废弃详见下文工具链的价值在于替开发者处理了大量底层工程问题。课程明确指出如果完全自己动手搭建在写出任何提供功能的业务代码之前至少需要完成以下四类配置配置项说明常见实现包管理Package Management管理项目依赖的安装、版本与脚本NPM、Yarn模块打包Module bundling把分散的 ES 模块与资源打包成浏览器可用的产物Webpack、Parcel编译Compilation把 JSX、新语法等编译为各环境可运行的 JavaScriptBabelReact 本体引入 React 核心库及其 DOM 渲染器react、react-dom课程文档总结道所有这一切有时甚至远不止这些都是让 React 项目与开发环境跑起来所必需的。 这也是为什么在入门阶段应该直接使用成熟工具链而不是从零手写构建流程。关于 Create React App 的说明文档专门强调了一个历史背景Create React App简称 CRA自 2016 年推出以来一直是官方推荐的 React 项目脚手架但由于多种原因CRA 在 2023 年初被官方废弃。由于其历史流行度大量教程和指南中仍会提及 CRA但新项目不再推荐使用它。这也是本课改用 Vite 的重要原因。为什么选择 Vite理解了从零搭建的复杂性后课程的结论令人欣慰我们可以用一条终端命令完成整个搭建流程。Vite 为开发者构建前端工具底层利用了最新技术来提供优秀的开发者体验并且对 React 生态有很好的支持。使用 Vite CLI 创建模板 React 项目具有以下特点极简配置几乎不需要手工编写配置文件开箱即用自带开发服务器、热更新HMR、构建打包等实用能力上手迅速让学习者把注意力放在 React 本身而不是构建工具。课程文档将其类比为使用我们自己的模板仓库——Vite 的 React 模板本质就是一份预置好的标准项目骨架。用 Vite CLI 创建 React 应用前置要求开始之前请确保本机安装的是最新 LTS 版本的 Node.js否则可能遇到兼容性错误。安装 Node.js 的方法可参考课程中的 JavaScript 环境安装指南。创建命令打开终端并进入存放项目的目录执行以下命令my-first-react-app可替换为你想要的任何项目名npm create vitelatest my-first-react-app -- --template react命令执行过程中终端可能依次出现以下交互提示请按文档要求处理询问是否安装create-vite包输入y并按Enter确认询问是否使用实验性功能一律回答no询问Install with npm and start now?回答yes让 Vite 自动安装依赖并启动。启动成功后的输出命令执行完毕后终端会输出类似下面的信息➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h enter to show help这表示开发服务器已在5173端口启动。打开浏览器访问localhost:5173就能看到 Vite React 模板的默认首页祝贺你第一个 React 应用已经创建成功。此时可以按CtrlC退出开发服务器然后进入项目目录之后任何时候在项目目录内运行npm run dev都可以重新启动开发服务器。关联 GitHub 仓库要把本地项目目录关联到 GitHub 仓库标准做法是在 GitHub 上新建一个空的仓库按照新仓库页面给出的指令把本地项目目录连接并推送上去。使用已有仓库的场景如果你已经创建并克隆了 GitHub 仓库可以直接进入克隆下来的仓库目录再用.作为项目名执行 Vite 命令让 Vite 使用当前目录作为项目根而不是新建子目录npm create vitelatest . -- --template react这样得到的项目目录已经是一个初始化好的 Git 仓库并且已经连接到了正确的远程地址无需重复执行git init和git remote add。深入剖析项目结构创建完成后进入my-first-react-app目录可以看到若干文件夹以及package.json、package-lock.json、.gitignore、README.md等文件。课程文档建议先通读README.md其中包含不少实用信息。public 与 src 的分工public文件夹存放应用相关的静态资源包括图片、图标以及供浏览器使用的信息文件。这些文件会被原样提供给浏览器不经过打包处理。src文件夹存放真正运行应用的源代码。其中main.jsx是整个应用的入口文件。入口文件 main.jsx 逐行解读打开main.jsx可以看到如下代码import { StrictMode } from react; import { createRoot } from react-dom/client; import App from ./App.jsx; import ./index.css; createRoot(document.getElementById(root)).render( StrictMode App / /StrictMode, );对于初学者来说这段代码可能略显陌生但其逻辑其实很清晰按文档的梳理可以拆解为五个要点导入 React 核心从react包导入StrictMode从react-dom包导入createRoot导入根组件从App.jsx导入App组件以便把它渲染render进 DOM导入样式导入index.css全局样式在 Webpack 相关内容 中你见过类似的 CSS 导入语法创建 root 对象调用createRoot传入index.html中的rootDOM 元素渲染组件树调用root对象上的render方法括号内正是 JSX 语法——StrictMode包裹着App /。StrictMode是 React 提供的开发模式组件用于在开发环境下启用额外的检查与提示帮助你尽早发现潜在问题。App /这种带尖括号的写法是 JSX它是 React 组件在 JavaScript 文件中的表现形态JSX 的详细规则单一根元素、闭合所有标签、属性使用 camelCase 等会在后续 什么是 JSX 一课中深入讲解。文档特别安抚初学者现阶段不要求理解全部细节随着课程推进这些内容都会逐步掌握。保持代码风格一致Linting 与格式化课程的Lesson overview明确把如何在 React 项目中格式化代码列为本课学习目标之一。虽然搭建脚手架时不会自动安装这些工具但课程在 JavaScript 课程中的 Linting 一课 提供了完整的配套方案ESLintLinter扫描代码并依据规则集报告风格与潜在错误部分错误可自动修复。通常作为项目的开发依赖devDependency安装通过命令行对任意文件执行检查。PrettierFormatter自动按照一套既定规则排版代码空格、缩进、换行等。它高度固执opinionated大部分格式化决策无需自定义从而把精力留给真正的问题。两者都可以通过 VSCode 扩展获得更便捷的体验ESLint 扩展直接在编辑器中以波浪线标出问题Prettier 扩展支持一键格式化文件。但课程强调扩展只是便捷工具项目的 lint/format 规则应以项目内安装的包与配置文件为唯一事实来源。React Developer Tools调试利器随着项目规模扩大、组件数量增多开发者需要能够跟踪并对应用内部状态做实时修改以理解与调试代码。为此课程推荐安装 Chrome 扩展React Developer Tools并建议尽早安装、尽早熟悉因为它是高效 React 开发中不可或缺的工具。该扩展的核心价值在于它能让开发者在浏览器中直接查看 React 组件树的结构、当前 props 与 state并对它们做实时调整从而把黑盒式的页面变成可观察、可操作的对象。实战练习把模板改造成 Hello, World!课程的 Assignment 部分给出了第一个实战任务清理my-first-react-app项目让它不再显示默认页面而是显示一条Hello, World!消息。结合 React 组件入门课 的知识实现思路非常直接模板首页内容全部渲染自src/App.jsx中的App组件因此只需修改该组件返回的 JSXfunction App() { return h1Hello, World!/h1; } export default App;保存后得益于 Vite 的热更新HMR浏览器会立即刷新显示新内容。这里可以顺带体会 React 组件的基本形态它就是一个返回 JSX 的 JavaScript 函数通过export导出、被其他文件import使用入口main.jsx正是这样引用App的。如果你想让main.jsx直接渲染自己写的自定义组件也可以参照 组件一课中的完整示例先import Greeting from ./Greeting.jsx再用Greeting /替换App /。注意组件名必须大写开头否则 JSX 会把它当作普通 HTML 标签而不是 React 组件。知识检查与小结为巩固本课要点文档提供了以下自检问题答案均可在上文对应小节中找到启动一个新 React 项目有哪些方式主要可分为 CDN script 标签与工具链/框架两条路线。为什么起步阶段应该使用现成工具链而不是自己搭建因为完整配置至少涉及包管理、模块打包、编译与 React 本身四大部分工程成本很高。什么是 Vite为什么要用它Vite 是面向开发者的前端构建工具其 React 模板配置极简、开箱即用。用 Vite 搭建 React 项目的命令是什么npm create vitelatest my-first-react-app -- --template react或对已有仓库使用.作为项目名。public文件夹里放什么静态资源图片、图标、浏览器信息文件等。src文件夹里放什么运行应用的源代码其中main.jsx是入口文件。为什么 React Developer Tools 很有用它可以查看组件树、追踪并实时修改 props/state是调试与理解应用内部结构的重要工具。至此你已经完成了一个完整的 React 开发环境搭建闭环理解起步方式 → 用 Vite 创建项目 → 解析目录结构 → 配置代码规范 → 安装调试工具 → 完成首次组件修改。下一步即可进入 React 课程后续内容从组件、JSX 开始构建真正的应用。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考