[iApp] Key Course Tutorial สู่นักเขียนโปรแกรม React, React-Native และ NodeJS แบบมืออาชีพ
· 7 min read
Post นี้สำหรับพนักงาน iApp ใหม่ทุกท่าน ที่ทุกคนต้องได้คือ 0, 1, 7
ถ้าสาย Mobile App ต้อง 2,3 (5 — Optional)
ถ้าสาย Web Front End ต้อง 2 (5 — Optional)
ถ้าสาย Web Back End ต้อง 4,6 (5 — Optional)
Warning สาย Web Back End กำลังจะตกงานนะจ๊ะ (อยากรอดต้องเป็น Firebase จ๊ะ 5)
0. Git
ถ้า Git ยังไม่ได้ไม่ต้องพูดถึงเรื่องอื่นเลย
Try GitLearn how to use Git with Code School's interactive course, Try Git.try.github.io
- ES6 & Babel & Webpack
ก่อนจะเริ่ม React ได้ ต้องเขียนภาษา ES6 ให้โปรเสียก่อน
แนะนำ Course ของ Udemy เป็นหลักและอ่าน Blog ของผมและ AirBnb ผ่านๆ
ECMAScript 2015 (ES6), Babel and Webpack ExplainedStart using EcmaScript/ES6 in production and own projects today. - Free Coursewww.udemy.com
[React Native 2] Modern JavaScript Programming language with ES6/ES2015The followings are slide presentation for ITS484: Mobile App Development, SIIT, Thammasat University, Thailand (1/2016)medium.com
แนะนำให้ทวนตามใน Blog ของผมด้วย จะได้เขียนถูก Style ตามหลัก Airbnb https://github.com/airbnb/javascript
2. React & Redux
แนะนำอ่านชุดบทความของ babel coder มาก่อน (ทบทวน Webpack และ Babel ด้วย) แล้วต่อด้วยของ Udemy มี 2 เจ้าจะเอาของ Stephen Grider หรือ Leonardo Daniel ก็ได้ ต่อด้วยใช้ BoilerPlate ของ React-Production-Starter ให้เป็น หรือแต่งสดเองก็ได้
Modern React with Redux - UdemyMaster the fundamentals of React and Redux with this tutorial as you develop apps supported by NPM, Webpack, and ES6www.udemy.com
Advanced React and Redux - UdemyDetailed walkthroughs on advanced React and Redux concepts - Authentication, Testing, Middlewares, HOC's, and…www.udemy.com
[ชุดบทความ] สอนสร้าง Isomorphic Application ด้วย React.js และ Redux ใน 5 วันชุดบทความนี้ประกอบไปด้วย 5 บทความที่จะสอนคุณสร้าง Isomorphic Application ใน 5 วันwww.babelcoder.com
React Redux React-Router: From Beginner to Paid Professionallearn React, Redux, React-Router, ECMAScript2015(ES6) by creating many applications such as Todo List, YouTube and…www.udemy.com
jaredpalmer/react-production-starterreact-production-starter - React Redux boilerplate with isomorphic rendering, async react-router routes, async redux…github.com
Bootstrap · The world's most popular mobile-first and responsive front-end framework.Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.getbootstrap.com
3. React-Native + Firebase
ลองเล่นของ Udemy ก่อน แต่ไม่ค่อยครบ แล้วอ่านของ FormInit ให้พื้นฐาน React, Redux ให้แน่น แล้วมาจบด้วยของผมที่เล่น Module ครบถ้วนที่สุด อันสุดท้ายสร้าง App ด้วย IgniteJS ต่อด้วยสามารถทำ Firebase ได้
React Native Course DirectoryBuild native mobile app in iOS and Android in Single codebase by JavaScript programming language backed by Facebook.medium.com
React Native Course ตอนที่ 1: ติดตั้งบน OSXReact Native Installation for OSX ด้วยเหตุที่ React Native เป็นระบบที่ใช้สำหรับพัฒนา Native App. สำหรับทั้ง IOS แล…www.forminit.com
The Complete React Native and Redux Course - UdemyiOS and Android App Development from scratch - build fully native mobile apps ridiculously fast!www.udemy.com
infinitered/igniteignite - The unfair starting CLI, Generator, and more for React Nativegithub.com
4. สาย Server, NodeJS, Express, MongoDB, AngularJS
ดูเหมือนของ Code School จะตรงสุด ตามด้วยเรียนรู้ให้ the MEAN stack ให้เป็น เพิ่มพวก MongoDB, Mongoose, AngularJS และ Gulp ด้วยการอ่าน Doc และสุดท้ายใช้ generator-angular-fullstack ให้เป็น
The MEAN Stack | Code SchoolMEAN is a collection of JavaScript-based technologies - MongoDB, Express.js, AngularJS, and Node.js - used to develop…www.codeschool.com
MongoDB Tutorials - MongoDB Manual 3.2MongoDB Manual 3.2 MongoDB Tutorialsdocs.mongodb.com
Mongoose ODM v4.7.6Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type…mongoosejs.com
AngularJSAngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data…docs.angularjs.org
Express - Node.js web application frameworkExpress is a minimal and flexible Node.js web application framework that provides a robust set of features for web and…expressjs.com
Socket.IOEdit descriptionsocket.io
RedisRedis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker…redis.io
gulp.jsEdit descriptiongulpjs.com
angular-fullstack/generator-angular-fullstackgenerator-angular-fullstack - Yeoman generator for AngularJS with an Express servergithub.com
5. สาย Firebase (Serverless)
[React Native 12] Advanced Lifecycle, AppState, Firebase, Realtime Databasemedium.com
[React Native 13] Firebase Realtime Database + Authenticationmedium.com
Firebase | App success made simpleFirebase gives you the tools and infrastructure you need to build better apps and grow successful businesses.firebase.google.com
6. สาย Server
NGINX | High Performance Load Balancer, Web Server, & Reverse ProxyNGINX accelerates content and application delivery, improves security, facilitates availability and scalability for the…www.nginx.com
DockerDocker is an open platform for developers and sysadmins to build, ship, and run distributed applications, whether on…docker.com
Amazon Web Services (AWS) - Cloud Computing ServicesAmazon Web Services offers reliable, scalable, and inexpensive cloud computing services. Free to join, pay only for…aws.amazon.com
The leading operating system for PCs, tablets, phones, IoT devices, servers and the cloud | UbuntuUbuntu is an open source software platform that runs everywhere from IoT devices, the smartphone, the tablet and the PC…www.ubuntu.com
Microsoft Azure: Cloud Computing Platform & ServicesMicrosoft Azure is an open, flexible, enterprise-grade cloud computing platform. Move faster, do more, and save money…azure.microsoft.com
7. Tools ที่บริษัทใช้