Không gì dễ hơn việc học bằng các ví dụ thực tế, nhất là đối với việc lập trình React Native. Giới thiệu với các bạn một nơi để học React Native qua ví dụ trong 30 ngày, sau khi hoàn thành xong các ví dụ này đảm bảo bạn sẽ trở nên chuyên nghiệp với React Native. Tuy nhiên, nếu bạn không có thời gian, chỉ cần nhìn lướt qua các ví dụ của từng ngày, sẽ gợi cho bạn những chức năng của ứng dụng mà bạn phát triển.

Bắt đầu 30 ngày

Ngày 1

Đồng hồ bấm giờ iOS, chức năng đầy đủ như ứng dụng gốc

Ngày 2

Ứng dụng thời tiết

Ngày 3

The Twitter app entrance animation.

Ngày 4

Using CocoaPods with React Native.

An example with JTSImageViewController.

Reference: https://shift.infinite.red/beginner-s-guide-to-using-cocoapods-with-react-native-46cb4d372995#.z6ooi3o0t

Ngày 5

MapView and find Geo location.

Ngày 6

Spotify welcome screen/

Ngày 7

Pan gesture basic. Move a baseball around.

Ngày 8

Google map style swipe menu

Ngày 9

Layout of Twitter user page

Ngày 10

Tumblr menu animation

Ngày 11

Using OpenGL with React native

Reference: https://github.com/ProjectSeptemberInc/gl-react-native

Ngày 12

Charts with React native

Reference: https://github.com/tomauty/react-native-chart

Ngày 13

A tweet UI

Ngày 14

A tinder swipe

Reference:https://github.com/meteor-factory/react-native-tinder-swipe-cards

Ngày 15

A time picker

Ngày 16

Unlock with gesture

Reference:https://github.com/spikef/react-native-gesture-password

Ngày 17

Native search bar and Fuzzy search

Reference:https://github.com/umhan35/react-native-search-bar

Ngày 18

Sortable. drag and reorder the blocks.

Ngày 19

Unlock app with touchID

Reference:https://github.com/naoufal/react-native-touch-id

Ngày 20

Sigle page Reminder

Ngày 21

Multi page Reminder

Ngày 22

Google Now

Ngày 23

Local WebView An example using D3.js

Ngày 24

Youtube scrollable tab

Reference: https://github.com/brentvatne/react-native-scrollable-tab-view

Ngày 25

Custome in-app browser

Reference: https://github.com/d-a-n/react-native-webbrowser

Ngày 26

Swipe and Switch

Ngày 27

iMessage Gradient. The chat bubble changes its gradient color with its pageY.

Reference: https://github.com/brentvatne/react-native-linear-gradient

Ngày 28

iMessage Image Picker.

Ngày 29

Quick action with 3D Touch. Quick action on launching days.

Ngày 30

Push Notification.

Thực hiện

Bước 1

Repo: https://github.com/fangwei716/30-days-of-react-native
Fork repo

Bước 2

Pull về và chạy cài đặt các gói cần thiết “npm install”

Bước 3

Android

Chạy lệnh
react-native run-android

iOS

Dùng XCode mở ios/ThirtyDaysOfReactNative.xcworkspace

Các công đoạn này khá đơn giản nên không cần nói nhiều. Điều quan trọng qua bài viết này mình nghĩ chỉ cần nhìn hình demo, và mở mã nguồn ra tham khảo, việc build cái ứng dụng này cũng không cần thiết lắm

Comments