iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
6

Hi!現在是2018/09/04,紀錄著在鐵人賽留下足跡的第一篇文章。
在這30篇的文章,會參考以下兩個網站做學習:

  1. React官方文件
  2. 從零開始學 ReactJS(ReactJS 101)

我是神Q,有大家在我才是超人,請各位在接下來30篇多多指教!謝謝!


不知道大家在選擇一門語言的時候,點進去文章中第一個看到的例子會是什麼?第一個想到的應該都會是Hello world!吧?雖然很俗氣,但是讓我們從這個例子中踏出通往React第一步吧!

Visual Studio Code

進入正文前先介紹我自己及今後會在文章中使用的編輯器(官方下載網址和介紹在這裡),這是朋友介紹給我用的,用起來感覺也還不錯,而且有很多套件下載來幫助開發,如果還沒有遇到喜歡的編輯器可以選擇給他一次機會XD。

ReactJS

首先ReactVueAngular一樣,都是屬於前端框架,也就是說我們可以直接在<script>中去嵌入React官方所提供的JavaScript檔使用他,而官方提供的檔案有兩個:

  1. react:為react主要的API內容,透過react可以去建構一個一個可重複使用的組件。
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    
  2. react-dom:原本和react放在一起,在0.14版中被獨立出來,主要提供了對DOM使用的方法。
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    

不過以上皆是開發版本,並不適用實務生產,所以官方也提供了針對容量的大小作效能優化的版本:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

另外不曉得大家有沒有發現,每一個script中都有一個crossorigin屬性,官方註明說此屬性能夠在React 16和更高以上的版本得到更好的錯誤處理訊息,所以使用以上連結嵌入React時建議保留crossorigin

JSX

使用React時我們還需要了解JSX,先別害怕!他其實沒有想像中那麼陌生,只需要試著想像,他是結合了JavaScriptXML這兩種語法的語法糖,JSX可以在使用React的時候讓程式碼更加簡潔,先看看下方程式碼吧!

let element = <h1>Hello world!</h1>

上面那段程式碼宣告的element既不是字串也不是HTML的語法,但他卻可以與React一起描述網站上的UI應該是什麼樣子,不過也不需要擔心使用了JSX後還能不能使用一般的JavaScript,這點可以仔細想想,一個網頁組成的三巨頭分別為HTMLCSSJavaScript三個,也就是瀏覽器看得懂三個語言,所以我們使用的JSX在執行成網站時,最終結果也會被翻譯JavaScript,不然就只是打來自爽的而已XD

呃...那誰來翻譯?

放心!不會是你,也不會是我的,翻譯這種小事就交給Babel吧!他是一個JavaScript的一個編譯器,不只是JSX就連現今各瀏覽器支援度都不同的ES6Babel也能編譯成瀏覽器看得懂的JavaScript要使用他也很簡單,因為他就是個API,所以只需要在<script>引用官方提供的API,並在<script>指定type="text/babel",就可以大大方方的打上JSXES6的語法了。

除了上方的例子以外,以下也舉了幾個比較常用的JSX的語法,使用方式非常簡潔,可以看一下:

  1. 花括號內可以是任何表達式:
    //宣告字串
    let name = 'world'
    //用花括號把變數name的值帶進來
    let element = <h1>Hello {name}!</h1>
    
  2. iffor也可以使用:
    //if條件判斷
    if(user){
        return <h1>Hello, {user}!</h1>;
    }
    else{
        return <h1>Hello, world!</h1>;
    }
    
    //for迴圈
    let rows = []
    for(let i=1;i<6;i++){
        rows.push(<li>第{i}項</li>)
    }
    return <ul> {rows} </ul>
    
  3. 如果不只包含一個標籤,或是想要空行的話需要使用小括號:
    let element = (
        <div>
            <h1>Hello world!</h1>
            <h2>Nice to meet you!</h2>
        </div>
    )
    
  4. 當然不在React中使用JSX也可以,只是語法會變得稍為複雜,以下兩段是相等的:
    let element = <h1 id="title">Hello world!</h1>
    
    //React建立element的方法,參數分別為(標籤,屬性物件設定,內容,)
    let element = React.createElement('h1',{id:"title"},'Hello world!')
    

