不廢話的React教學 [01] - 第一次的React

-
系列目錄

學習React一陣子了，當初學習的時候網路上文章滿多的但是大多不友善，所以一直想以一個Javascript新手起手的角度來發一個React系列教學文

平常沒有接觸或是Follow Javascript生態的話可能還對JS停留在以前的印象，但是近幾年歷經幾次大型改版與新觀念導入後(ES6、ES7、CommonJS)JS幾乎可以說是一門新的語言，新特性與方法很棒但是常常讓新手看不懂再幹些什麼

自己就在自學React的途中因為高門檻與不友善的文章放棄了幾次，又回來練功，反覆幾次後才真的成功入"門"，說是門那是因為React已經是一個龐大的生態系，而我也僅是剛踏入的萌新罷了

這篇不會說明其他巴拉巴拉的東西了，我們直接從"React"開始，剩下的巴拉巴拉後續再慢慢帶入會比較有感覺

 React是什麼?
Javascript前端library

React的核心?
props、state、JSX。這篇也只會先說明JSX，另外兩個先知道有他們的存在即可

JSX是什麼?
讓你在使用React(JS)設計網頁畫面的時候像是在寫HTML一樣。

舉例來說在html建立一個h1 tag，內容是 Hello
---
使用JS來建立一個h1 tag，內容是Hello
---
使用JSX來建立一個h1 tag，內容是Hello
---
你會說:阿靠這不是跟HTML一樣?沒錯!就是一樣(其實也還是有些地方不一樣，後篇探討)，只是他經過了Babel幫你實現轉譯

Babel是什麼?
JSX的compiler，讓你的JSX語言轉變化成JS語言，舉例來說上面的h1 hello經過Babel編譯後會變成
---

我要如何開始我的第一次React?
一開始就要使用打包好的環境太痛苦了(例如官方的create react app)，畢竟很多東西不認識。我覺得直接使用script引入資源的方式直接開始最好，稍微上手後再轉換環境開發
---
這就是你的第一隻React!試著玩玩看吧(17行開始)!
※17~19行即是JSX的部分

留言

張貼留言

這個網誌中的熱門文章

[Arduino]電子秤平 重量感測條+HX711AD模組

-
圖片
※此重量感測條為3kg 接法: 重量感測條-->HX711-->ARDUINO 重量感測條   HX711       紅------------>E                黑------------>E                 白------------>A-                 綠------------>A+               HX711          ARDUINO GND-------->GND DT----------->3 SCK--------->2 VCC-------->5V Main code #include "HX711.h" HX711 HX711_CH0(2, 3, 750); //SCK,DT,GapValue //SCK引腳用於arduino和HX711模塊通訊的時序提供 //DT引腳用於從HX711讀取AD的數據 //GapValue用於校準輸出的重量值，如果數值偏大就加大該值，如果數據偏小就減小該值 int LED = 13; //ARDUINO LED燈，亮起時代表初始化完成可以負重 long Weight = 0; //定義一個變量用於存放承重的重量，單位為g void setup() { pinMode(LED, OUTPUT); //設定LED是輸出引腳 digitalWrite(LED, LOW); //LED熄滅 Serial.begin(9600); //設定串口輸出波特率 HX711_CH0.begin(); ...
閱讀完整內容

cpe練習筆記 UVa401 Palindromes

-
圖片
原文題目 題目大意 判斷下面三種型態的字串 regular palindrom 從左邊或是右邊讀起來都一樣 ex. ABCDEDCBA mirrored string 看起來是左右完全一樣 ex. 3AIAE ※ E的反向是3(參考下圖) mirrored palindrome 左右讀起來一樣，看起來也一樣 ex. ATOYOTA 反向參考圖 注意 數字0和英文字母O被視為相同，只有O有效 策略 1. 判斷字串奇偶 2. 用字串左半減去右半字串(ASCII) 3. 如果相等 regular palindrome 或 mirrored palindrome     如果不相等 not a palindrome 或 mirrored string 程式碼 #include <stdlib.h> #include <stdio.h> void check ( char datas[], int num); void check2 ( char datas[], int num); void check3 ( char datas[], int num); //字典集 char dic[ 37 ] = { 'A' , 'B' , 'C' , 'D' , 'E' , 'F' , 'G' , 'H' , 'I' , 'J' , 'K' , 'L' , 'M' , 'N' , 'O' , 'P' , 'Q' , 'R' , 'S' , 'T' , 'U' , 'V' , 'W' , 'X' , 'Y' , 'Z' , '1' , '2' , '3' , '...
閱讀完整內容

cpe練習筆記 UVa10019 Funny Encryption Method

-
原文題目 一個學生正在玩一個數字編碼。這個方法是這樣的: 1. 將數字N加密到M=265 2. 將N視作是一個十進位數字:X1=265(十進位) 3. 轉換到二進制X1=100001001(二進制) 4. 讓b1相等於這個二進制1的數量，以X1即b1=3 5. 將N以16禁制表達:X2=265(HEX) 6. 轉換X2到binary X2=1001100101 7. 讓b2的值為X2中1的數量=5 8. 加密結果為 M xor (b1*b2)=>265 xor (3*5)=262 Input The first line will contain a number N which is the number of cases that you have to process. Each of the following N Lines (0 < N ≤ 1000) will contain the number M (0 < M ≤ 9999, in decimal representation) which is the number the student wants to encrypt. Output You will have to output N lines, each containing the number b1 and b2 in that order, separated by one space corresponding to that lines number to crypt Sample Input 3 265 111 1234 Sample Output 3 5 6 3 5 5 程式碼 #include <stdlib.h> #include <stdio.h> int main (){ int i,j,tmp,counter; int datas,rows[ 1000 ] = { 0 }; //讀入資料 scanf( "%d" , & datas); for (i =0 ;i < datas;i ++ ){ scanf( "%d...
閱讀完整內容