P05: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 组件了。
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
命令,来看一下我们编写的结果了。
总结
React 的主要优势之一就是组件化编写,这也是现代前端开发的一种基本形式。所以我们在学习 React 的时候就要多用这种思想,只有不断练习,我们才能在工作中得心应手,轻松自如。小伙伴们也动手作一下吧。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P05:HelloWorld和组件的讲解
码云笔记 » P05:HelloWorld和组件的讲解
ReactDOM.render(,document.getElementById(‘root’))逗号前面的组件不写吗?
感谢提醒,已修改