从0到1无比流畅的React入门教程

无比流畅的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基础

文档

基础知识-点击获取教程代码

基础概念了解（也可以直接跳过概念，去看下面的快速上手部分哦）

了解 Babel

  • ES6转化为ES5
  • JSX转化为JS

了解 模块与组件

模块

  • 1、理解：向外提供特定功能的js文件；
  • 2、业务逻辑增加，代码越来越多且复杂，需要拆成模块
  • 3、作用：复用js，简化js的编写，提高js运行效率；

组件

  • 1、理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)；
  • 2、为什么要用组件： 一个界面的功能更复杂，拆分成一个一个小组件，更容易复用
  • 3、作用：复用编码，简化项目编码，提高运行效率；
    模块化、组件化
    应用的js都以模块来编写-就是模块化
    应用是以多组件的方式实现-就是组件化

React开发者工具

引入依赖库，理解基础jsx语法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- React 核心库、 -->
    <script src="lib/react/react.development.js"></script>
    <!-- 操作 DOM 的 react 扩展库、 -->
    <script src="lib/react/react-dom.development.js"></script>
    <!-- 将 jsx 转为 js 的 babel 库 -->
    <script src="lib/babel.min.js"></script>
  </head>
  <body>
    <!-- 创建react解析的容器 -->
    <div id="xiaojin"></div>
    <script type="text/babel">
      var msg = "I am xiaojin!!!";
      //1.创建虚拟DOM
      const VDOM = (
        /* 此处一定不要写引号，因为不是字符串 */
        <h1 id="title">
          <span>Hello,{msg}</span>
        </h1>
      );
      //2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("xiaojin"));
    </script>
  </body>
</html>

注释-在花括号里

ReactDOM.render(
    <div>
    {/*注释...*/}
     </div>,
    document.getElementById('XXX')
);

数组-JSX 允许在模板中插入数组,且自动展开

var arr = [
  <h1>A</h1>,
  <h1>B</h1>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('XXX')
);

组件

  • react提供两种形式创建组件，函数式组件和class形式

组件使用注意事项：

  1. 组件名必须是首字母大写

  2. 虚拟DOM元素只能有一个根元素

  3. 虚拟DOM元素必须有结束标签 < />

函数式组件

// 创建函数，返回一个虚拟DOM
function Test(props) {
  return <h1>Hello, {props.name}</h1>;
}
// 渲染
ReactDOM.Render(<Test name = "xiaojin" />,document.getElementById("div"));

class形式，这个提一下，后面就不再举例啦，之后都用函数式

  <div id="root"></div>
  <script type="text/babel">
    var msg = 'hello,world!';
    // class形式
    class HelloWorld extends React.Component {
      render(){
        console.log('this',this);
        return (
          <div>{msg}</div>
        )
      }
    }
    ReactDOM.render(<HelloWorld />,document.getElementById('root'));

组件核心属性

state
通俗理解：state就是组件的一些数据绑定，数据变了，页面就会变，这是我的理解哦

注意事项

  • 1、切勿直接修改state数据，直接state会重新渲染内容；
  • 2、通过setState修改后，不会立即修改DOM，react会在所有状态改变后，对比虚拟DOM，统一修改，提升性能；

关于this

    1. 组件中的 render 方法中的 this 为组件实例对象
    1. 组件自定义方法中由于开启了严格模式，this 指向 undefined 如何解决
    2. 通过 bind 改变 this 指向
    3. 推荐采用箭头函数，箭头函数的 this 指向

因为类式组件基本不怎么用，所以接下来只写函数式组件内容啦

props
理解

  • 1、每个组件对象都会有props(properties的简写)属性；
  • 2、组件属性保存在props中；

作用

  • 1、通过标签属性从外向组件内传递变化的数据；
  • 2、props只读

使用：

<script type="text/babel">
  function Person(props) {
    const { name, age, sex } = propsreturn(
      <ul>
        <li>姓名：{name}</li>
        <li>性别：{sex}</li>
        <li>年龄：{age}</li>
      </ul>
    );
  }
  Person.propTypes = {
    name: PropTypes.string.isRequired,
    // 限制name必传，且为字符串sex:PropTypes.string, 限制sex为字符串age:PropTypes.number, 限制age为数值
  };
  // 标签属性值
  Person.defaultProps = {
    sex: "女",
    age: 18,
  };
  ReactDOM.render(<Person name="XIAOJIN" />, document.getElementById("root"));
