Li Hui Blog

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

React JSX语法再实践

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

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

 1const Button = ({color,text}) =>{
 2    return {
 3        type: 'button',
 4        props: {
 5            className: `btn btn - $ {
 6                color
 7            }`,
 8            children: {
 9                type: 'em',
10                props: {
11                    children: text,
12                },
13            },
14        },
15    };
16}

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


React 组件示例

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

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

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


如何搭建第一个 React 程序

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

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