使用react加脚手架创建一个项目：
create-react-app myapp
cd myapp
官方网站用法
cd myapp
// 导入核心模块
import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
// 全局样式
import ‘./index.css‘;
// 入口组件（组件的首字母必须大写）
import App from ‘./App‘;
ReactDOM.render(<App />, document.getElementById(‘root‘));
2.入口组件
// 必须导入React模块：JSX依赖于该模块
import React from ‘react‘;
// 局部样式
import ‘./App.css‘;
// 组件的定义
function App() {
return (
<div>
测试
</div>
);
}
export default App;
注意样式需要导入：
import ‘./App.css‘
组件的定义和使用:
class Person {
constructor(uname, age) {
this.uname = uname;
this.age = age;
}
showUname () {
console.log(this.uname)
}
}
var p = new Person(‘zhangsan‘, 12)
p.showUname()
既可以基础父类的属性也可以基础父类的方法
必须在构造函数的第一行调用父类构造函数
super一般用于向父类构造函数传递参数
class Person {
constructor(uname, age) {
this.uname = uname;
this.age = age;
}
showUname () {
console.log(this.uname)
}
}
class Student extends Person {
constructor(uname, age, score) {
// 必须在构造函数的第一行调用父类构造函数
// super一般用于向父类构造函数传递参数
super(uname, age);
// 子类除了继承父类的特性之外可以额外添加自己的属性
this.score = score;
}
showInfo () {
console.log(this.uname + ‘---‘ + this.age + ‘---‘ + this.score)
}
}
let stu = new Student(‘lisi‘, 13, 100)
stu.showInfo()
stu.showUname()
原文：https://www.cnblogs.com/lxsunny/p/12118278.html