React Native - Phần 2 - Viết chương trình đầu tiên và tìm hiểu vể Props, State

React Native - Phần 2 - Viết chương trình đầu tiên và tìm hiểu vể Props, State

Trong Phần 1 chúng ta đã tìm hiểu cách để cài đặt React Native và tạo chương trình mặc định. Trong phần này chúng ta sẽ bắt đầu đi sâu hơn vào các kiến thức cơ bản trong React Native. Cụ thể ở Phần 2 này chúng ta viết chương trình Hello World và tìm hiểu về hai thành phần là Props và State.

Chương trình Hello World

1. Hướng dẫn

React Native tương tự như React, nhưng nó dùng các thành phần cơ bản thay vì các thành phần của Web như các building blocks. Do đó để hiểu được kiến trúc cơ bản của một ứng dụng React Native, bạn cần phải hiểu một vài các khái niệm cơ bản trong React như là JSX, components, state, và props. Nếu như bạn đã có hiểu biết về React, bạn sẽ vẫn cần học một vài khái niệm cụ thể trong React-Native-Specific để bổ sung. giống như các thành phần cơ bản. Bài hướng dẫn này hướng tới tất cả những người xem, dù rằng bạn đã có kinh nghiệm với React hay không.

2. Hello World

Trương tự như cách làm truyền thống từ trước đến nay khi làm quen với một ngôn ngữ lập trình, một nền tảng mới. Đầu tiên chúng ta sẽ tạo ra chương trình không làm gì cả, chỉ hiển thị ra Hello World, và nó ở dưới đây:

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

Bạn cũng có thể paste nó vào index.ios.js của bạn hoặc tập tin index.android.js để tạo ra một ứng dụng thực tế trên và chạy nó trên máy ảo của bạn để xem kết quả.

3. Có những điều gì đã làm ở đây?

Một số trong những điều ở đây có thể không giống như JavaScript mà bạn viết. Đừng hoảng sợ. Đây là tương lai.

Trước hết, ES2015 (còn được gọi là ES6) là một tập hợp các cải tiến JavaScript mà bây giờ là một phần của tiêu chuẩn chính thức, nhưng chưa được hỗ trợ bởi tất cả các trình duyệt, vì vậy thường không được sử dụng nhưng trong phát triển web. Nhưng React Native hỗ trợ ES2015, vì vậy bạn có thể sử dụng công cụ này mà không lo lắng về khả năng tương thích. Cú pháp import, from, class, extends, và () => trong ví dụ trên đều là các tính năng ES2015. Nếu bạn không quen thuộc với ES2015, có thể bạn có thể hiểu được nó bằng cách đọc thông qua ví dụ như hướng dẫn này có. Nếu bạn muốn, trang web này sẽ cho bạn một cái nhìn tổng quan tốt về ES2015.

Điều lạ khác trong ví dụ này là thẻ <Text>Hello world!</Text>. Đây là cú pháp JSX nhúng XML trong JavaScript. Nhiều frameworks sử dụng một ngôn ngữ khuôn mẫu đặc biệt cho phép bạn nhúng mã bên trong các thẻ. Trong React, điều này được làm ngược lại. JSX cho phép bạn viết các thẻ của bạn bên trong đoạn code. Nó trông giống như HTML trên web, ngoại trừ thay vì những điều web như <div> hoặc <span>, bạn sử dụng các thành phần của React. Trong trường hợp này, <Text> là một thành phần building mà chỉ hiển thị văn bản.

4. Component và AppRegistry

Như vậy đoạn code phía trên đã định nghĩa HelloWorldApp, một Component mới, và nó đăng ký bản thân nó với AppRegistry. Khi bạn xây dựng một ứng dụng React Native bạn sẽ cần phải tạo ra rất nhiều những components mới. Bất cứ thức gì mà banjnhinf thấy trên màn hình thì đó đều là các Component nhỏ. Một Component có thể được tạo ra một cách khá đơn giản, chỉ cần phương thức render return ra JSX để hiển thị lên màn hình.

AppRegistry sẽ báo cho React Native biết rằng các thành phần này là một trong những view root của toàn bộ ứng dụng. Bạn không cần phải quan tâm quá nhiều về AppRegistry nó chỉ đơn giản dùng để gọi đến phương thức AppRegistry.registerComponent bên trong ứng dụng của bạn. Nó đã được chỉ ra trong ứng dụng ví dụ bên trên thế nên bạn có thể paste những cái đó vào trong file index.ios.js hoặc index.android.js sau đó chạy và kiểm tra kết quả.

