Ví dụ React Native Hooks - Làm ứng dụng rút gọn link

Xin chào tất cả mọi người, chào mừng bạn đến với bài viết này, nơi mà chúng ta sẽ thực hiện một ví dụ React Native Hook, với giao diện người dùng vô cùng đơn giản (mình thích đơn giản).
Bằng cách xây dựng một ứng dụng rút gọn Url trên di động.

React Hook đã được giới thiệu trong React 16.8, và nói một cách đơn giản, chúng cho phép bạn biến thành phần không trạng thái thành thành phần có trạng thái.

Vì vậy, Chúng ta sẽ thử xây dựng một ứng dụng rút gọn url bằng cách sử dụng hooks và khám phá tất cả logic đằng sau nó.

Và đây sẽ là kết quả cuối cùng của chúng ta

Bắt đầu nào

Chúng ta có thể bắt đầu bằng cách tạo một dự án React Native mới, bằng cách sử dụng Expo hoặc React Native Cli.

Dù bạn dùng cái nào đi chăng nữa thì bạn vẫn sẽ nhận được một cái gì đó trông như thế này.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
  render(){
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Giới thiệu về UseState()

Hook sẽ cho phép bạn sử dụng trạng thái trong một function và useState() là api đằng sau nó.
Đầu tiên chúng ta sẽ cần gọi nó từ 'react'

import React, {useState} from 'react';

Sau đó, chúng ta có thể sử dụng nó trong code của chúng ta như thế này.

const [url, setUrl] = useState("")

Điều này có nghĩa là, xác định một trạng thái mới với một biến url và giá trị ban đầu của chuỗi rỗng rỗng, cộng với một hàm để cập nhật biến là setUrl
Điều này tương tự với việc tạo một hàm để cập nhật url mới, cụ thể bằng cách sử dụng this.setState().
Bạn có thể khai báo nhiều biến như bạn muốn với bất kỳ loại nào.
Một ví dụ khác là

const [todos, setTodos] = useState([{ text: 'Get Milk', done: false }]);

Hãy thêm một cái biến mới là finalUrl - nó là link sau khi rút gọn.

const [finalUrl, setFinalUrl] = useState("")

Xây dựng giao diện cho ứng dụng rút gọn url

Bây giờ chúng ta đã biết cách sử dụng hook, chúng ta có thể bắt đầu bằng cách xây dựng UI ứng dụng và tương tác với nó bằng hook.

Giao diện người dùng sẽ bao gồm 4 yếu tố, logo / tiêu đề ứng dụng, TextInput cho url mà người dùng muốn rút gọn.
Nút Rút gọn và cuối cùng là kết quả url sau khi rút gọn.

Chúng ta sẽ Render ra cấu trúc như thế này

<View style={styles.container}>
  <Text style={styles.title}>my
    <Text style={{color:"#ff7c7c"}}>URL</Text>
  </Text>
  <TextInput
    style={styles.urlInput}
    onChangeText={text => setUrl(text)}
    value={url}
    placeholder="Enter Your Url"
  />
  <TouchableOpacity  style={styles.ShortenBtn} onPress={()=>shorten()}>
    <Text style={{color:"#fff"}}>Shorten</Text>
  </TouchableOpacity>
  <Text style={styles.finalUrl}>{finalUrl}</Text>
</View>

Lưu ý, Thành phần TextInput, nó dùng để cập nhật biến url bằng cách sử dụng setUrl mà chúng ta đã nói ở trên bằng cách sử dụng useState và nó sẽ nhận nhận giá trị từ url khi người dùng nhập vào.
styles (mình thấy như viết css thui)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title:{
    color:"#21243d",
    fontWeight:"bold",
    fontSize:50,
    marginBottom:50
  },
  urlInput:{
    height: 50, 
    width:"80%",
    borderColor: '#21243d', 
    borderWidth: 1,
    borderRadius:5,
    padding:10,
    backgroundColor:"#FAFAFA",
    marginBottom:20,
    fontSize:20
  },
  ShortenBtn:{
    backgroundColor:"#ff7c7c",
    borderRadius:20,
    height:40,
    width:"80%",
    justifyContent:"center",
    alignItems:"center"
  },
  finalUrl:{
    height: 40, 
    width:"80%",
    marginTop:20,
    fontSize:20,
    textAlign:"center",
  }
});

Rút gọn Url

Để rút gọn url, Chúng ta sẽ sử dụng api miễn phí bằng cut.ly , để sử dụng api bằng ứng dụng của chúng ta, và tiếp theo đó chúng ta cần sử dụng đến hook Effect.

Chúng ta chỉ cần sử dụng phương thức GET khá đơn giản, vì vậy tôi sẽ sử dụng fetch.

const shorten = async ()=>{
fetch("https://cutt.ly/api/api.php?key=[API-KEY]&short="+url)
.then(async response => {
  const data = await response.json()
  setFinalUrl(data.url.shortLink)
})
.catch(err => {
  console.log(err);
});
}

Để có thể sử dụng, url sẽ có 2 tham số, key api bạn có thể lấy ở trong cut.ly, bạn có thể lấy nó bằng cách tạo một tài khoản miễn phí mới.
Và short, đó là một chuỗi url chúng ta muốn rút ngắn.
Lưu ý rằng chúng ta đang nhận được url (phần short ý) đó từ hook useState mà chúng ta đã thực hiện trước đó.
Và một khi chúng ta có kết quả, chúng ta sử dụng setFinalUrl để cập nhật url mà chúng ta nhận được từ api.

Khi bạn nhấn vào nút Rút gọn, mọi thứ sẽ tốt thôi :v và bạn sẽ nhận được một url rút gọn, Như thế này.

Giới thiệu về UseEffect()

Như mình đã đề cập, hook cho phép bạn sử dụng cả hai phương thức state and lifecycle trong một functional component. Và đây chính xác là những gì useEffect() thực hiện.

Nói một cách đơn giản, useEffect() về cơ bản là sự kết hợp của tất cả componentDidMount, componentDidUpdate, and componentWillUnmount.
Nói cách khác, useEffect() là một hàm sẽ chạy bất cứ khi nào một đứa nào hay cái gì đó tác động ảnh hưởng đến thành phần của bạn, cập nhật state hoặc prop, v.v.

Bạn có thể sử dụng nó như thế này.

useEffect(() => {
   console.log("Component updated")
});

Nhưng sử dụng nó theo cách này, nó sẽ chạy componentDidUpdate một cách không kiểm soát, nó sẽ chạy hàng chục lần, điều mà chúng ta đếch muốn.
Vì vậy, chúng ta có thể thêm một đối số để sử dụng Effect() với cái biến mà chúng ta muốn nó chạy khi thay đổi, thay vì hoạt động như componentDidUpdate.
Để làm điều này, bạn chỉ cần thêm một mảng trống làm đối số.

useEffect(() => {
    console.log("Component updated")
},[]);

Và nếu bạn muốn nó chỉ chạy khi biến thay đổi, bạn có thể thêm nó vào mảng trống.

useEffect(() => {
    console.log("Component updated")
},[url]);

Và đây chính xác là những gì chúng ta muốn, trong ứng dụng của chúng ta. thay vì khi người dùng nhấn nút Rút gọn.
Chúng ta có thể sử dụng useEffect() để rút gọn url khi ô điền url thay đổi, vì khi người dùng viết xong url, họ sẽ muốn rút gọn url đó đúng không.

Vì vậy, useEffect() của chúng ta bây giờ sẽ sử dụng thế này:

useEffect(()=>{
    shorten()
},[url])

Mình hy vọng bạn học hỏi được điều bổ ích như bạn đã mong đợi.
Hãy chia sẻ nó với bạn bè của bạn và comment nếu khác bạn không hiểu chỗ nào nhé.
Cảm ơn tất cả các bạn.
link git: https://github.com/namhong1412/React-Native-Hooks-Example-Build-shorten-application-url