Mục lục
Xin chào các bạn, hôm nay Ngô Tôn .IT sẽ làm 1 bài Tổng hợp bài viết lập trình React Native cho người mới học để giúp các bạn mới tiếp xúc với React Native có thể dễ dàng build ứng dụng nhanh nhất nhưng vẫn đảm bảo được nắm vững kiến thức chung, mình xin chia sẻ cho các bạn 1 số kiến thức sau.
Để biết React Native là gì các bạn có thể xem lại bài viết Lập trình ứng dụng di động đa nền tảng với React Native.
1. Xây dựng một ứng dụng cơ bản với React Native
– Hiểu cơ bản việc triển khai ứng dụng, cú pháp, đây là phần bao hàm các chiêu cơ bản, là nền tảng để đả kích giác ngộ bên trong.
– Cơ bản khởi tạo ứng ụng React https://www.raywenderlich.com/126063/react-native-tutorial
– Viết ứng dụng react native trong 20 phút https://medium.com/code-life/getting-started-with-react-native-in-20-minutes-15ea90062094#.bq42wfi0p
– Học React Native như desginer: https://medium.com/@Bart._S/learning-react-native-as-a-designer-c59a84ae2013#.lezhmecwk
– Hiểu sâu hơn về react https://www.toptal.com/ios/cold-dive-into-react-native-a-beginners-tutorial
– Tạo 1 ứng dụng máy tính siêu cấp https://kylewbanks.com/blog/react-native-tutorial-part-1-hello-react
– Move lists app https://facebook.github.io/react-native/releases/0.27/docs/sample-application-movies.html
2. React Native Navigation Example
– Đây là chiêu thức quan trọng nhất trong ứng dụng, bạn phải hiểu về nó, nó giống như react-router trên web. Hiểu được nó thì đi mây về gió, đi gió về mây, di chuyển qua lại giữa chân không trong vòng 1 nốt nhạc.
– http://tech.taskrabbit.com/blog/2015/09/21/react-native-example-app/ (more navigation example)
– https://github.com/aksonov/react-native-router-flux (React native router flux, xài giống như react-router, dễ xài, dễ dùng nhưng trước khi dọc cái này thì anh em nên làm với navigation thuần để hiểu được problem khi dùng nó)
– https://github.com/wix/react-native-navigation (Tương tự cái trên)
3. React Native layout system flexbox
– Anh hùng không qua được ải mỹ nhân, vì vậy đôi khi chúng ta hãy tập trung vào nhan sắc, học chiêu thức flexbox sẽ giúp ta biến hóa từ tề thiên sang tề thánh, từ Maria ozawa thành Thúy Kiều, biến thành bất cứ cái gì bạn muốn, thu hút hàng vạn người sử dụng, được thiên hạ nể nan
– https://medium.com/the-react-native-log/understanding-react-native-flexbox-layout-7a528200afd4#.iw562449n (hiểu sâu)
– https://facebook.github.io/react-native/docs/flexbox.html – đọc thêm từ tài liệu gốc
4. React Native networking
– Chiêu này được gọi là “Khai mở tâm trí”, với chiêu thử này ta có thể connect tới nhiều API khác nhau, thực hiện việc thu thập dữ liệu, ngoài ra ta còn thể connect tới socket để thực hiện việc tương tác realtime như thằng facebookchat. Hiểu được chiêu này, nội công tăng lên một bậc, công lực tăng gấp đôi
– https://www.thepolyglotdeveloper.com/2015/09/make-http-requests-in-ios-with-react-native/ (hiểu cơ bản)
– https://code.tutsplus.com/tutorials/how-to-create-a-news-reader-with-react-native-setup-and-news-item-component–cms-25935 (real app hacknews với networking)
– https://facebook.github.io/react-native/docs/network.html (tài liệu gốc để hiểu sâu hơn)
5. React Native Animated
– Using aminated API: https://medium.com/react-native-training/react-native-animations-using-the-animated-api-ebe8e0669fae#.js4ngkg7g
– Layout animation API: https://medium.com/@Jpoliachik/react-native-s-layoutanimation-is-awesome-4a4d317afd3e#.f3h8gbrat
– Dyamic animated list: http://moduscreate.com/react-native-dynamic-animated-lists/
5. Real app tutorial
– Build message app chat: https://blog.sendbird.com/tutorial-build-a-messaging-app-using-react-native/
– Make facebook reaction: http://www.reactnative.com/how-to-make-facebook-reactions-in-react-native/
– How to create Twitter exploding hearts: http://browniefed.com/blog/react-native-how-to-create-twitter-exploding-hearts/
– React native todo: https://github.com/joemaddalone/react-native-todo
– Build app cross-platform react native: https://cosmicjs.com/blog/how-to-build-a-cross-platform-blog-using-react-native-and-nodejs
– Movie app – https://github.com/JuneDomingo/movieapp
– React native authentication example: https://medium.com/@alexmngn/the-essential-boilerplate-to-authenticate-users-on-your-react-native-app-f7a8e0e04a42#.blgsk41o1
6. Tool design prototype app
7. Design post
– Create a frontend with Sketch: https://medium.com/@housecor/rapid-development-via-mock-apis-e559087be066#.7omz318gv
– 26 Step of product dashboard design: https://medium.com/sketch-app-sources/26-steps-of-product-dashboard-design-c97af84c4146#.2o3e054hu
– Prototype Ecommerce App with Sketch: https://medium.com/sketch-app-sources/prototyping-an-e-commerce-app-in-flinto-part-1-of-2-988de33005c5#.1kjiwn3jc
8. Bonus
– Cái này tổng hợp rất nhiều thứ hay ho
🙂) xem từ từ không nhứt não: https://github.com/jondot/awesome-react-native

– Cung cấp các kiến thức xây dựng real component : http://browniefed.com/
– Khóa học react cơ bản nhanh gọn lẹ: https://egghead.io/lessons/react-react-native-up-and-running?course=react-native-fundamentals
– 22 projects react opensource: https://medium.mybridge.co/22-amazing-open-source-react-projects-cb8230ec719f#.hohty7k7q
– 55 examples in react native https://react.rocks/tag/ReactNative
– Uptate kiến thức react native hằng ngày: http://reactnative.cc/
– React UI Kit: https://blog.getexponent.com/using-react-native-ui-toolkits-with-exponent-3993434caf66#.obxphznoy
– Apolo Server: https://dev-blog.apollodata.com/navigating-your-transition-to-graphql-28a4dfa3acfb?source=reading_list———16-1——–
– Build best animation – https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108#.54pqxsr9y
– Top css techniques for optimal performance https://medium.com/outsystems-experts/mobile-web-applications-top-css-techniques-for-optimal-performance-b66e3111c733#.sydabm4mo
Trên đây là một số bài viết, đa số là cho phiên bản cũ, các bạn có thể cập nhật lại theo phiên bản mới.
Hi vọng sẽ giúp các bạn!
Leave a Reply