登录 注册

React 从零到一 Demo 演练（上）

本贴最后更新于 1275 天前，其中的信息可能已经天翻地覆

废话

有的人会很懵逼把，为什么我想学习 Ant Design Pro，却来学习 React，这是因为 Ant Design Pro 作为开箱即用的中台框架，你需要有 React 基础，因为里面全 TM 是 JS 或者 TS（typeScript），如果有 React 基础的请跳过 React 教学部分。

PS:本文不会对 React 展开全部叙述，只是对部分东西进行学习，达到能够上手 AntD 做准备

如果想好好学习 React 可以看一下 React 官方中文文档 – 用于构建用户界面的 JavaScript 库 (docschina.org)

React 是什么

在 React 官网文档是这样说的：

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

在菜鸟教程中可以看到

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React 特点：

简洁、高效、灵活、JSX 格式、组件复用、相应流

开始

接下来以 WebStorm 为例：

  1. 创建项目

注意：项目名字只能是小写，不能大小写混合

image.png

  1. 等待加载

image.png

  1. 加载结束、运行项目

image.png

  1. 访问项目：

image.png

到这里你已经成功创建项目

  1. 打开 src 目录，保留 index.js 文件，删除其余文件

image.png

  1. 在 index.js 内写 HelloWorld
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>hello world</h1>,
  document.getElementById('root')
);

其中 documet.getElementById('root')是获取 public 文件夹下的 index.html 文件中 id 为 root 的节点

image.png

  1. 查看效果

image.png

接下来你就可以开始学习 React 了。

React 渲染

在刚刚的例子中，我们看到，在 ReactDOM.render 中的 helloworld 被渲染出来了，此时我们记住，ReactDOM.render 是用来渲染的, 它将对应的元素插入到相应的节点中。

在刚刚例子中，public 目录下有 index.html 文件，文件中有 id 为 root 的节点，所以 < h1 > 就被渲染到对应的节点中去了。

接下来我们在刚刚基础上变形,将 index.js 文件改为以下内容

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1 >this is a demo</h1>;
ReactDOM.render(
    element,
    document.getElementById('root')
);

注意：在 react 中插入元素，不允许存在同级标签，以下是错误的image.png

接下来再来感受两个例子：

import React from 'react';
import ReactDOM from 'react-dom';
function tick() {
    const element = (
        <div>
            <h1>nowtime：</h1>
            <h2> {new Date().getTime()}.</h2>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById('root')
    );
}
setInterval(tick, 100);


import React from 'react';
import ReactDOM from 'react-dom';
function tick() {
    const element = (
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    );
    ReactDOM.render(
        element,
        document.getElementById('root')
    );
}
setInterval(tick, 100);

组件

在 React 中组件是很重要的一部分，为了简化代码，就出现组件复用的概念，接下来看一下这个 demo，明白一下组件是啥

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello World!</h1>;
}

const element = <Hello />;

ReactDOM.render(
    element,
    document.getElementById('root')
);

注意看标签 Hello 标签，其实这个标签是不存在的，是我们自定义的，因此可以把组件简单理解为自定义标签

注意：自定义标签首字符一定要大写，一定要大写，Hello 不能写成小写的 hello，因为 html 原生标签是小写字母开头的，为了识别出来，自定义的标签一定要大写

然后在来看看下面例子加深印象

import React from 'react';
import ReactDOM from 'react-dom';

function Name() {
    return <h1>姓名：sirwsl</h1>;
}
function Age(){
    return <h1>年龄：24</h1>
}
function Sex(){
    return <h1>性别：男</h1>
}
ReactDOM.render(
    <div>
        <Name />
        <Age />
        <Sex />
    </div>,
    document.getElementById('root')
);

这时候我们会想要是我想让上面相关的变量不写死怎么办呢？

import React from 'react';
import ReactDOM from 'react-dom';

function Name(props) {
    return <h1>姓名：{props.name}</h1>;
}
function Age(props){
    return <h1>年龄：{props.age}</h1>
}
function Sex(props){
    return <h1>性别：{props.temp}</h1>
}

ReactDOM.render(
    <div>
        <Name name='sirwsl'/>
        <Age age='24'/>
        <Sex temp= '男'/>
    </div>,
    document.getElementById('root')
);

