新建了一个React项目之后,大家都无从下手,那这篇文章就带大家入门。
首先介绍一下react,它是一个用于构建用户界面的JavaScript库。
接下来带大家创建一个组件,并使用它。
首先新建一个Body.js文件,引入我们的react模块。
import React from 'react';
然后创建一个名为Body的类(也就是组件)
export default代表挂载,这样其他的页面才能引用它
extends是继承的意思,这个类继承了React.Component
export default class Body extends React.Component{
//render()用来解析本身类的输出
render(){
//return里面只能有一个节点(必须有一个最大的节点包括所有内容)
return(
<header>
<h1>Hello World!</h1>
</header>
)
}
}
此时就创建好了一个组件,使用时以标签的形式使用,并以导包的方式导入即可,代码如下:
例:在app.js页面中
// ./代表当前根目录下查找Body, .js文件后缀可以省略,
// ./不能省略,要不系统会以为你在引入第三方模块,就会到我们的第三方包里去找
import Body from './Body';
function App() {
return (
<div className="App">
<Body/>
</div>
);
}
这个时候运行我们的项目,在浏览器中打开就会将Body.js里的内容显示在页面上。