react入門 從菜雞到菜鳥

1

// react核心js庫
2<
script 
src="js/react.development.js"
>
script
>
3<
script 
src="js/react-dom.development.js"
>
script
>
4// 負責翻譯es6語法和react語法的js庫 56
<
script 
src="js/babel.min.js"
>
script
>
7<
div 
id="root"
>
div>
8// 型別要寫成text/babel 目的是告訴babel.min.js這裡面的語法需要翻譯 
9<
script 
type
="text/babel"
>
10//
下面是jsx語法，ojsx變數中儲存的是乙個jsx物件
11let ojsx 
=<
h1>
hello world
!<
/h1>;
12//
reactdom是內建物件
13//
render方法接受兩個引數，第乙個引數是乙個jsx物件或者是乙個元件
14//
第二個引數是乙個原生物件，作為顯示內容的容器標籤
15reactdom.render(ojsx,document.getelementbyid(
'root
'));
16script
>

1 - jsx語法：

let num = 11

let str = 'hello world!'
let isok = false

// jsx物件整體**最外層可以用小括號，也可以不用，用的目的是為了**的美觀

let ojsx = (

// jsx結構的最外層只能有乙個標籤
<
div>

使用了class樣式的p標籤

使用了行間樣式的p標籤

div>

)

1

//定義不傳參的函式元件
2function welcome()//可以是
5let welcome = function()//也可以是
8//函式簡化
9 let welcome = ()=><
h1>hello,tom
h1>;10
11// 定義乙個傳參的函式元件，引數的名稱是props，是固定寫法
12// props裡面的值是使用時傳入的
13function welcomename(props),你的年齡是：
h1>15}
16let operson = 
20//解構賦值
21let  = operson 
2223 let  welcomename = () = > <
h1>hello,,你的年齡是：
h1>
2425
26return (
27<
div>
28<
welcomename 
name
="rose"
age= 
/>
29<
welcomename 
name
="john"
age= 
/>
30<
welcomename 
name
="eva"
age= 
/>
31div
>32)
33}34// 將元件渲染出來
35 <
welcome
/>
,document.getelementbyid('root'));
36 // reactdom.render(<
welcomename 
name
= />
,document.getelementbyid('root'));
37// 傳入的引數如果是字串，可以不寫大括號
38 // reactdom.render(<
welcomename 
name
="sara"
age= 
/>
,document.getelementbyid('root'));
39 reactdom.render(<
/>,document.getelementbyid('root'));

1

//es6物件簡寫
2let name = 'sasa';
3let age = 18;45
let operson = ,
11showage:function()  14}
15//以上物件可以簡寫
16let operson = ,
22showage()25}
26alert(operson.name);
27operson.showage();
2829
//es6類和類的繼承
30// 通過class關鍵字來定義類
31class person 
37showname()
40showage()43}
44// 將類例項化成物件
45let per = new person ('sasa',18)
46alert(per.name);
47per.showname()
48per.showage()
4950
// 定義student類繼承person，繼承用extends關鍵字
51let student extends person
57showage()
60showschool()63}
64let xiaoming = new student ('小明',18,'sssss')
65alert(xiaoming.name)
66alert(xiaoming.age)
67xiaoming.showage()
68 xiaoming.showschool()

1

<
div 
id="root"
>
div>
2<
script 
type
="text/babel"
>3//
定義乙個類元件4//
定義的類需要繼承與react.component類
5class welcomename extends react.component
<
/h1>10}
11}12//
渲染類元件
13reactdom.render(
<
welcomename name="
sara"/
>,document.getelementbyid('root'));
14script
>

1

//建立乙個顯示乙個按鈕的類元件
2class welcome extends react.component 
9fn2 = (sname)=>
12render() 
/>
17<
div>
18<
input 
type
="button"
value
="打招呼"
onclick
= />
1920                  } />*/}
2122
<
input 
type
="button"
value
="打招呼2"
onclick
= />
23div
>24)
25}26}     
27 reactdom.render(<
welcome 
name
="sara"
/>,document.getelementbyid('root'));

從菜雞到鹹魚（一）

php 審計從0到0.1 一道利用 get強制型別轉換漏洞的題 show source file show source 函式功能 使得服務端返回括號內指出檔案的原始碼 flag x 這個就是我們要看的東西啦 if isset get time else if get time 60 60 24 3...

從零react從入門到放棄

簡介 react是facebook出的一款針對view視層圖的library 庫 主要使用單向資料流的方式進行資料展示。react擁有較高的效能，邏輯非常簡單，越來越多的人已經開始關注和使用他 src script src script src script 通過npm或yarn使用react 國內...

React從入門到放棄Day1

1.react的入口檔案為index.js 2.在index.js中，首先需要引入react等元件 import react from react import reactdom from react dom 操作dom html import xiaojiejie from xiaojiejie ...