5. Có phải ứng dụng này không làm được gì to tat?

Đúng là như vậy. Để làm cho các components làm được những điều thú vị hơn, bạn cần phải học tiếp về Props sẽ được đề cập đến ngay ở dưới đây.

Props

Hầu hết các components đều có thể được tùy chỉnh khi chúng ta tạo ra nó, với những tham số khác nhau. Những tham số này được gọi là props.

Ví dụ, một thành phần cơ bản trong React Native là Image. Khi bạn tạo ra một image, bạn có thể sử dụng một prop có tên là source để điểu khiển image nào sẽ được hiển thị ra.

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

AppRegistry.registerComponent('Bananas', () => Bananas);

Chú ý rằng {pic} được bao ngoài bởi dấu móc, để hiển thị biến pic trong JSX, Bạn có thể đặt bất cứ câu lệnh JavaScript trong kết cấu của JSX.

Các components của bạn đồng thời có thể sử dụng props. Điều này cho phép bạn tạo ra các components đơn để sử dụng ở nhiều nơi khác nhau trong ứng dụng của bạn với tính chất khác nhau ở mỗi một nơi mà bạn dùng. Chỉ việc gọi đến this.props trong phương thức render của bạn. Dưới đây là ví dụ:

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

Sử dụng name như một prop cho phép chúng ta tùy chỉnh component Greeting, vì vậy chúng ta có thể sử dụng lại các thành phần cho mỗi Greeting của chúng ta. Ví dụ này cũng sử dụng các component Greeting trong JSX, giống như một building in component. Lợi ích của việc này là làm cho React tuyệt vời hơn, nếu như bạn tìm thấy những thứ bản thân mong muốn và bạn muốn cài đặt những thứ khác nhau trong giao diện thì bạn chỉ cần tạo ra ra một component mới.

Điều mới mẻ khác xảy ra ở đây là component <View>. Component View rất hữu dụng, nó là một container cho các component khác, để giúp điều khiển style và giao diện.

Với props và các components cơ bản như Text, Image, và View bạn có thể xây dựng một loạt các màn hình tĩnh. Để tìm hiểu làm thế nào để thực hiện thay đổi ứng dụng của bạn theo thời gian, bạn cần phải tìm hiểu về State ở ngay phần bên dưới đây.

State

Có hai kiểu dữ liệu để điều khiển một component: props và state. props đươc cài đặt bởi cha của nó và chúng sẽ được cố định trong suốt thời gian hiển thị của Component, Để dữ liệu có thể thay đổi được, chúng ta sẽ cần phải sử dụng đến state.

Thông thường, bạn nên khởi tạo state trong hàm khởi tạo, và sau đó bạn có thể gọi setState khi bạn muốn thay đổi nó.

Ví dụ như, nếu bạn muốn làm cho một văn bản nhấp nháy liên tục trong toàn bộ thời gian, Văn bản đó sẽ được cài đặt một lần khi component được tạo ra, vậy bản thẩn nó sẽ là một prop. Và thở thời điểm này thì băn bản sẽ được hiển thị mà không bị thay đổi trong quá trình chạy, thế nên nó lên giữ thêm một state.

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

Với một ứng dụng thực tế, bạn không nên cài đặt state với một timer. Bạn có thể cài đặt state khi bạn có dữ liệu mới nhận được từ server hoặc từ phía người dùng nhập vào. Bạn đồng thời cũng có thể dử dụng một state container giống như Redux để điều khiển luồng dữ liệu. Trong trường hợp này bạn nên sử dụng Redux để thay đổi state của bạn sẽ hay hơn là việc gọi điều hướng đến setState.

State làm việc giống với cách mà nó đã làm việc trên React. thế thế để xem chi tiết hơn về việc điều khiển state bạn cso thể xem trong [React.Component API] (https://facebook.github.io/react/docs/component-api.html).

Tại thời điểm này, bạn có thể thấy hầu hết các ví dụ của chúng tôi đêu sử dụng văn bản màu đen mặc định với viền. để làm cho mọi thứ được đẹp đẽ hơn bạn sẽ cần học thêm về Style trong React Native. Tôi sẽ đề cập đến vấn đề này trong Phần 3 của serial bài viết này mong các bạn đón đọc tiếp.

Nguồn tham khảo: React Native - The basic