Hello world!

簡單的認識完ReactJSX後就來建立HTML檔,實做第一個Hello world!吧!
HTML

<!--要插入內容的DOM-->
<div id="root"></div>

<!--react-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!--Babel-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>

<!--記得要設定type="text/babel"-->
<script type="text/babel">
//建立一個DOM物件
let element = <h1>Hello, world!</h1>

//使用ReactDOM.render把剛建立的物件element插入目標DOM中
ReactDOM.render(
  element,
  document.getElementById('root')
);
</script>

運行後看到以下結果就代表成功了:
https://ithelp.ithome.com.tw/upload/images/20180905/20106935VBjt13xE7X.jpg

之後的範例都會在附上GitHub的程式碼和GitPage,讓大家比較清楚程式碼的內容和顯示出來的結果:
GitHub程式碼連結
GitPage連結


以上是第一篇文章的內容,感覺鐵人賽打起文章戰戰兢兢的XD,之後可能都會在七點到八點左右發文,再請各位多多指教了,希望接下來可以倒吃甘蔗。

下回會說明如何使用webpack來開發React網站,一定可以學到很多東西!

最後感謝各位大大的觀看,如果文章中有任何不清楚或是理解錯誤的地方,還麻煩各位大大留言告訴我,小弟會盡快修正文章內容的,謝謝大家/images/emoticon/emoticon41.gif


下一篇
[筆記][React]從零到一的webpack開發環境(1)-安裝執行篇
系列文
一步一腳印的React旅程30
1
Luis-Chen
iT邦新手 4 級 ‧ 2018-10-06 21:54:42

從Vue 改學 react 囉?

其實都是想要學習的框架/images/emoticon/emoticon37.gif
只是我沒有想到鐵人賽來得那麼快!而如果用已經在寫的Vue系列參賽感覺很不好意思/images/emoticon/emoticon25.gif
所以先暫停Vue的更新!以學習React來參賽!還請大大繼續指教!

話說大大今年不參加達成連三年成就嗎XD

不會拉,你可以寫你用vue時遇到的bug跟應用啊,我就可以順便偷學vue跟react的差異了哈哈

今年不寫是因為之前在寫的時候覺得每天趕一天有點累,而且質量不佳,
所以我就爛尾了(比較沒毅力拉),之後參加我會採用事前規劃系列主題及文章在定時po文就好

鐵人賽加油喔

等鐵人賽結束後再回去寫Vue文章應該會有不一樣的感受XD,
我也從九月初就開始準備了,但是準備完全不足,哈哈,現在開賽了只能靠毅力!

1
fysh711426
iT邦研究生 3 級 ‧ 2018-10-08 19:55:59

大大開賽了!!!
我目前只準備了九篇,下禮拜開賽,應該撐不完 30 篇。
/images/emoticon/emoticon02.gif

好久不見!我們都各自神隱一個月修煉XD
我準備的進度也比想像中的少很多/images/emoticon/emoticon02.gif
我一直都在關注大大報名了沒XD
等你開賽一起來挑戰十週年!

fysh711426 iT邦研究生 3 級‧ 2018-10-08 21:17:54 檢舉

週末報名,下禮拜一開賽。 /images/emoticon/emoticon16.gif

1
cythilya
iT邦新手 4 級 ‧ 2018-10-10 10:05:56

今年鐵人賽真的來得滿早的!
/images/emoticon/emoticon13.gif

發現大大去年也有參加,
而且主題剛好是很想學的測試!
鐵人賽結束要來拜讀了XD

一起加油!

一起完賽啊!

我要留言

立即登入留言