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

使用react加脚手架创建一个项目：

• npm install create-react-app -g

• create-react-app myapp

• cd myapp

• yarn start

npx ： 帮助我们更方便的找到本地安装的命令

• . ode_modules.binwebpack --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()