In the RN class, you need to read some references to improve your skills and insights about our lesson. Therefore, I gather it in here so that you can access it before the session.
Happy learning and sharing knowledge, guys! [Learn, Collaborate, Inspire] ;)
- Chapter 0 - Topic 1 Sejarah Aplikasi
- Chapter 0 - Topic 2 Konsep Produk
- Chapter 0 - Topic 3 SDLC
- Chapter 0 - Topic 4 Tech Stack
- Chapter 0 - Topic 5 Bahasa Pemrograman
UI/UX Tips-Trends:
- Good Design Practices: Naming Conventions
- Top 100 UX Design Tips
- 7 UX and UI Design Trends 2020
- 8 UI and Ux Design Trends 2020
- 8 Innovative Web Design Trends for 2020
- 8 Simple UI UX Design Tips Web Designers
- A Complete Guide to UI Developer
- Slice and Export Images in Photoshop
- Slice — Modular Design System
- Slice for Sketch
All About Colors:
Free Design eBooks (100% Legal):
- Awwwards ebooks
- UXPin ebooks
- Invision ebooks
- Invision ebook: Fundamental UI Design
- Interaction Design ebooks
- User testing ebooks
- Webflow ebooks
- Netguru ebooks
-
Link References:
Introduction:
- Summary of material that I have summarized
- Scope of React Developer Roadmap
- The 2020 Web Developer Roadmap
Installation-Configuration:
- Install dualboot: Ubuntu 18.04 x Windows 10
- Install Android Studio in Linux
- After Install Android Studio: Create icon launcher in Ubuntu
- Install VS Code Extensions for Web Development
Linux Command:
HTML-CSS:
- Intro HTML
- HTML Layout
- HTML-CSS Layouting
- HTML Tags Guide: URL
- CSS Units
- CSS Specificity
- CSS Flexbox: A Fun Way to Learn Flexbox
- CSS Selector: A Fun Way to Learn Selector
- CSS Flexbox
- CSS Grid
- CSS-Framework
- CSS Preprocessor
- Tutorial CSS for Beginner
- Media-Query
- Free Course: Responsive Web Design
- Video Tutorial Web Programming UNPAS
Git:
- Intro Git
- Git Cheatsheet
- Interactive git playground
- Gitflow Animated
- Tutorial Git gak pake ribet
- Markdown Cheatsheet
- Mastering Markdown
- Markdown and VS Code
- Types of Open Source License
- Github Pages
- Gitlab Pages
- Video: Git Beginner Tutorial
-
Link References:
JavaScript Fundamentals:
- Intro JavaScript
- Java vs JavaScript
- 5 JS Style Guides
- All About JS
- JS Types Data Structures
- Undefined, Null, Not Defined, Undeclared
- JS Filter Table
Algorithm-Flowchart-Data Structure:
- Fundamentals of Algorithms
- Algorithms: Explained-Animated
- Free Course: Algorithm
- Algorithm, Structure, and Characteristic
- Algorithm Big O Analysis
- Draw Flowchart Online
- What is Data Structure
- Data Structures Part 1
- Data Structures Part 2
-
Link References:
JS & ES:
- JS ES6 Cheatsheet
- Exploring ES6
- Using Default Parameters in ES6
- When & Why You Should Use ES6 Arrow Function
- Use Strict in JS
- Dot Notation vs Bracket Notation
- JS Regex
- You dont know JS
- JS Brief and ES Features
- JS Books
- JS Tutorial - JavatPoint
- JS Tutorial - W3Schools
- The Modern JS Tutorial
Package Manager:
Programming Paradigm:
- Intro Programming Paradigm
- Functional vs OOP vs Procedural Programming
- Functional Programming in JS
- Functional Programming in ES6
- Debate: Functional Programming vs OOP
- Infographic: Functional Programming vs OOP
- Compiler vs Interpreter
OOP:
- Part 1 OOP in JS: Class-Object-Constructor-Property-Method
- Part 2 OOP in JS: Getter-Setter
- JS and OOP Part:1
- JS and OOP Part:2
- JS and OOP Part:3
- Classes
- Implementing Private Variables in JS
- Video: Traversy Media
- Video: Programming with Mosh
JS Asynchronous:
- Blocking vs Non Blocking
- NodeJs: Multithreaded Server, Blocking vs Non Blocking, Event Loop
- Using Promise, Avoid Callback Hell
- Why Async?
- JS Handling Asynchronous
- Asynchronous JS Part: 1
- Asynchronous JS Part: 2
- Asynchronous JS Part: 3
- Asynchronous JS Part: 4
- Defer vs Async
- JS Tricky
JSON:
jQuery:
- jQuery-ajax Learning Center
- jQuery Tutorial: W3Schools
- jQuery Tutorial: BitDegree
- jQuery Tutorial: CSS Tricks
- jQuery to Grab JSON Files
- You Might Not Need jQuery
-
Link References:
ReactJS:
- ReactJS vs React Native
- ReactJS Basic-JSX
- Using ReactJS in VSCode
- Understand VirtualDOM
- VirtualDOM
- ReactJS VirtualDOM-Reconciliation
- ReactJS Component Styling
- Tips: Choosing a Style Library for ReactJS Project
- ReactJS UI Component Libraries: 2020
- ReactJS UI Component Libraries: 2019
- ReactJS UI Component Libraries: 2018
- ReactJS Part 1: Setting Environment Manual
- ReactJS Part 2: CRA
- React Lifecycle Simulators
- React: Conditional Rendering
- ReactJS HOC
- React Hooks Intro
- React Hooks Tutorial
- Learn ReactJS: Petani Kode
- Learn ReactJS: Sekolah Koding
- Learn ReactJS: GeeksForGeeks
Fetching Data:
- Web API Concept
- Microservices
- API Testing Using Postman
- Video: REST API
- When Do You Need AXIOS
- Easy to Use AXIOS
- Using AXIOS
Store Data:
-
Link References:
React Native:
- All About React
- React Native Ultimate Guide
- 7 Reasons to Choose React Native
- When React Native is not a Good Choice for a Mobile Application Development
- Summary React Native at Airbnb
- Repo: RN Community
- Tips: Absolute Import Path in React Native
- Tips: Direct Manipulation in React-Native
- Video: Setup ESLint
App Security:
- Intro to Web App Security
- Encoding, Obfuscation, Hashing, and Encryption
- Charset, Encoding-Decoding
- Hash and Blockchain
- RN Security
- RN Keychain/Keystore
- Secure Your RN App
- Why You Cant secure a RN App
- JWT Handbook
Web Security:
Authentication-Authorization:
-
Link References:
Redux:
- Intro React Redux
- All About Redux
- Redux Toolkit-useReducer: ReactJs case
- Why use Redux?
- Learn Redux by Flavio
- Redux Case
- Redux: Sample Code
- Redux Form: Sample Code
- Redux Persist
- You Might Not Need Redux
- Learning Resources
Saga:
- Intro Redux Saga
- Management State Redux Saga
- Redux Saga Documentation
- Redux Thunk vs Redux Saga
- Implementing Redux Saga For An Async Flow
- Handling Side Effects in Redux Saga
- Redux Saga for Beginner
- Video Tutorial: Redux saga
- Repo: i-Muslim
- Repo: Redux Saga Example
-
Link References:
Testing:
- Different Types of Testing
- 5 Types Of User Acceptance Testing
- What is Unit Testing
- Intro to Unit Testing: 1
- Intro to Unit Testing: 2
- Unit Testing and the Arrange, Act and Assert (AAA) Pattern
- Testing: Stubs, Mocks, Stress, and Penetration
- Testing : Mock and Stubs
- Unit Testing Jest-Enzyme in React Native: Stubs & Mocks
- Testing in React: Jest-Enzyme
- Testing in React: TDD
- Part 1: Unit Testing React Components
- Part 2: BDD and Functional Testing
- API Testing in React: Jest
- React Native Testing Tools: Automation Testing
- React Native Testing Automation: Detox
- React Native Testing Automation: Appium
- Microservice Testing: Introduction
- Microservice Testing: Unit Tests
- Jest Documentation
- Enzyme Documentation
- Tutorial: Software Testing
- Tutorial: Software Testing Fundamentals
- Video Tutorial: React Native Testing Library
- Video Tutorial: Unit Testing in Redux Saga
- Video Tutorial: Unit & Integration Testing in React-Redux
- Repo: Unit & Integration Testing in React-Redux
Publishing App:
- Publishing App to Google Play Store
- Publishing App to App Store
- Google Play: For Developer
- Google Play Academy Resources
CI/CD:
- GitLab Docs
- Intro DevOps
- React Native with Gitlab CI/CD
- Configuring .gitlab-ci.yml: RN-Android
- Gitlab and Fastlane: RN-iOS
- Gitlab CI & Sample Project: RN-Android
- Building CI/CD Using Docker
- Building CI/CD Using Docker and Jenkins
Computational Thinking:
- Computational Thinking
- Exploring Computational Thinking
- Course: Computational Thinking
- Quest: Computational Thinking
- Bebras: International Challenge on Informatics and Computational Thinking
- Bebras Indonesia
- MIT App Inventor: Build Apps with Computational Thinking
- Video: Computational Thinking Talk
Design Principles:
- KISS, DRY, TDA, SOC, YAGNI
- 3 Key Software Principles You Must Understand
- SOLID Principle: Part 1
- SOLID Principle: Part 2
- Sample 1: SOLID Principle JavaScript
- Sample 2: SOLID Principle JavaScript
JS Design Patterns:
- JS Design Patterns
- 4 JS Design Patterns You Should Know
- The Comprehensive Guide to JS Design Patterns
- Sample: Design Patterns in JS
- Sample: Understanding Design Patterns in JS
- Book: Essential JS Design Patterns
React Native Animations:
- React Native Animations Documentation
- Top 5 Animation Libraries in React Native
- Tutorial 1: React Native Animations Series
- Tutorial 2: Adding Animations to React Native App
- Tutorial 3: Making Animations in React Native
- Tutorial 4: Simple Transform Animation
- Tutorial 5: Animation Header
- Tutorial 6: Animation JSON Lottie
- Lottie Documentation
Splash Screen:
- Tutorial 1: Splash Screen to a React Native App (iOS and Android)
- Tutorial 2: Implement Splash Screen using React Navigation
- Tutorial 3: Setting Splash Screen in Android
Design Sprint:
- What’s a Design Sprint and why is it important?
- Design Sprint Resources
- Design Sprint Kit by Google
- Whimsical: The Visual Workspace (Flowchart, Wireframes, Sticky Notes, Mind Maps)
- Miro: The Online Collaboration (Product Roadmap, Retrospective, Flowchart, Mind Maps, etc)
- Figma: The Collaborative Interface Design Tool
- Dribbble: Discover Design Project
- Maze Design: User Testing Prototype Design
Coding Conventions/Style/Standard:
- Coding Conventions
- Importance of Code Quality and Coding Standard in Software Development
- Coding Style: Google
- Coding Style: Airbnb
- Coding Style: ESLint
- Coding Style: Mozilla
- Coding Style: JSInfo
- JavaScript Standard Style
- JavaScript The Right Way
Code Challenge Resources:
Back-end Resources:
- A Quick guide on Mobile App Backend Development
- Strapi: Open source Node.js Headless CMS
- SQLite vs MySQL vs PostgreSQL
- Sequelize Documentation
- Tutorial SQLite
- Tutorial SQL
- Tutorial PostgreSQL
- Tutorial GraphQL
- Tutorial Apollo GraphQL
- Deploying Node.js Apps on Heroku
Interview Resources:
- React Interview Questions
- ReactJS Interview Questions
- React Native Interview Questions
- Top 50 React Interview Questions
- 50+ Data Structure and Algorithms Interview
- Top 50 Programming Interview Questions
- Coding Interview for Dummies
- Github: ReactJS Interview Questions
- Github: Awesome Interview Questions
My Github: