Hello React Native

Hello React Native

Chắc hẳn các bạn không còn xa lạ với React Native (RN) nên mình sẽ không giới thiệu nó là cái gì nữa mà sẽ bắt tay vào làm một app hello react native ngay :D

Cài Đặt Môi Trường

Các bạn có thể lập trình trên Windows hay OSX hay Linux đều được nhưng tốt nhất là dùng OSX cho ít tốn thời gian và công sức .

Môi trường phát triển OSX:
- Máy ảo phát triển iOS
- Máy ảo phát triển Android

Môi trường phát triển Windows:
- Máy ảo phát triển iOS (Hiện tại không hỗ trợ)
- Máy ảo phát triển Android

Môi trường phát triển Linux:
- Máy ảo phát triển iOS (Hiện tại không hỗ trợ)
- Máy ảo phát triển Android

Ở đây mình tập trung vào lập trình RN trên OSX :

brew update
  • Cài đặt Node, Watchman :

    brew install node
    
    brew install watchman
    

    Watchman là một công cụ của Facebook để theo dõi sự thay đổi trong file hệ thống. Nó được khuyến khích cài đặt để nâng cao hiệu suất công việc của bạn.

  • React Native CLI :
    Node.js đã cung cấp npm, và chúng ta sẽ sử dụng nó để cài đặt giao diện dòng lệnh cho React Native. Chạy lệnh sau ở cửa sổ Terminal

    npm install -g react-native-cli
    
  • Xcode :
    Bạn có thể dễ dàng cài đặt Xcode thông qua Mac App Store. Việc cài đặt Xcode sẽ đồng thời cài đặt máy ảo iOS và tất cả những công cụ cần thiết để bạn có thể build ứng dụng iOS.

Tạo ứng dụng Hello React Native

Sử dụng giao diện dòng lệnh React Native đẻ tạo ra một project mới của React Native ví dụ như HelloReactNative sau đó chạy lệnh react-native run-ios bên trong thư mục project mới được tạo.

react-native init HelloReactNative
cd HelloReactNative
react-native run-ios

Bạn sẽ nhìn thấy ứng dụng mới của bạn được chạy trên máy ảo iOS.
Câu lệnh react-native run-ios là cách để chạy ứng dụng của bạn. Bạn cũng có thể chạy ứng dụng này trong Xcode hoặc Nuclide.
Sau khi ứng dụng được mở lên ta sẽ nhìn thấy màn hình mặc định ban đầu của RN :
alt text

Bắt đầu chỉnh sửa app của bạn :

Bây giờ bạn đã chạy thành công ứng dụng vừa mới tạo. Hãy chỉnh sửa nó

  • Mở file index.ios.js bằng bất kỳ trình sửa text nào và chỉnh sửa nội dung trong đó.
    Dùng tổ hợp phím Command⌘ + R trong máy ảo iOS để reload sự thay đổi của ứng dụng sau khi chỉnh sửa.(Đây chính là cái hay nhất của RN k cần phải build lại nhưng vẫn sẽ cập nhật các thay đổi)

  • Ta sẽ tạo 1 file mới HelloWorld.js:

      'use strict';
    
      import React, { Component } from 'react';
      import {
        StyleSheet,
        Text,
        View
      } from 'react-native';
      class HelloWorld extends Component {
        render() {
          return (
            <View style={styles.container}>
              <Text style={styles.welcome}>
                Welcome to React Native!
              </Text>
              <Text style={styles.instructions}>
                To get started, edit index.ios.js
              </Text>
              <Text style={styles.instructions}>
                Press Cmd+R to reload,{'\n'}
                Cmd+D or shake for dev menu
              </Text>
            </View>
          );
        }
      }
    
      const styles = StyleSheet.create({
        container: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#F5FCFF',
        },
        welcome: {
          fontSize: 20,
          textAlign: 'center',
          margin: 10,
        },
        instructions: {
          textAlign: 'center',
          color: '#333333',
          marginBottom: 5,
        },
      });
    
      export default HelloWorld;
    
'use strict';

Dòng này kích hoạt chế độ Strict Mode, nó tăng cường khả năng xử lí lỗi của Javascript.

render() {
          return (
            <View style={styles.container}>
              <Text style={styles.welcome}>
                Welcome to React Native!
              </Text>
              <Text style={styles.instructions}>
                To get started, edit index.ios.js
              </Text>
              <Text style={styles.instructions}>
                Press Cmd+R to reload,{'\n'}
                Cmd+D or shake for dev menu
              </Text>
            </View>
          );
        }

Đoạn này sẽ tạo ra một class chỉ có function duy nhất là render. Hàm render sẽ return lại những gì sẽ được hiển thị lên màn hình. Đoạn code trong phần return sử dụng JSX (Javascript syntax extension). Nếu bạn đã làm việc với React.JS thì đoạn code trên rất quen thuộc.

