初识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

相关推荐
我要洋人死10 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人22 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人22 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR28 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香29 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969332 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai38 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
小牛itbull3 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress