5個最好的庫,用於在React中進行AJAX調用

api-img

以下React為例,如其他javascript框架與庫也是適用於其中,如vue.js。

在過去的兩年裡一直和React合作。許多React初學者提出的問題之一是:“從服務器獲取數據的React方式是什麼?”或“我應該如何在React中進行AJAX調用”?要回答你的問題,盡可能多的開發者會告訴你,React只是一個視圖庫,你可以隨意使用任何你喜歡的東西。然而,這並沒有多大幫助 - 特別是當JavaScript格局變化如此之快時。因此,在本文中,我將嘗試回答這個基本問題,並列出5個簡單的庫,用於在React中進行AJAX調用。

Comment

HTML

<ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

css

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
ul li{
    background-color: gray;
    padding: 10px;
}
ul li:hover{
    background-color: rgb(138, 138, 138);
}
@media screen and (min-width:768px) {
    ul{
        display: flex;
    }
    ul li{
        flex:1;
    }
}

(可縮放視窗測試效果。)

Comment

jquery

jQuery選取元素時,時常會使用到parent(),父親層級這個函數來選取本身元素的父親層級,但往往需要在選取在外層如父親的父親,如範例li的爸爸ul,ul的爸爸nav,要對nav做些事情時,要如何處理,這時候其實恨簡單,只要在下一次相同的parent(),如下範例展示對nav插入一個hello文字。

Comment

Animate.css是個動畫CSS library,不過主要是專注在處理動畫的部分,在網頁上該什麼時機呈現動畫,加上WOW.js,如捲軸滑到畫面才出現動畫效果。

開始使用WOW.js

要使用WOW.js非常簡單,載入相關的程式碼後,加上一行程式碼就完成了!

Javascript

new WOW().init();

HTML

<div class="wow bounce"> 我只有在出現時才會呈現特效喔! </div>

Comment

Copyright © 2018 ucamc