const styles = StyleSheet.create({
        container: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#F5FCFF',
        },
        welcome: {
          fontSize: 20,
          textAlign: 'center',
          margin: 10,
        },
        instructions: {
          textAlign: 'center',
          color: '#333333',
          marginBottom: 5,
        },
      });

Đoạn trên là style dùng cho code JSX bên trên. Đoạn code này rất quen thuộc với những ai làm web vì React Native sử dụng CSS để làm style cho giao diện app. Nếu bạn nhìn lên code JSX ở trên thì bạn sẽ thấy cách mỗi style được sử dụng. Ví dụ component View có style={styles.container} thì các định nghĩa về giao diện của container sẽ được dùng cho View.

và chỉnh sửa một tí fileindex.ios.js

        'use strict';

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

        import HelloWorld from './HelloWorld';

        class HelloReact extends Component {
          render() {
            return (
              <NavigatorIOS
                style={styles.container}
                initialRoute= { { 
                  title: 'Hello React App',
                  component: HelloWorld
                }} />
            );
          }
        }

        const styles = StyleSheet.create({
          text: {
            color: 'black',
            backgroundColor: 'white',
            fontSize: 30,
            margin: 80
          },
          container: {
            flex: 1
          }
        });

        export default HelloReact;

        AppRegistry.registerComponent('HelloReact', () => HelloReact
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    NavigatorIOS
} from 'react-native';

Đoạn này sẽ load module react-native, gán vào biến React. Đồng thời gán các thuộc tính của React như React.AppRegistry, React.StyleSheet vào các biến tương tự cùng tên. Điều này giúp bạn viết code ngắn gọn hơn, ví dụ viết AppRegistry thay vì React.AppRegistry.

NavigatorIOS ở đây sẽ có nhiệm vụ tạo ra một navigation controller, và gán route mặc định cho nó là component HelloWorld, đồng thời đặt tiêu đề sẽ hiển thị trên navigation bar.

import HelloWorld from './HelloWorld';

Đoạn này load class HelloWorld từ file HelloWorld.js để sử dụng.

AppRegistry.registerComponent('HelloReact', () => HelloReact

Đoạn này định nghĩa điểm khởi đầu cho chương trình, nơi mà Javascript bắt đầu thực thi.

Đó là cấu trúc cơ bản của React Native UI. Sau này, tất cả các view chúng ta làm ra đều tuân theo cấu trúc cơ bản như vậy.

Reload lại app, và chúng ta được như sau:

alt text

Các bạn có thể tham khảo thêm để làm 1 app RN đơn giản tại đây

Trang chủ RN : React Native

Source code ví dụ này : HelloReactNative

Một số tài liệu:

React Native Tutorial


React Native Fundamentals - Course by @tylermcginnis33
Build iOS Apps with React Native | Pluralsight
The Complete React Native and Redux Course | Udemy
Build Cross Platform React Native Apps with Exponent and Redux | Pluralsight
react-native training · GitBook
Learn React Native Quickly | DailyDriplogologo
GitHub - hsavit1/Awesome-React-Native-Education: Use this to learn React Native
A Complete Guide to Flexbox |...
GitHub - ericdouglas/ES6-Learning: List of resources to learn ECMAScript 6!
GitHub - happypoulp/redux-tutorial: Learn how to use redux step by step
Mac OS X Development Tutorial for Beginners Part 1: Intro to Xcode
Android Studio
40 Terminal Tips and Tricks You Never Thought You Needed
CocoaPods Guides - Using CocoaPods

Nên dùng :

Native Base giống như 1 framework cho lập trình RN , hỗ trợ đa dạng các components, đơn giản dể hiểu dễ sửa.

React Native Starter App with NativeBase + CodePush + Redux : GitHub - start-react/native-starter-kit: React Native... 1 project mẫu thích hợp để bắt đầu.

Awesome React Native

GitHub - jondot/awesome-react-native: An "awesome" type...
Tổng hợp các module hữu ích cho RN mà mọi developer đều cần :D

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Derek Nguyen

9 bài viết.
19 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
28 6
Nếu bạn muốn xây dựng một website mà chỉ bao gồm HTML, CSS và Javascript. Bạn có thể xây dựng 1 static web hoàn toàn miễn phí phục vụ cho việc học ...
Derek Nguyen viết 1 năm trước
28 6
White
7 0
Nội dung của bài viết này có thể đã có rất nhiều người đã biết, nhưng mình cũng xin được chia sẽ lại cho những ai chưa biết. Hoàn Cảnh Data cons...
Derek Nguyen viết gần 2 năm trước
7 0
White
7 7
Kiểm tra url có tồn tại hay không ? Ngôn ngữ Ruby ruby require 'net/http' require 'openuri' def working_url?(url_str) url = URI.parse(ur...
Derek Nguyen viết hơn 1 năm trước
7 7
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
9 bài viết.
19 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!