Yuan's Blog

Styling in React

  • import './index.css';
  • index.css is typically used for global styles
  • Basic resets, body styles, universal fonts
  • Imported in index.js

CSS in React

  • App.css is often used to style the main App component or styles that are more specific to the core of your app
  • Main layout, root structure, styles unique to the app
  • Imported in App.js

CSS Modules in React

  • App.css: This is a regular CSS file. Any styles defined here are global by default
  • App.module.css: This is a CSS Module file. When you rename a CSS file to end with .module.css

Styled Components in React

  • const StyledButtonLarge = styled (StyledButton)padding: 10px;;Extending Styles from Another Styled Component

  • Styling a <form> Element

const StyledSearchForm = styled.form`
  padding: 10px 0 20px 0;
  display: flex;
  align-items: baseline;
`

SVGs in React

  • Importing an SVG File Directly as a Componentimport { ReactComponent as Icon } from './assets/icon.svg';
  • Inlining SVG as JSX Code:
const MyIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="50"
    height="50"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <circle cx="12" cy="12" r="10" />
    <line x1="12" y1="8" x2="12" y2="12" />
    <line x1="12" y1="16" x2="12.01" y2="16" />
  </svg>
)
  • Using SVG as background-image in CSS
/* styles.css */
.icon-background {
  width: 50px;
  height: 50px;
  background-image: url ('./assets/icon.svg'); /* Path to SVG file */
  background-size: cover;
}

React Maintenance

Performance in React (Advanced)

  • Don’t re-render if not needed
  • React’s memo API checks whether the props of a component have changed. If not, it does not re- render even though its parent component re-rendered.
  • how can the memo and use call combine with each other to prevent re-render;a new function is created every time it’s defined inside a component,Using useCallback for Stable Function References

Don’t rerun expensive computations

  • memo: Prevents child components from re-rendering unnecessarily
const MyComponent = React.memo ((props) => {
  console.log ('Rendered MyComponent');
  return <div>{props.value}</div>;
});
  • useMemo:Avoids re-computing expensive calculations
const memoizedValue = React.useMemo (() => expensiveFunction (dependency), [dependency]);
  • useCallback:Avoids creating new function references on every render

typescript

  • React application is finally typed by TypeScript

Testing in React

  • Unit tests are for small, isolated blocks of code, such as a single function or component.
  • Unit tests are for small, isolated blocks of code, such as a single function or component. Integration tests help us figure out how well these blocks of code work together
  • end-to-end tests simulate a real-life scenario, like a user logging into a web application.
  • Test Suites, Test Cases, and Assertions

React Project Structure

  • Sorting
  • Reverse Sort
  • Remember Last Searches
  • Paginated Fetch

//In React, we use useState to store these things.

  • React 中的 状态(state) 就像是我们应用中存储信息的容器
  • 你定义状态的地方,通常也是你更新数据的地方。
  • 在 React 组件中,除了数据的管理和副作用的处理,其他的业务逻辑都通常由函数来处理。这些函数可以是事件处理函数(如按钮点击)或数据处理函数(如排序、筛选)
  • React 使用 JSX 来描述 UI,
  • useState 就是你存放商品的仓库
  • useEffect 就是生产线的启动器,当组件(生产线)第一次启动时,useEffect 就会执行一些初始化的操作,比如从 API 获取数据,就像是从外部进货、开始处理商品。
  • 函数是生产线上的工人,它们负责处理数据,进行排序、过滤等操作,并根据需求更新仓库中的商品(即更新状态)。
  • return 部分则是展示出来的产品,它展示了仓库中所有的商品,并且提供了让用户与商品交互的界面,比如按钮、输入框等。

React 组件的生命周期

  • 初始化阶段:组件创建时,React 会调用 useState 初始化数据,useEffect 会执行一些副作用(比如 API 请求)。
  • 渲染阶段:每次组件的状态或 props 发生变化时,React 会重新渲染 UI
  • 清理阶段:如果需要清理资源(如定时器、订阅等),可以在 useEffect 中返回一个清理函数,确保组件卸载时能够清理资源。
  • 副作用是指那些不会直接影响组件输出的操作,但是会对外部环境产生影响或者需要从外部环境获取信息。这些操作包括:
    • 数据请求:从外部 API 获取数据
    • 订阅事件:比如从服务器接收推送消息
    • 操作 DOM:直接修改 DOM(虽然 React 本身会管理 DOM,但有时你需要做一些直接操作)
    • 设置定时器:比如使用 setTimeout 或 setInterval 来定时执行某些操作