React-Hello world
删除以下两个文件夹：
- public
- src
重新建立空的public和src文件夹
1、在public下新建index.html作为页面的唯一html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>react脚手架</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
2、在src下新建App.js作为最顶层的容器
import React,{Component} from "react";
import Hello from "./components/Hello";
//创建App组件 这里使用class关键字
class App extends Component{
render(){
return(
<div>
<Hello />
</div>
)
}
}
export default App
3、在src下建立index.js作为项目的入口文件
//react 核心库
import React from "react";
//ReactDOM
import ReactDOM from 'react-dom'
//App
import App from './App'
//渲染App到页面
ReactDOM.render(<App /> ,document.getElementById('root'))
4、在src下建立components文件夹用来保存组件
在components下建立Hello文件夹来保存Hello组件
在Hello文件夹中就可以编写组件了，包括Hello的css等等。
注意：这里组件的名称可以写成index.js，导入时会方便些。
import React,{Component} from 'react';
export default class Hello extends Component{
render(){
return <h2>Hello React!</h2>
}
}
5、开启看运行效果
·
扫一扫
1320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
