图文并茂15分钟教你快速入门React

React 是什么

简介

用于构建 Web 和原生交互界面的库
React 用组件创建用户界面
通俗来讲：是一个将数据渲染为HTML视图的开源JS库

其他信息

Facebook 开发，并且开源

为什么使用React?

原生JS使用DOM-API修改UI代码很繁琐，效率低下，React可以解决这种问题
原生JS直接操作DOM，浏览器会大量重绘重排，React可以解决这种问题
原生JS没有组件化方案好用，代码复用率很低，
React 采用组件化模式，React 让你可以通过组件来构建用户界面
React 使用声明式编码
React 使用虚拟DOM，将数据映射成虚拟DOM,再生成真实DOM,当数据变化的时候，会对原有的虚拟DOM和新的虚拟DOM进行比较,再生成真实DOM。
React 使用DOM diffing 算法，最小化页面重绘

特点

声明式设计 −为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

高效 −React采用Virtual DOM(虚拟DOM), 极大的提升了UI渲染(更新)效率。
灵活 −React 允许你结合其他框架或库一起使用。
JSX − JSX 是 JavaScript 语法的扩展。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流 − React 采用了单向响应的数据流，使组件状态更容易维护, 组件模块化更易于快速开发。

怎么用 React?

前置条件

ES6
Class
js基础

快速入门

我们以最快的方式先搞个DEMO项目练手

1. vscode安装appworks插件

2. 安装成功后，我们vscode左侧会出现这个图标，点击它

3. 查看右侧，选择一个干净的框架，快速创建一个react 项目

4. 输入项目名称，创建项目

5. 下载依赖，运行项目

#### 安装依赖
$ npm install

#### 启动服务
$ npm start  # visit http://localhost:3333

├── build/                         # 构建产物
├── mock/                          # 本地模拟数据
│   ├── index.[j,t]s
├── public/
│   ├── index.html                 # 应用入口 HTML
│   └── favicon.png                # Favicon
├── src/                           # 源码路径
│   ├── components/                # 自定义业务组件
│   │   └── Guide/
│   │       ├── index.[j,t]sx
│   │       ├── index.module.scss
│   ├── layouts/                   # 布局组件
│   │   └── BasicLayout/
│   │       ├── index.[j,t]sx
│   │       └── index.module.scss
│   ├── pages/                     # 页面
│   │   └── Home/                  # home 页面，约定路由转成小写
│   │       ├── components/        # 页面级自定义业务组件
│   │       ├── models.[j,t]sx     # 页面级数据状态
│   │       ├── index.[j,t]sx      # 页面入口
│   │       └── index.module.scss  # 页面样式文件
│   ├── configs/                   # [可选] 配置文件
│   │   └── menu.[j,t]s            # [可选] 菜单配置
│   ├── models/                    # [可选] 应用级数据状态
│   │   └── user.[j,t]s
│   ├── utils/                     # [可选] 工具库
│   ├── global.scss                # 全局样式
│   ├── routes.[j,t]s              # 路由配置
│   └── app.[j,t]s[x]              # 应用入口脚本
├── build.json                     # 工程配置
├── README.md
├── package.json
├── .editorconfig
├── .eslintignore
├── .eslintrc.[j,t]s
├── .gitignore
├── .stylelintignore
├── .stylelintrc.[j,t]s
├── .gitignore
└── [j,t]sconfig.json

运行项目，配置路由

创建组件文件

import * as React from 'react';

const HelloWorld = () => {
  function MyButton() {
    return <button>I'm a button</button>;
  }
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
};

export default HelloWorld;

配置路由

import { lazy } from 'ice';
import BasicLayout from '@/layouts/BasicLayout';

const Dashboard = lazy(() => import('@/pages/Dashboard'));
const HelloWorld = lazy(() => import('@/pages/HelloWorld'));
const routerConfig = [
  {
    path: '/',
    component: BasicLayout,
    children: [
      {
        path: '/HelloWorld',
        component: HelloWorld,
      },
      {
        path: '/',
        component: Dashboard,
      },
    ],
  },
];
export default routerConfig;

配置菜单

react-demo-xiaojin/src/layouts/BasicLayout/menuConfig.js

const headerMenuConfig = [];
const asideMenuConfig = [
  {
    name: 'Dashboard',
    path: '/',
    icon: 'smile',
  },
  {
    name: 'HelloWorld',
    path: '/HelloWorld',
    icon: 'smile',
  },
];
export { headerMenuConfig, asideMenuConfig };

成功展示

创建和嵌套组件(就是上面的组件案例哦)

React 应用由组件组成，React 组件是返回标签的 JavaScript 函数，就像下面这样

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

把它嵌套到另一个组件中

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

悄悄说一句：React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母

添加标签和样式

编写 JSX 语法的标签

JSX简介

1、全称：JavaScript XML
2、react定义的一种类似于XML的JS扩展语法：JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
3、作用：用来简化创建虚拟DOM
4、写法：

var ele = <h1>Hello JSX!</h1>

