1.项目结构
2.创建 app / App.js 文件，这是一个组件
/**
* 定义组件 class
* 文件名 必须大写
*/
import React, { Component } from 'react';
/**
* 继承 extends
* 继承一个类
*/
// 我们定义一个叫做App的组件,在HTML中可以用<App></App>来使用它
// React要求自定义组件必须是大写字母开头
// React要求自定义组件的类必须继承于React.Component类
class App extends Component {
// 组件中最重要的方法就是render方法,render是渲染的意思
render() {
// 返回一个jsx语法,非常牛逼语法
return <h1>我是react,很高兴遇见你!说{ 5000 + 5000}次我爱你!</h1>
}
}
// 向外暴露
export default App;
3.使用 App 组件，所以我们来到 app / main.js 文件：
/**
* 入口文件
*/
import React from 'react';
// 枚举
import { render } from 'react-dom';
// 引入组件
import App from './App.js';
// render 使用、挂载组件,两个参数
// 第一个参数是 jsx 语法
// 第二个参数表示组件挂在哪里
render(
<App></App>,
document.getElementById('app-container')
);
4.主页面 index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 放置容器 --> <div id="app-container"></div> <script src="dist/all.js"></script> </body> </html>
5.效果图
