初步认识React：前端开发的首选框架

Delighted
976 阅读4分钟

在当今快速发展的前端技术领域，React作为Facebook推出的一个开源JavaScript库，已经稳坐前端开发第一框架的宝座。其强大的组件化开发模式、虚拟DOM技术以及丰富的生态系统，使得React成为构建复杂、高性能Web应用程序的不二之选，特别是在中大型项目开发中表现得尤为出色。本文将带你初探React的世界，了解其基本概念、安装过程及如何快速启动一个React项目。

React概览

React的核心理念是组件化，它鼓励开发者将UI（用户界面）拆分成一个个可复用的组件，每个组件负责管理自己的状态和渲染逻辑。这种模块化的开发方式极大地提高了代码的可维护性和可测试性。此外，React通过虚拟DOM（一种内存中的数据结构）来最小化实际DOM操作，从而提升了页面的渲染性能。

安装与环境配置

要开始React之旅，首先确保你的开发环境中已安装了Node.js及其包含的npm（Node包管理器）。随后，通过以下步骤安装创建React应用所需的工具：

  1. 全局安装Create React App： 打开终端或命令提示符，运行以下命令安装create-react-app，这是Facebook官方提供的一个脚手架工具，能够帮助我们快速初始化React项目。

    npm install -g create-react-app

    -g标志表示全局安装，这样你就可以在任何位置使用create-react-app命令了。想知道它安装到了哪里，可以运行npm config get prefix来查看全局安装路径。

    npm config ls：查看所有配置信息 create-react-app --version：可查看版本

  2. 创建React项目： 一旦安装完成，你可以通过简单的命令创建一个新的React项目。例如，创建一个名为my-react的项目：

    create-react-app my-react

    这个命令会自动下载所有必要的依赖，并设置好开发环境，包括Webpack、Babel等配置，让你几乎可以“开箱即用”。

项目结构解析

创建好的React项目结构清晰明了，主要包括以下几个关键部分：

  • src：这是你的主要开发目录，存放所有源代码，如index.js作为应用入口，以及全局样式文件index.css等。
  • node_modules：存放项目依赖的第三方库，包括React和ReactDOM等。
  • public：静态资源目录，存放index.html等公共资源，React应用最终会在这里生成一个或多个bundle文件供浏览器加载。
  • package.json：项目元数据和脚本配置文件，用于管理项目依赖和定义脚本命令。

Create React App的工作原理

当你运行npm start start启动项目时，背后实际上执行了一系列自动化任务：

  • 启动一个开发服务器，默认监听3000端口。
  • index.html被用作首页，其中通过<div id="root"></div>定义了React应用的挂载点。
  • Webpack负责实时编译源代码，并将结果输出到内存中，而不是直接写入磁盘，这加速了开发过程中的页面刷新速度。
  • React DOM通过查找root元素，将由React组件构成的UI树渲染到页面上。
<body>
    <!-- 根节点，接下来的表演交给react 现代全新开发方式 -->
    <div id="root"></div>
</body>

异步加载脚本

在index.html中，你会注意到React应用的入口脚本通常带有defer属性，这意味着脚本会在整个页面解析完成后，在DOMContentLoaded事件触发之后执行。这种方式确保了脚本不会阻塞页面的渲染，同时又能及时初始化React应用，提升用户体验。

async加入到script中也可以实现异步加载，但是无法让脚本在DOMContentLoaded事件触发之后执行，它会使脚本下载完就开始执行。

挂载方法

通过查找到root节点，再进行接下来的操作。不过该方法就不再进行DOM操作。

React.createElement('div',props(属性),children(子元素))

import React from 'react';
import ReactDOM from 'react-dom/client';
//root内部就是react的世界了
//root react的根节点
const root=ReactDOM.createRoot(
  //获取挂载点，以后react 就不再做DOM操作了
  document.getElementById('root')
);
const element=React.createElement('div',{id:'name'},'xiaomi1');
root.render(element);

image.png

JXS语法

代码简化，使用react内的语法--JXS。可以直接使用html。

const element=(<h1>xiaomi</h1>);
root.render(element);

image.png

拓展--适配高级技巧

@media screen and (max-width: 768px) {
    .App-header{
      background-color: green;
    }
    .App-link{
      background-color: blue;
    }
}

该技巧可以使屏幕小于768px时，实现下面效果。

总结

总之，React以其高效的组件模型、优化的DOM处理机制以及便捷的开发工具链，成为了现代Web开发不可或缺的一部分。通过Create React App，即使是初学者也能迅速搭建起一个功能完备的React开发环境，进而深入探索React的广阔天地。随着技术的不断演进，React将继续引领前端开发的潮流，为开发者带来更加高效、灵活的开发体验。

avatar
文章
阅读
粉丝