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

 

查看更多关于React的使用方法（脚手架的方法）的详细内容...