纯小白React入门（一）前言本系列文章属于纯前端小白学习react的记录总结，按照react官网的入门文章进行梳理

前言

本系列文章属于纯前端小白学习react的记录总结，按照react官网的入门文章进行梳理

关键字和概念

JSX：一种 JavaScript 的语法扩展，用于在 JavaScript 代码中编写类似 HTML 结构的标记
组件（Component） ：React 应用程序中的基本构建块，可以将页面拆分为独立的组件以提高可维护性和重用性。
状态（State） ：组件内部的数据状态，当状态发生改变时，React 会重新渲染组件以反映最新的状态。
属性（Props） ：组件之间传递数据的方式，父组件通过属性将数据传递给子组件。
生命周期方法（Lifecycle Methods） ：组件在挂载、更新和卸载等不同阶段会触发不同的生命周期方法，比如 componentDidMount 和 componentWillUnmount。
虚拟 DOM（Virtual DOM） ：React 使用虚拟 DOM 来提高性能，将虚拟 DOM 与实际 DOM 进行比较并仅更新必要的部分。
事件处理：React 支持事件处理，你可以在组件中声明事件处理函数并将其绑定到相应的元素上。
条件渲染（Conditional Rendering） ：根据不同条件来渲染不同的内容，例如使用条件语句或三元表达式。
列表渲染（List Rendering） ：通过数组数据来渲染列表数据，通常使用 map() 函数来遍历数组并渲染列表项。
Hook：React 16.8 引入的新特性，允许在函数组件中使用状态和其他 React 特性，如 useState 和 useEffect 等

export& default 关键字

在 JavaScript 中，export 和 default 关键字用于模块化开发，其中 export 用于在文件中导出函数、对象或变量，而 default 则用于指明模块中默认导出的函数或对象

export 关键字：
- export 关键字用于在一个模块文件中导出函数、对象或变量，使得其他文件可以访问这些导出项。
- 通过使用 export，可以选择性地将某个函数、对象或变量导出，以便其他文件可以使用它们。
- 使用 export 关键字还可以导出匿名函数、类或对象，从而使其在其他文件中可用。

// 例子：导出一个函数
export function myFunction() {
    // 函数体
}

default 关键字：
- default 关键字用于标识模块中的默认导出项，一个模块只能有一个默认导出项。
- 当其他文件导入该模块时，如果没有明确指定要导入的内容，那么将会导入默认导出的函数或对象。
- 默认导出项可以是函数、类、对象或任何值。

// 例子：默认导出一个函数
export default function myFunction() {
    // 函数体
}

综合理解：

当使用 export 关键字导出函数或对象时，其他文件需要使用 {} 来导入这些项。
当使用 default 关键字导出函数或对象时，其他文件可以直接导入默认项，不需要使用 {}。

举例来说，如果有一个文件名为 module.js，其中包含默认导出一个函数和其他几个导出项，其他文件可以这样引用这些项：

// 引入默认导出的函数
import myDefaultFunction from './module';

// 引入其他导出项
import { someFunction, someObject } from './module';

添加样式

1. 内联样式（Inline Styles） ：

在 React 组件中直接使用内联样式，可以将样式作为一个 JavaScript 对象传递给组件的 style 属性。

const myStyle = {
  color: 'blue',
  fontSize: '16px'
};

function MyComponent() {
  return <div style={myStyle}>Hello, RubyFun!</div>;
}

2. CSS 文件：

在 React 项目中引入外部的 CSS 文件。

import './styles.css';

function MyComponent() {
  return <div className="myClass">Hello, RubyFun!</div>;
}

3. CSS Modules：

使用 CSS Modules 可以确保 CSS 样式仅适用于特定的组件，避免全局污染。

Styles.module.css:

.someClass {
  color: red;
}

Component.js:

import styles from './Styles.module.css';

function MyComponent() {
  return <div className={styles.someClass}>Hello, RubyFun!</div>;
}

4. CSS-in-JS 方案（如 Emotion） ：

可以直接在 JSX 中编写 CSS。

/** @jsxImportSource @emotion/react */
/** @jsx jsx */

import { jsx, css } from '@emotion/react';

function MyComponent() {
  return <div css={css`color: red;`}>Hello, RubyFun!</div>;
}

显示数据

在 React 中显示数据通常涉及将数据传递到组件中，并在 JSX 中渲染这些数据

显示基本数据：

可以直接在 JSX 中显示基本数据类型，比如字符串、数字和布尔值。

function MyComponent() {
  const name = 'shisan';
  const age = 18;
  const isFunny = true;

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Is Funny: {isFunny ? 'Yes' : 'No'}</p>
    </div>
  );
}

显示数组数据：

使用 map 函数可以在 JSX 中渲染数组数据。

function MyComponent() {
  const numbers = [1, 2, 3, 4, 5];

  return (
    <ul>
      {numbers.map((number) => (
        <li key={number}>{number}</li>
      ))}
    </ul>
  );
}

显示对象数据：

显示对象数据时，需要注意对象的属性访问。

function MyComponent() {
  const person = {
    name: 'shisan',
    age: 18,
    occupation: 'Developer'
  };

  return (
    <div>
      <p>Name: {person.name}</p>
      <p>Age: {person.age}</p>
      <p>Occupation: {person.occupation}</p>
    </div>
  );
}

使用 Props 传递数据：

父组件可以通过 Props 向子组件传递数据，子组件可以接收这些数据并显示。

ParentComponent.js:

function ParentComponent() {
  const message = 'Hello from Parent';

  return <ChildComponent message={message} />;
}

ChildComponent.js:

function ChildComponent(props) {
  return <p>{props.message}</p>;
}

使用 State 管理动态数据：

通过 State 更新数据并进行重新渲染。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

纯小白React入门（一）

前言

关键字和概念

export& default 关键字

添加样式

显示数据

参考