</script>

refs
组件内的标签可以定义ref属性来标识自己

有三种操作refs的方法，分别为：

  • 字符串形式
  • 回调形式 render(){return(
    <input ref={c => this.input1 = c } type="text" /> 箭头函数简写,使用时可通过this.input1来使用
  • createRef形式
    createRef step1:给DOM元素添加ref属性
<input ref={this.MyRef} type="text" placeholder="点击弹出" />
<input ref={this.MyRef1} type="text" placeholder="点击弹出" />

createRef step2:通过API，创建React的容器，会将DOM元素赋值给实例对象的名称为容器的属性的current

MyRef = React.createRef();
MyRef1 = React.createRef();
// 调用
btnOnClick = () =>{
    // 创建之后，将自身节点，传入current中
    console.log(this.MyRef.current.value);
}

事件处理

  1. React 使用自定义事件，非原生 DOM 事件

  2. React 事件通过事件委托方式处理（更高效）

  3. 可用 event.target获取 DOM 减少 refs使用

非受控租价与受控组件

包含表单元素的组件分为非受控租价与受控组件

  • 受控组件：表单组件的输入组件随着输入并将内容存储到状态中（随时更新）
  • 非受控组件：表单组件的输入组件的内容在有需求的时候才存储到状态中（即用即取）
    受控组件
  • 1、表单元素依赖于状态，表单元素需要默认值实时映射到状态的时候，就是受控组件，这个和双向绑定相似；
  • 2、元素修改实时映射状态值，可对输入内容进行校验；
  • 3、只有继承React.Component才有状态；
  • 4、必须使用onChange绑定
    非受控组件
  • 1、在虚拟DOM节点上声明ref，且将引用赋值ref
  • 2、react会自动将输入的值放在实例的ref属性上

注意：官方推荐受控组件，更好的控制组件生命流程

  • 1、受控组件的两个要点：
    组件的value属性与React中的状态绑定
    组件内声明了onChange事件处理value的变化
  • 2、非受控组件更像是传统的HTML表单元素，数据存储在DOM中，而不是组件内部，获取数据的方式是通过ref引用；
  • 3、尽可能使用受控组件；
  • 4、受控组件是将状态交由React处理，可以是任何元素，不局限于表单元素；
  • 5、大量表单元素的页面，使用受控组件会使程序变得繁琐难控，此时使用非受控组件更为明智；

快速入门

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

1. vscode安装appworks插件(这个appworks大家反映已经不能用了，请参考我补充的其他方式，往下翻)

2. 安装成功后，我们vscode左侧会出现这个图标，点击它(这个appworks大家反映已经不能用了，请参考我补充的其他方式，往下翻)

3. 查看右侧，选择一个干净的框架，快速创建一个react 项目(这个appworks大家反映已经不能用了，请参考我补充的其他方式，往下翻)

4. 输入项目名称，创建项目(这个appworks大家反映已经不能用了，请参考我补充的其他方式，往下翻)

5. 下载依赖，运行项目

#### 安装依赖
$ npm install

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

看这里：其他创建项目的方式（最新补充）

在你喜欢的目录下，打开黑窗口，或者是使用vscode运行命令

npm create ice react-study-xiaojin

使用vscode打开项目目录，下载依赖，运行项目

    yarn install
    yarn start


运行成功

新版本目录

.
├── README.md
├── ice.config.mts                  # The project config
├── package.json
├── .browserslistrc                 # Browsers that we support
├── public
│   ├── favicon.ico   
├── src
|  ├── app.ts                       # App entry
|  ├── assets
|  ├── components                   # Common component
|  ├── document.tsx
|  ├── global.css                   # Global style
|  ├── interfaces
|  ├── menuConfig.tsx               # Layout menus
|  ├── models
|  ├── pages                        # Pages directory
|  ├── services
|  ├── store.ts                     # App store
|  └── typings.d.ts
└── tsconfig.json

For more detail, please visit docs.

老版本目录（可以直接下载现成代码运行，目录是这样的）

├── 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 @   糖~豆豆  阅读(205)  评论(0)  编辑  收藏  举报
相关博文：
· 图文并茂15分钟教你快速入门React
· 图文并茂教你快速入门React系列04-状态管理
· 快速入门React(基础)
· React-教程
· SpringBoot2-和-React-全栈开发实用指南-全-
阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
Live2D
欢迎阅读『从0到1无比流畅的React入门教程』
点击右上角即可分享
微信分享提示