怎样用 create-react-app脚手架编写react组件

╰半夏微凉° 2023-06-15 13:24 6阅读 0赞

首先用create-react-app创建一个项目，然后创建一个js文件，编写代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70][]

引入组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 1][]

引入React来解析jsx语法

import React from 'react';

定义一个函数，return里面就可以写html css js，当调用这个函数的时候就会渲染成对应的页面  
这里只是最简单的hello world  
这里面就是要使用jsx语法来写

const Header = () => {
        return (
            <div>hello world</div>
        )
    }

// 最后导出这个函数  
export default Header

这样一个简单的react组件就写好了

当然，用类写法也是可以的，不过用类写法就需要引入Component组件，所有的react组件都要继承这个

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191122161732860.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191122161747721.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191122162554294.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA==,size_16,color_FFFFFF,t_70