前端框架--React新建组件

最新推荐文章于 2025-09-08 17:59:21 发布

weixin_34395205

最新推荐文章于 2025-09-08 17:59:21 发布

阅读量92

点赞数

CC 4.0 BY-SA版权

文章标签：前端框架 javascript ui ViewUI

原文链接：https://juejin.im/post/5ce5fcc5518825333d1b93d5

本文介绍了组件的含义，它可将UI拆分为独立可复用代码片段。阐述了使用JavaScript函数和ES6进行组件定义的方法，还给出组件定义实践步骤，包括新建文件、写入内容等，最后可在localhost:3000看到效果。

版权声明：本文为博主原创文章，未经博主允许不得转载。

组件的含义？

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思.
从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素.

定义组件

使用JavaScript函数进行组件定义.

    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }
复制代码

使用ES6进行组件定义.

    class Welcome extends React.Component {
      render() {
        return <h1>Hello, {this.props.name}</h1>;
      }
    }
    
    * class(类)  组件名 extends(继承)  React.Component(react组件)
复制代码

组件定义实践

src目录下新建Welcome.js文件.

在Welcome.js内写入组件内容.

    import React from 'react';   //导入react    
    class Welcome extends React.Component{   //创建组件，ES6声明方式
        render(){                            //react调用render函数进行渲染
            return <h1>hello world</h1>      //组件内容
        }
    }
    
    export default Welcome;                 //导出组件

复制代码

在入口文件index.js内.

    import Welcome from './Welcome';
    ReactDOM.render(<App />, document.getElementById('root'))
    试改成
    ReactDOM.render(<Welcome />, document.getElementById('root'));
复制代码

4.在localhost:3000内可看见效果.

转载于:https://juejin.im/post/5ce5fcc5518825333d1b93d5