白骑士的JavaScript教学生态系统篇之前端框架与库 5.2.2 React的基础与组件化开发

        React是由Facebook开发的一个用于构建用户界面的JavaScript库。它专注于视图层，并通过组件化开发方式使得开发复杂的用户界面变得更加高效和可维护。本文将介绍React的基础知识以及如何利用组件化开发来构建现代Web应用。

React概述

        React是一个用于构建用户界面的JavaScript库，主要用于构建单页面应用（SPA）。它通过虚拟DOM和组件化开发提供了高效、灵活的前端开发体验。

官方网站：React官网

主要特点

• 组件化：将UI拆分为可重用的组件，增强代码的可维护性。
• 虚拟DOM：通过虚拟DOM提高UI渲染性能。
• 声明式UI：使得编写动态UI变得更加直观和简洁。

React环境配置

安装React

        React的环境配置可以通过多种方式完成，以下是常见的方法：

• 使用Create React App：Create React App是一个官方提供的脚手架工具，可以快速创建React项目。

  npx create-react-app my-app
  cd my-app
  npm start

  ‘npx create-react-app‘命令会创建一个新的React项目并自动安装所有依赖。

• 手动配置：如果你希望手动配置React环境，可以使用npm或yarn安装React及其相关库：

  npm install react react-dom

  你还需要一个构建工具，如Webpack和Babel，来编译和打包你的React代码。

项目结构

        Create React App创建的项目结构如下：

my-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
└── README.md

• ‘public/‘：存放公共资源和静态文件。
• ‘src/‘：存放源代码，包括React组件、样式文件等。
• ‘index.js‘：应用的入口文件。
• ‘App.js‘：主组件。

React组件基础

组件的定义

        React组件可以分为两种类型：类组件和函数组件。

• 函数组件：使用函数定义的组件，通常用于没有复杂逻辑的简单组件。

  function Greeting(props) {
      return <h1>Hello, {props.name}!</h1>;
  }

<