使用react加脚手架创建一个项目：
-
npm install create-react-app -g
-
create-react-app myapp
-
cd myapp
-
yarn start
npx ： 帮助我们更方便的找到本地安装的命令
- .\node_modules.bin\webpack --version# 或者npx webpack --version
官方网站用法
-
npx create-react-app myapp
-
cd myapp
-
yarn start
脚手架项目结构：
1.入口文件：index.js
// 导入核心模块
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 (
注意样式需要导入：
import './App.css'
组件的定义和使用:
// 函数组件的首字母必须大写
// 父组件向子组件传值使用props(函数组件就是形参)
// 数据传递是单向数据流：props属性是只读的
function Test (props) {
console.log(props)
return <div>Test:{props.uname}</div>
}
// 这里定义了一个App组件
function App() {
return (
<div>
<div>Hello nihao</div>
<Test uname='tom' age='12'/>
<Test uname='jerry'></Test>
<Tab/>
</div>
);
}
类组件定义方法：
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()