初识React框架

在当今前端开发的领域中,React框架以其高效、灵活和强大的性能备受前端开发者的青睐。本文将带你走进React框架的初识之旅,详细介绍React的环境准备、创建项目的命令行操作以及项目文件框架的结构。

什么是React

React是一个开源的JavaScript库,由Facebook官方推出的项目脚手架,主要用于构建用户界面,特别是对于中大型项目开发来说,它因高效、灵活且具有强大的组件化能力而被誉为"前端第一框架"。它由Facebook于2013年首次开源,并迅速成为前端开发领域中最受欢迎的技术之一。React的核心理念是声明式编程和组件化,这使得开发者可以更高效地构建和维护用户界面。

React的安装环境

在踏上React的开发之路前,我们首先需要确保具备以下环境:

  • 安装node.js: 因为node.js是运行React应用的基础。可以去Node.js官方网站中,根据自己的操作系统选择相应的安装包进行下载和安装。安装完成后,可以在命令行输入node -v npm -v 来检查是否安装成功和查看版本信息。
  • 安装React的脚手架: Create React App 是官方推出的脚手架。打开命令行终端,输入以下命令来安装Create React App
css 复制代码
npm i -g create-react-app

从该命令行中可以看出为什么我们要先安装node.js,因为npm是随Node.js一起安装的包管理器,我们需要通过npm i或npm install来安装一个新的包create-react-app,而-g则是告诉npm全局安装这个包,以至于该包可以在系统的任何位置访问,而不是仅限于某个文件夹。可以通过npm config ls 来查看 全局安装包的位置,在其中我们可以看到prefix所对应的就是在电脑中的位置,在里面可以看到刚刚安装的包

创建React项目 使用`Create React App `这个便捷的脚手架工具,我们可以快速创建一个`React`项目。首先,我们可以先创建一个属于`React`的文件夹来存放我们用`React`项目,以便于管理。用`VSCODE`打开该文件夹,并且打开集成终端输入相关的命令行。以下是具体的命令行操作:

  1. 使用以下命令创建一个名为my-react的项目,该命令会在我们的创建的React文件夹内自动创建一个my-react文件夹:

    lua 复制代码
    create-react-app my-react
  1. 进入创建好的项目目录:

    bash 复制代码
    cd my-react
  1. 启动项目:

    arduino 复制代码
    npm run start


    其中的 `Local:` 和 `On Your Network: ` 所对应的就是你的项目网址,用浏览器打开后可以看到你的项目

React项目文件框架结构

成功创建项目后,让我们来了解一下其文件框架结构以及各部分的作用:

  • node_modules 目录:是用来存放项目所有依赖包(或称为模块)的地方。当使用npm命令安装一个包时,该包及其所有依赖都会被放置在node_modules目录下。该目录包含成百上千个依赖包,每个包又可能包含多个文件,因此这个目录通常很大。

  • .gitignore : 是一个在Git版本控制系统中使用的文本文件,用于列出应当被Git忽略而不被版本控制跟踪的文件或文件夹模式。由于node_modules目录很大,在版本控制(如Git)中会被忽略,以避免仓库体积过大。

  • package.json和package-lock.json:项目元数据和脚本配置文件,记录了项目依赖、脚本命令等信息。

  • public目录:该目录通常用于放置静态资源

    • index.html :这是项目的入口HTML文件,也就是项目的HTML首页,里面包含页面的基本结构和加载React项目的脚本,React项目最终会被插入到这个页面的特定元素(<div id="root"></div>--根节点root)中。
  • src目录:这是开发的主要区域,代码的主战场,包括:

    • App.css : 这是一个CSS样式表文件,用于定义App.js组件的外观和布局。
    • App.js :这是项目的主要组件,通常是整个应用的根组件,负责页面的主要布局和内容展示。App.js会导入并使用其他组件来构建整个应用程序。
    • App.test.js : 这是一个测试文件,用于编写针对App.js组件的功能性和单元测试。通过运行这些测试,可以确保组件的行为符合预期,并且在进行更改时不会引入新的错误。
    • index.js:项目的入口文件,React项目的起点,用于渲染APP组件到页面。
    • index.css:全局样式文件。

结语

通过对React框架的这些基础了解,我们已经迈出了使用React进行前端开发的重要一步,我后续将不断深入学习React的组件通信,状态管理等知识,并且分享给你们,让我们一起加油,这样才能构建出功能丰富、性能卓越的前端应用。

ps:React的学习文档(中文):zh-hans.react.dev/learn

相关推荐
yngsqq10 分钟前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing44 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm2 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue