自动创建 React 项目，React CSS Modules，React Fragment

 

目录

1.  创建 React 项目

2. React CSS Modules        

2.1 使用 React CSS Modules 的示例

2.2 主要优点

3. React Fragment

3.1 使用方式

3.1.1 使用 标签

3.1.2 使用简写语法 <>

3.1.3 使用 Fragment 组件

3.2 主要作用

---

1.  创建 React 项目

npx create-react-app reactProject 

        用于在当前目录下创建一个名为 reactProject 的新的 React 应用程序。通过运行上述命令，我们可以快速创建一个基于 React 的应用程序，并且不需要手动安装和配置 React、Webpack、Babel 等工具。
注：

• npx 是一个 npm 包执行工具，它可以帮助我们在不全局安装包的情况下，直接运行安装在 npm registry 上的包。
• create-react-app 是一个已经发布在 npm registry 上的包，它是一个用于创建 React 应用程序的脚手架工具。
   

2. React CSS Modules        

        用于管理 CSS 样式的技术，它可以帮助我们在 React 应用程序中更好地组织和管理 CSS 样式，避免样式冲突和全局污染。
        使用 React CSS Modules，我们可以将 CSS 样式文件与组件文件一起编写，并使用特殊的语法来定义样式类名。这些样式类名会自动转换为唯一的、局部作用域的类名，从而避免了全局污染和样式冲突。

2.1 使用 React CSS Modules 的示例

• Button.module.css

.button{
    background: green;
}

• Button.js

import classes from './Button.module.css';

function Button() {
  return (
    <button className={classes.button}>
      Click me
    </button>
  );
}
export default Button

在这个示例中，我们使用了一个名为 Button.module.css 的 CSS 样式文件，并通过 import 语句将其导入到组件文件中。然后，我们使用 classes.button 来定义按钮的样式类名，这个样式类名会被自动转换为唯一的、局部作用域的类名。 

2.2 主要优点

1. 避免样式冲突和全局污染，提高样式的可维护性和可重用性；
2. 支持 CSS 预处理器，如 Sass、Less 等；
3. 支持动态生成的样式类名，可以根据组件的状态和属性来动态生成样式；
4. 支持 CSS Modules 的高级特性，如组合、继承、局部作用域等。

        总之，React CSS Modules 是一种非常实用的技术，可以帮助我们更好地管理和组织 CSS 样式，提高应用程序的可维护性和可重用性。

3. React Fragment

• React Fragment 是 React 16 版本中新增的一个组件
• 作用：可以让我们在不增加额外节点的情况下，将多个子元素组合在一起。
• 优点：避免渲染多余的 DOM 节点，从而提高应用程序的性能。

3.1 使用方式

3.1.1 使用 <React.Fragment> 标签

import React from 'react';

function App() {
  return (
    <React.Fragment>
      <h1>Hello</h1>
      <p>World</p>
    </React.Fragment>
  );
}

3.1.2 使用简写语法 <>

import React from 'react';

function App() {
  return (
    <>
      <h1>Hello</h1>
      <p>World</p>
    </>
  );
}

3.1.3 使用 Fragment 组件

import React, { Fragment } from 'react';

function App() {
  return (
    <Fragment>
      <h1>Hello</h1>
      <p>World</p>
    </Fragment>
  );
}

        以上三种方式都可以达到相同的效果，即将多个子元素组合在一起，而不会增加额外的 DOM 节点。

3.2 主要作用

        React Fragment 的主要作用是优化渲染性能，避免不必要的 DOM 节点，同时也可以提高代码的可读性和可维护性。在开发 React 应用程序时，建议尽可能使用 React Fragment 来组合多个子元素。