React 基本語法

一、宣告元件

1.建立元件檔案（兩種寫法）

在components資料夾中新建乙個home.js檔案：

import react, from 'react';

//宣告元件的類
class home extends component
}export default home;

import react from 'react';

class cart extends react.component 
}export default cart;

//引入react物件  import後面的宣告 react是整個react物件；{}裡面是當前物件裡面的屬性

import react,  from 'react';
//引入當前元件使用的css指令碼
//引入元件
import home from './home';
import cart from './cart';
//es6裡面的類語法
//render方法指渲染模板頁面；方法裡有返回值，返回物件，物件裡面寫模板（元素）；裡面的元素只能有乙個根節點
render() 
}

二、在元件裡宣告資料及繫結資料

import react, from 'react';

//宣告元件的類
class home extends component,,]
}}
render() )}
}export default home;

constructor()------構造方法

這是es6對類的預設方法，通過new命令生成物件例項時自動呼叫該方法。並且，該方法是類中必須有的，如果沒有顯示定義，則會預設新增到空的constructor()方法。

super()------繼承

在class方法中，繼承是使用extends關鍵字來實現的。子類必須在constructor()呼叫super()方法，否則新建例項時會報錯。

報錯的原因：子類沒有自己的this物件，它只能繼承自父類的this物件，然後對其進行加工，而super()就是將父類中的this物件繼承給子類。沒有super，子類就得不到this物件。

三、在元件裡屬性的繫結

import react, from 'react';

class home extends component}}
render() 
繫結title屬性
繫結class屬性
動態繫結class
繫結for)}
}export default home;

import react from 'react';

//進行的引入

import react from 'react';

class cart extends react.component ,,]
}}
render() 
}export default cart;

React 基本語法

目錄 一 元件的使用 1.1 宣告元件 1.2 掛載元件 二 在元件裡宣告資料及繫結資料 三 在元件中繫結屬性 四 引入 有倆種寫法 寫法一 在components元件中新建home.js 檔案 import react,from react 宣告元件的類 class home extends co...

React基本語法知識

1.angular react vue區別 1.angular1.x mvc 2.x mvvm 都給你限制了 http ajax 2.vue2mvvm框架 不限制 推薦vue resource 3.react更專注於view層 react 優勢 1.虛擬dom 2.效能性很高 3.解決一些終端的問題...

React基本語法，注釋 插值

render接收兩個引數，乙個jsx語法的節點模板，乙個是渲染到那個元素物件上 會成為其子節點 text babel const element hello react h1 reactdom.render element,document.queryselector script text bab...