前端框架--React新建组件

跟着啊一有肉吃

2019-05-23 288 阅读1分钟

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

组件的含义？

组件允许你将 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内可看见效果.