Tìm hiểu về React Native

React Native đưới xây dựng bởi ông lớn Facebook, có thể bạn đã quen thuộc với React với Web, bây giờ chúng ta sẽ cùng tìm hiểu những thành phần cơ bản của ReactNative. Nếu có phần nào chưa chuẩn xác các bạn có thể bình luận phía dưới. Nếu bạn đã hiểu rõ các khải niệm cơ bản và cách hoạt động của React với Web thì với di động cũng không khác gì nhiều.

Những phần đề cập đến:

Virtual DOM
Giới thiệu các thành phần của JSX
Cài đặt React Native
Sử dụng cách thành phần cơ bản

The Virtual DOM

Ở phần này nếu bạn đã biết về JavaScript thì chỉ cần đọc lướt quá. Khi bạn lên google tìm kiếm về cách hoạt động của React, bạn có thể thấy đoạn mã dạng như sau:

UI = f(data)

Có thể hiểu là giao diện là một func của dữ liệu ???. Có thể viết đơn giản như sau:

var todos = function(data) { return data.join( “ -- ”) }

Có thể gọi function với một mảng dữ liệu như sau:

var ui = todos( ["wake up", "get out of bed", "drag a comb across myhead"] );

console.log(ui);

Với đoạn mã này nó sẽ tạo ra dữ liệu để in ra ở console

Tiếp theo chúng ta viết một số đoạn mã phức tạp hơn một chút:

var todoItem = function(data) { return "<strong>" + data + "</strong>"}

Nó nhìn khá giống với:

UI = f(data)

Bây giờ chúng ta sẽ kết hợp todos() và todoItems() như sau:

var ui = todos ( [todoItem(“wakeup”), todoItem(“get out of the bed”)]);

Qua đoạn mã trên bạn có thể hiểu rằng có thể thêm dữ liệu vào DOM bằng cách sử dụng todoItem(). Trong trường hợp chúng ta muốn lặp đi lặp lại các biến thì có thể sử dụng appendChild() và jQuery.

Vậy bây giờ chúng ta muốn hiển thị dữ liệu lên DOM thì làm như nào?. Vậy hãy bắt đầu với Virtual DOM và thay đổi một chút trong DOM. Hãy tập sử dụng nó vì nó sẽ giúp bạn giảm thiểu thời gian.

JSX

JavaScript XML(JSX) là một XML giống ECMAScript. Nó gộp logic(JavaScript) và giao diện (DOM hoặc Native UI) thành một file:

Cấu trúc của một JSX Element như sau:

var element = (
     <JSXElement>

       <SubJSXElement />
       <SubJSXElement />
       <SubJSXElement />

     <JSXElement />
   );

Các quy tắc:

Cũng giống như các tags HTML, JSX elements cần thẻ mở và thẻ đóng hoặc cũng có thể chỉ cần đóng <JSXElement></JSXElement>, <JSXElement />.
Có thể có các attributes <Component attr = “attribute”>
Các elements con có thể là text, các elements khác,..

Chú ý:

Nếu bạn có nhiều thành phần bạn nên để nó trong 1 element. Kiểu như bao các thành phần lại vào 1 element cho dễ quản lý.Bạn có thể tham khảo them về JSX

https://facebook.github.io/jsx/

Cài đặt:

Cài đặt homebrew

brew install node

Cài đặt watchman, Nó cho phép Facebook quan sát những thay đổi:

Watchman được sử dụng bởi React Native để nhận biết được khi code của bạn thay đổi. Nó giống như mỗi khi thêm code mới thì phải build lại ứng dụng trên xCode.

Tiếp theo cài đặt React Native Command Line Interface

Nhưng trước tiên bạn cần cài đặp npm trước

node -v

Sau khi cài thành công

npm install -g react-native-cli

Bạn có thể hiểu npm cũng giống như CocoaPods hoặc Carthage…

Nếu bạn muốn tìm hiểu thêm thì source code của React Native framework có sẵn trên github

https://github.com/facebook/react-native

Tạo mội folder mới để chứa project của các bạn rồi chạy lệnh sau

react-native init Tên

Bạn vào folder vừa tạo thì bạn có thể thấy file nodeJS, iOS, Android…Nếu chưa thấy gì thì cứ chờ 1 lúc vì nó mất thời gian để tạo.

Vào folder iOS chạy luôn demo thì bạn sẽ thấy màn hình như sau:

Ở terminal bạn thấy nó cũng thông báo như sau:

Đừng tắt terminal đấy vì nó cho phép ứng dụng chạy ở background. Nếu tắt đi các bạn có thể chạy lại xCode thì nó cũng lại bật lên.

Phần tiếp theo chúng ta sẽ phải viết các đoạn mã JavaScript, tôi sử dụng Subline Text code cho nhẹ.

Các bạn thêm đoạn mã dưới đây:

'use strict'; // Cho phép hiển thị các lỗi chi tiết hơn

Các bạn cần chú ý import React Native module. Sử dụng ES6.

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = ReactNative;
class HelloComponent extends React.Component {
     render () {
       return (
       <View>
         <Text>Hello React</Text>
 </View> );
} }

Dưới đây là ví dụ về đoạn mã JavaSript đơn giản:

var HelloComponent = React.createClass({displayName:
     "HelloComponent"}, render: function () {
     return (
       React.createElement(View, null,
         React.createElement(Text, null, "Hello React")
) ));

Ở phần sau chúng ta sẽ tìm hiểu về các thành phần cơ bản trong React Native

Tham khảo:

https://facebook.github.io/react-native/

https://www.raywenderlich.com/126063/react-native-tutorial

Sách: Getting started with React native

Nhập môn với React Native

Tìm hiểu về React Native

The Virtual DOM

JSX

Cài đặt:

Bình luận