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