Học React Native trong 30 ngày qua ví dụ thực tế

Nguyễn Nhân

Nguyễn Nhân

— 4 min read
Học React Native trong 30 ngày qua ví dụ thực tế

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

day1

Ngày 2

Ứng dụng thời tiết

day2

Ngày 3

The Twitter app entrance animation.

day3

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

day4

Ngày 5

MapView and find Geo location.

day5

Ngày 6

Spotify welcome screen/

day6

Ngày 7

Pan gesture basic. Move a baseball around.

day7

Ngày 8

Google map style swipe menu

day8

Ngày 9

Layout of Twitter user page

day9

Ngày 10

Tumblr menu animation

day10

Ngày 11

Using OpenGL with React native

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

day11

Ngày 12

Charts with React native

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

day12

Ngày 13

A tweet UI

day13

Ngày 14

A tinder swipe

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

day14

Ngày 15

A time picker

day15

Ngày 16

Unlock with gesture

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

day16

Ngày 17

Native search bar and Fuzzy search

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

day17

Ngày 18

Sortable. drag and reorder the blocks.

day18

Ngày 19

Unlock app with touchID

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

day19

Ngày 20

Sigle page Reminder

day20

Ngày 21

Multi page Reminder

day21

Ngày 22

Google Now

day22

Ngày 23

Local WebView An example using D3.js

day23

Ngày 24

Youtube scrollable tab

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

day24

Ngày 25

Custome in-app browser

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

day25

Ngày 26

Swipe and Switch

day26

Ngày 27

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

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

day27

Ngày 28

iMessage Image Picker.

day28

Ngày 29

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

day29

Ngày 30

Push Notification.

day30

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

Read more