Li Hui Blog

在历史的层林尽染中书写时代的年华。效能 (2022) 演化 (2023) 本源 (2024) YOLO(2025)

React JSX语法再实践

我们上一节封装了一个按钮,这一节我们继续理解封装的概念和了解封装组件需要注意的事项

首先我们回顾上一篇最后的代码,代码如下

const Button = ({color,text}) =>{
    return {
        type: 'button',
        props: {
            className: `btn btn - $ {
                color
            }`,
            children: {
                type: 'em',
                props: {
                    children: text,
                },
            },
        },
    };
}

我们最终调用的形式如下所示 Button({color:‘blue’, text:‘Confirm’}) 进行创建,其实我们发现 Buttonbutton 或者和 em 一样都可以 作为一个元素存在,我们可以以 Button 为基础创建特定属性的按钮,将其称为自定义类型的元素 或者可以称为组件元素。和上一节相同,我们可以采用 JSON 结构来描述它


React 组件示例

上一节,我们使用 create-react-app 生成示例程序的代码,这一节我们详细介绍下如何进行修改代码

看了一些 React 的书籍,其实 React 使用 JSX 语法,将程序的模块化和抽象做的很好。

我们新建立的程序的目录如下


如何搭建第一个 React 程序

最近在公司中的项目中是一个 React native 开发的程序,因此就有了这个文章,搭建第一个 React 的程序。

这个应该会很快写完,毕竟比较简单,这篇文章的目的还是尝试如何创建第一个React程序