React HelloWorld和组件

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

入口文件的编写

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

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

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

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

组件

对具有一定独立功能的数据与方法的封装,对外暴露接口,有利于代码功能的复用,且不用担心冲突问题。

函数式组件 16.7之后

优点

  • 函数式编程让我们的代码更清晰,每个功能都是一个函数。
  • 函数式编程为我们的代码测试代理了极大的方便,更容易实现前端自动化测试。
    React框架也是函数式编程,所以说优势在大型多人开发的项目中会更加明显,让配合和交流都得心应手。
  • 函数的名称就是组件的名称
  • 函数的返回值就是组件要渲染的内容

类式组件 16.7之前

  • 类组件的三个必要条件
    1.组件必须继承, React.Component
    2.组件必须有render方法
    3.render方法的renturn后定义组件的内容

app组件的编写,采用类组件的方法,函数组件后面再做介绍

现在写一下App组件,这里我们采用最简单的写法,就输出一个Hello World,就可以了。
自定义组件开头尽量使用 大写

import React, {Component} from 'react'

class App extends Component{
    render(){
        return (
            <div>
                Hello World
            </div>
        )
    }
}
export default App;

这里有一个难点,就是:

import React, {Component} from 'react'

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

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

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

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

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

技术胖第一博客网站:https://jspang.com/detailed?id=46#toc220

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jason–json

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值