React 基本語法

目錄

一、元件的使用

1.1 宣告元件

1.2 掛載元件

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

三、在元件中繫結屬性

四、引入

有倆種寫法

寫法一：在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.js"
import cart from "./cart.js"
//es6中的類繼承寫法
//class宣告類 extends繼承
//render方法值渲染模板介面 有返回值且返回的是乙個物件， render 裡面的元素只能有乙個根節點
render() 
}

注意： 遍歷陣列 不能使用foreach，因為它沒有返回物件不能渲染到介面上，用map對映 

import react,  from "react";

//宣告元件的類
class home extends component ,,]
}}
render() 
遍歷陣列
繫結陣列 + 元素集合 )}
}export default home;

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

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

繫結元素屬性，元素類名稱，元素行內樣式

import react,  from "react";

//宣告元件的類
class home extends component }}
render() 
繫結元素的屬性
繫結元素類名稱
文字框}
值可以做成拼接值
*/})
}}export default home;

import react, from "react"

class event extends component ;
}//設定自定義屬性
//捕獲當前事件作用的物件 ie:event.srcelement firefox:event.target
databtn=(e)=>
render() 
設定自定義屬性);}
}export default event;

import react from "react";

//匯入本地
React 基本語法
一 宣告元件 1.建立元件檔案 兩種寫法 在components資料夾中新建乙個home.js檔案 import react,from react 宣告元件的類 class home extends component export default home 在components資料夾中新建乙個c...
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...