类

我们看一下下面的例子：

import React from 'react';
import ReactDOM from 'react-dom';

class Index extends React.Component{
    //构造器
    constructor() {
        super();
        this.state = {count : 0};
    }

    render() {
        return <h1>count:{this.state.count}</h1>
    }
}

ReactDOM.render(
    <Index />,
    document.getElementById('root')
);

在这个例子中我们看到开始出现像 JAVA 一样的 class 与 extends 关键字，结构和 java 也很类似。

constructor 是构造器，初始化的数据一般都在这，render()是将这个类中所有要渲染的东西都放在这里渲染、返回。

State 与 Props

react 其实就是这样，接下来我们在看 State 与 Props 时，我们先看个例子·

import React from 'react';
import ReactDOM from 'react-dom';

class Index extends React.Component{
    //构造器
    constructor(props) {
        super(props);
        this.state = {count: 0};
	//绑定事件，一般来说onClick都需要有bind
        this.add = this.add.bind(this);
        this.inc = this.inc.bind(this);
    }
    add(){
        this.setState({count:this.state.count+1});
    }

    inc(){
        this.setState({count:this.state.count-1});
    }

    render() {
        return <>
        <button onClick={this.add}>点击+1</button>
        <button onClick={this.inc}>点击-1</button>
            <h1>count:{this.state.count}</h1>
        </>
    }
}

ReactDOM.render(
    <Index />,
    document.getElementById('root')
);

这里我看看到开始引入了 state，如果对于学过 java 或者 C#之类的人来说，state 的作用其实就是定义变量，就相当于 java 中的类的私有变量，在本类中提供给其他方法使用的，也就是在类中是共享的。

import React from 'react';
import ReactDOM from 'react-dom';

class Index extends React.Component {

    constructor() {
        super();
    }

    render() {
        return <>
            <h2>我是Index(父亲)要给儿子传值</h2>
        <Demo value = {123} />
        </>
    }
}

class Demo extends React.Component{
    constructor(props) {
        super(props);
        this.state = {indexValue:this.props.value};
    }

    render() {
        return <>
        <h1>这是父亲给我的值:{this.state.indexValue}</h1>
        </>
    }
}

ReactDOM.render(
    <Index />,
    document.getElementById('root')
);

在上面的例子中我们看到，父亲 Index 调用 Demo,在调用的时候给了儿子一个值‘123’，儿子通过 props 获取到爹给值，然后显示了出来。

从两个例子中大概归纳一下就是：

state 组件内的调用，类似组件内共享数据

props 是父子组件之间调用，子组件获取父组件的值

再来看一组例子加深一下印象：

import React from 'react';
import ReactDOM from 'react-dom';

class WebSite extends React.Component {
    constructor() {
        super();
        this.state = {
            name: "sirwsl",
            site: "https://www.wslhome.top"
        }
    }
    render() {
        return (
            <div>
                <Name name={this.state.name} />
                <Link site={this.state.site} />
            </div>
        );
    }
}
class Name extends React.Component {
    render() {
        return (
            <h1>{this.props.name}</h1>
        );
    }
}
class Link extends React.Component {
    render() {
        return (
            <a href={this.props.site}>
                {this.props.site}
            </a>
        );
    }
}
ReactDOM.render(
    <WebSite />,
    document.getElementById('root')
);

写不动了，收拾回宿舍了，内容看下一篇

相关链接

上一篇：👀

Ant Design Pro 从零到一教程

下一篇：👀

React 从零到一 Demo 演练（下）

Ant Design Pro 系列：👀

Ant Design Pro 从零到一教程

React 从零到一 Demo 演练（上）

React 从零到一 Demo 演练（下）

Ant Design Pro 从零到一（认识 AntD）

Ant Design Pro 从零到一（页面创建）

Ant Design Pro 从零到一（Mock 使用）

Ant Design Pro 从零到一（学习 Model）

Ant Design Pro 从零到一 （总结）

  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 384 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 1 关注
昆明 位置
249 23 44 40 24 6 111

相关帖子

回帖
React 从零到一 Demo 演练（上）

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
sirwsl
代码和你 昆明
回帖
62
 帖子
60
 积分
4484