最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

P05:HelloWorld和组件的讲解

本文先把src目录里的文件全部删除,我们一点点写一个·HelloWorld·程序,并通过编写这个程序了解一下什么是React中的组件化编程。

入口文件的编写

写一个项目的时候一般要从入口文件进行编写的,在src目录下,新建一个文件index.js,然后打开这个文件。

写入下面4行代码:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(,document.getElementById('root'))

上面的代码,我们先引入了React两个必要的文件,然后引入了一个APP组件,目前这个组件还是没有的,需要一会建立。然后用React的语法把APP模块渲染到了root ID上面.这个rootID是在public\index.html文件中的。

这样入口文件就写好了,这时候我们就需要写APP组件了。

app组件的编写

现在写一下App组件,这里我们采用最简单的写法,就输出一个Hello Mybj,就可以了。

import React,{Component} from 'react'

class App extends Component{
    render(){
        return (
            <div>
                Hello Mybj
            </div>
        )
    }
}

export default App

这里有一个难点,就是:

import React, {Component} from 'react'

这其实是ES6的语法-解构赋值,如果你分开写就比较清楚了,你可以把上面一行代码写成下面两行.

import React from 'react'
const Component = React.Component

如果你对ES6语法不熟悉,你完全可以使用这种形式来进行编写。

当我们这两个文件都编写完成后,可以在终端使用npm start命令,来看一下我们编写的结果了。

HelloWorld和组件的讲解

总结

React的主要优势之一就是组件化编写,这也是现代前端开发的一种基本形式。所以我们在学习React的时候就要多用这种思想,只有不断练习,我们才能在工作中得心应手,轻松自如。小伙伴们也动手作一下吧。

 

 

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P05:HelloWorld和组件的讲解

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发