React笔记（一）

基础型

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
    />
  )
}

默认	
export default function Button() {}	
import Button from './Button.js';
具名	
export function Button() {}	
import { Button } from './Button.js';

react项目基本结构

src文件

components，存放可复用的React组件，每个组件通常包含一个单独的文件夹，其中包含组件的JSX文件、样式文件和可能的
测试文件。
containers，存放容器组件，这些组件负责管理数据和状态，并将它们传递给展示组件。
assets，存放项目所需的静态资源，如图片、字体文件等。
styles，存放全局样式文件或者样式变量文件。
utils，存放项目所需的工具函数或者帮助类。
services，存放与后端交互的服务文件。
routes，存放路由配量文件，用于管理页面之间的跳转关系。
App.js，项目的主组件，通常包含路由配置和全局状态管理的Provider。
index. js，项目的入口文件，通常用于渲染根组件并挂载到DOM上。

其他

public目录，这是存放静态资源的目录，如HTML文件、favicon. ico等。
config目录，存放项目的配置文件，如webpack配置、eslint配置 等。
tests目录，存放项目的测试文件。
node_ modules目录， 存放项目依赖的第三方模块。

JSX: 将标签引入 JavaScript

将一个按钮的渲染逻辑和标签放在一起可以确保它们在每次编辑时都能保持互相同步。反之，彼此无关的细节是互相隔离的，例如按钮的标签和侧边栏的标签。这样我们在修改其中任意一个组件时会更安全。
JSX 规则:只能返回一个根元素 
如果你不想在标签中增加一个额外的 <div>，可以用 <> 和 </> 元素来代替：

由于渲染逻辑和标签是紧密相关的，所以 React 将它们存放在一个组件中。
JSX 类似 HTML，不过有一些区别。如果需要的话可以使用 转化器 将 HTML 转化为 JSX。
错误提示通常会指引你将标签修改为正确的格式。

在 JSX 中通过大括号使用 JavaScript

想要动态地指定 src 或 alt 的值呢？你可以 用 { 和 } 替代 " 和 " 以使用 JavaScript 变量

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

在 JSX 中，只能在以下两种场景中使用大括号：

用作 JSX 标签内的文本：
<h1>{name}'s To Do List</h1> 是有效的，但是 
<{tag}>Gregorio Y. Zara's To Do List</{tag}> 无效。
用作紧跟在 = 符号后的 属性：
src={avatar} 
会读取 avatar 变量，但是 
src="{avatar}" 
只会传一个字符串 {avatar}。

注意项

1. React 组件是常规的 JavaScript 函数，但 组件的名称必须以大写字母开头，否则它们将无法运行！
2. 组件可以渲染其他组件，但是 请不要嵌套他们的定义：

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

3. 无论是 './Gallery.js' 还是 './Gallery'，在 React 里都能正常使用，只是前者更符合 原生 ES 模块。
4. 因为react其实是通过js的reader函数渲染的页面，所以直接写src=“路径”是无法引入图片

我们可以像引入模块一样引入图片
1
import img from './../../../../asset/img/user.png'
需要用下面的方式引入
1
<img src={require('../images/picture.png')} alt="标签"/>