React的使用方法（脚手架的方法）

使用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 (
<div>
测试
</div>
);
}
export default App;

注意样式需要导入：

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>

<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()