React on Li Hui Blog

React JSX语法再实践

Fri, 07 Jan 2022 14:41:37 +0000

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

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

 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’}) 进行创建，其实我们发现 Button 和 button 或者和 em 一样都可以作为一个元素存在，我们可以以 Button 为基础创建特定属性的按钮，将其称为自定义类型的元素或者可以称为组件元素。和上一节相同，我们可以采用 JSON 结构来描述它

React 组件示例

Thu, 06 Jan 2022 15:13:02 +0000

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

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

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

如何搭建第一个 React 程序

Wed, 05 Jan 2022 14:22:22 +0000

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

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