首页 > web前端 > js教程 > 启动您的 React 之旅:如何创建您的第一个 React 应用程序!

启动您的 React 之旅:如何创建您的第一个 React 应用程序!

Linda Hamilton
发布: 2024-09-25 18:31:42
原创
739 人浏览过

Kickstart Your React Journey: How to Create Your First React App!

React 是一个开源 JavaScript 库,由 Meta 的软件工程师 Jordan Walke 创建。它用于在单页应用程序上构建用户界面(UI)组件。 React 于 2011 年首次在 Facebook 新闻推送中使用,并在 2012 年 Facebook 收购该应用程序后添加到 Instagram。它于 2013 年底以开源许可向公众发布,并获得了广泛的欢迎。根据 Stack Overflow 过去一年的调查,React 是使用最广泛的 JavaScript 库,超过 40% 的开发人员使用它。

为什么 React 如此受欢迎?

向网络开发人员询问使用他们的服务的好处,您会得到一长串回复。他们讨论了组件、虚拟 DOM、JSX 和单向数据绑定。这让开发者的生活变得更轻松。这就是 React 在 Web 开发者中如此受欢迎的原因

设置环境

我们现在了解了 React 是什么以及它为何如此受欢迎。

让我们完成在本地计算机上设置运行 React 的环境的过程。

首先,打开您喜欢的网络浏览器并搜索 Node.js。找到 Node.js 官方网站后,导航到下载选项卡,然后根据计算机的操作系统和体系结构(32 位/64 位)选择适当的 Node.js 文件。下载文件后,运行它并继续在本地计算机上安装 Node.js。要验证 Node.js 是否已成功安装在您的计算机上,请打开终端并运行以下命令:

node -v
npm -v
登录后复制

如果他们给出了版本,则意味着 Node.js 已成功安装。

创建一个 React 项目

要设置 React 项目,请打开您喜欢的网络浏览器并搜索“Vite”。访问Vite官网,复制命令“npm create vite@latest”。然后,将此命令粘贴到您的终端中。系统会要求您提供一些信息,例如您的项目名称、库以及 React 库的首选语言。回答完问题后,导航到项目文件夹并打开此文件夹中的终端。运行命令“npm i”下载所需的包。要运行该项目,请使用命令“npm run dev”,该项目将在 localhost:5137 上运行。恭喜!您已成功设置您的第一个项目。 ?

了解文件结构

设置 React 项目后,在您最喜欢的代码编辑器中打开它。打开项目后,您将看到一些文件和文件夹。您将找到index.html 文件,它是在Web 浏览器中呈现HTML 的主文件。在 src 文件夹中,您可以创建文件夹和文件,以使您的 Web 应用程序正常运行并以您想要的方式显示。主要有两个文件:main.js,负责渲染 React 中的组件;app.js,作为组件的入口点。

结论

恭喜!您刚刚从头开始构建了您的第一个 React 应用程序。在整个旅程中,您已经学习了如何设置环境、使用 Vite 创建项目并了解文件结构。 React 的灵活性和基于组件的结构使其成为构建现代动态 Web 应用程序的强大工具。现在您已经掌握了基础知识,您可以探索更高级的功能并将您的 React 技能提升到一个新的水平。不断实验、构建和学习——React 的可能性是无限的!

以上是启动您的 React 之旅:如何创建您的第一个 React 应用程序!的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板