基本语法规则

1、定义虚拟DOM时，不要写引号；
2、标签中混入JS表达式时要用{}；
3、样式的类名指定不要用class，要用className；
4、内联样式，要用style={{key:value}}的形式去写；
5、只有一个根标签；
6、标签必须闭合；
7、标签首字母：

(1)小写字母开头，代表该标签转为html中同名元素
(2)大写字母开头，代表组件

JSX 标签，你必须为所有最高层级的标签添加一个共同的父标签，例如使用下面的标签作为父标签

 <div>...</div> 或 <>...</>

举个栗子

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}

如果你需要将大量 HTML 代码移植到 JSX 语法，可以使用这个在线转换器

添加样式

在 React 中，通过 className 这个属性来指定 CSS 类。它和 HTML 的 class 属性的功能是一样的：

<img className="avatar" />

然后在一个单独的 CSS 文件中为其编写 CSS 样式：

/* In your CSS */
.avatar {
  border-radius: 50%;
}

显示数据

举个栗子：以下代码将显示 user.name 的值。

return (
  <h1>
    {user.name}
  </h1>
);

举个栗子：以下代码读取 user.imageUrl 变量的值，然后将该值作为 src 的属性进行传递

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

举个栗子：字符串拼接

悄悄告诉你：style={{}} 是对象被放在了 style={ } 花括号里哦

return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

条件渲染的几种方式

if 语句

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

条件运算符

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

更简短的 && 语法

<div>
  {isLoggedIn && <AdminPanel />}
</div>

列表

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];


const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

对事件做出响应并更新界面

举个栗子：处理事件代码是这样写的哦~

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

如何点击按钮后更新页面数据呢？

从useState获得:当前状态(count)和更新它的函数(setCount)。你可以给它们取任何名字，惯例是[something, setSomething]。第一次显示按钮时，count将为0，因为将0传递给了useState()。当要改变状态时，调用setCount()并将新值传递给它。单击此按钮将增加计数器, React会再次调用你的组件函数。这一次，count将是1 ......

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

关于Use Hooks

以use开头的函数称为Hooks。useState是React提供的一个内置钩子。你可以在React API参考中找到其他内置Hooks。您还可以通过组合现有的hook来编写自己的hook。钩子比常规函数更具限制性。你只能在组件的顶层调用Hooks(或其他Hooks)。

在组件间共享数据

举个栗子

import { useState } from 'react';

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

下面是一个浅显易懂的父子组件传参案例

父组件

import Avatar from './Avatar.js';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

子组件

import { getImageUrl } from './utils.js';

export default function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

工具函数

export function getImageUrl(person, size = 's') {
  return (
    'https://i.imgur.com/' +
    person.imageId +
    size +
    '.jpg'
  );
}

今天先写到这里啦~明天开始，会添加详细介绍，将会包含以下方面：

添加交互

响应事件
State
更新状态中的对象、数组

管理状态

用状态响应输入
选择状态结构
在组件之间共享状态
保存和重置状态
将状态逻辑提取到一个reducer中
使用上下文深入传递数据
使用reducer和context进行扩展

小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~

大家要天天开心哦

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

在这里插入图片描述

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

posted @ 2023-05-22 00:54 糖~豆豆阅读(283) 评论(0) 编辑收藏举报

刷新页面返回顶部

糖~豆豆

图文并茂15分钟教你快速入门React

React 是什么

简介

其他信息

为什么使用React?

特点

怎么用 React?

前置条件

快速入门

我们以最快的方式先搞个DEMO项目练手

1. vscode安装appworks插件

2. 安装成功后，我们vscode左侧会出现这个图标，点击它

3. 查看右侧，选择一个干净的框架，快速创建一个react 项目

4. 输入项目名称，创建项目

5. 下载依赖，运行项目

目录

运行项目，配置路由

创建组件文件

配置路由

配置菜单

成功展示

创建和嵌套组件(就是上面的组件案例哦)

React 应用由组件组成，React 组件是返回标签的 JavaScript 函数，就像下面这样

把它嵌套到另一个组件中

添加标签和样式

编写 JSX 语法的标签

举个栗子

如果你需要将大量 HTML 代码移植到 JSX 语法，可以使用这个在线转换器

添加样式

显示数据

举个栗子：以下代码将显示 user.name 的值。

举个栗子：以下代码读取 user.imageUrl 变量的值，然后将该值作为 src 的属性进行传递

举个栗子：字符串拼接

条件渲染的几种方式

if 语句

条件运算符

更简短的 && 语法

列表

对事件做出响应并更新界面

举个栗子：处理事件代码是这样写的哦~

如何点击按钮后更新页面数据呢？

关于Use Hooks

在组件间共享数据

举个栗子

下面是一个浅显易懂的父子组件传参案例

父组件

子组件

工具函数

今天先写到这里啦~明天开始，会添加详细介绍，将会包含以下方面：

添加交互

管理状态

小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~

大家要天天开心哦

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

公告