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>

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