react前端框架实用技能篇

Posted 2021-04-05 LNMP开发者

在前期我已发布了react框架基础代码搭建，在本期中我来给大家介绍下react框架组件的使用，组件的创建、组件的嵌套

webpack-dev-server使用

在开始介绍组件之前，我来说下webpack-dev-server这个命令带来的开发便利性，它的优点在于我们修改完代码是不需要刷新我们的浏览器就会自动更新我们修改的内容进行显示，还有一点就是不需要重启我们的项目服务

(1) 创建一个三个组件header.js、content.js、footer.js三个文件

header.js组件代码如下：

import React from 'react'

export default class Header extends React.Component{

render(){

return(

<footer>

<div>这个是页头</div>

</footer>

)

}

}

content.js组件代码如下：

import React from 'react'

export default class Content extends React.Component{

render(){

return(

<footer>

     <div>

                         平哥、安哥、小玉姐,都是技术大牛

     </div>

</footer>

)

}

}

footer.js组件代码如下：

import React from 'react'

export default class Content extends React.Component{

render(){

return(

<footer>

<div>这个是页脚内容</div>

</footer>

)

}

}

上面三个组件已经创建完成需要注意的一点是return返回只能是一个标签节点

(2) 在index.js文件加载这几个组件，进行嵌套组件

const React = require('react')

const ReactDom = require('react-dom')

import ComponentHeader from './components/header'

import ComponentFooter from './components/footer'

import ComponentContent from './components/content'

class Index extends React.Component{

     render(){

        let header = <ComponentHeader />

        let content = <ComponentContent />

        let footer = <ComponentFooter />

        return(

            <div>

                {header}

                {content}

                {footer}

            </div>

        )

    }

}

ReactDom.render(<Index/>,document.getElementById('example'));

(3) 进行访问，会出现如下图所示

对于上面的代码可能用到了es6的相关语言，后期的时候给大家补上es6的相关介绍~

在后期的章节中我会给大家继续完善对react框架的应用操作，如果本篇对大家有用就点个赞或者转发下呗~