React Native Development Fundamentals

Praktik pengembangan software web & mobile multiplatform menggunakan framework React Native. Dilengkapi dengan pembahasan studi kasus terkait pembuatan responsive layouts menggunakan FlexBox, pembuatan screen navigation yang interaktif, penggunaan geolocation & maps, penggunaan NativeUI Components untuk pembuatan efek animasi, serta penggunaan GraphQL untuk penyimpanan data.

CONTENT

1. Why React?

1.1. What is React?
1.2. What’s New in React 18?

2. Rendering with JSX

2.1. Technical Requirements
2.2. Your First JSX Content
2.3. Rendering HTML
2.4. Creating Your Own JSX Elements
2.5. Using JavaScript Expressions
2.6. Building Fragments of JSX

3. Component Properties, State, and Context

3.1. Technical Requirements
3.2. What is Component State?
3.3. What are Component Properties?
3.4. Setting Component State
3.5. Passing Property Values
3.6. Stateless Components
3.7. Container Components
3.8. Providing and consuming context

4. Getting Started with Hooks

4.1. Technical Requirements
4.2. Maintaining State Using Hooks
4.3. Performing Initialization and Cleanup Actions
4.4. Sharing Data Using Content Hooks
4.5. Using Reducer Hooks to Scale State Management

5. Event Handling, the React Way

5.1. Technical Requirements
5.2. Declaring Event Handlers
5.3. Using Event Handler Context and Parameters
5.4. Declaring Inline Event Handlers
5.5. Binding Handlers to Elements
5.6. Using Synthetic Event Objects
5.7. Understanding Event Pooling

6. Crafting Reusable Components

6.1. Technical Requirements
6.2. Reusable HTML Elements
6.3. The Difficulty with Monolithic Components
6.4. Refactoring Component Structures
6.5. Render Props
6.6. Refactoring Class Components Using Hooks
6.7. Rendering Component Trees
6.8. Feature Components and Utility Components

7. The React Component Life Cycle

7.1. Technical Requirements
7.2. Why Components Need a Life Cycle
7.3. Initializing Properties and State
7.4. Optimizing Rendering Efficiency
7.5. Rendering Imperative Components
7.6. Cleaning Up After Components
7.7. Containing Errors with Error Boundaries

8. Validating Component Properties

8.1. Technical Requirements
8.2. Knowing What to Expect
8.3. Promoting Portable Components
8.4. Simple Property Validators
8.5. Type and Value Validators
8.6. Writing Custom Property Validators

9. Handling Navigation with Routes

9.1. Technical Requirements
9.2. Declaring Routes
9.3. Handling Route Parameters
9.4. Using Link Components

10. Code Splitting Using Lazy Components and Suspense

10.1. Technical Requirements
10.2. Using the Lazy API
10.3. Using the Suspense Component
10.4. Avoiding Lazy Components
10.5. Exploring Lazy Pages and Routes

11. Server-Side React Components

11.1. Technical Requirements
11.2. What is Isomorphic JavaScript?
11.3. Rendering to Strings
11.4. Backend Routing
11.5. Frontend Reconciliation
11.6. Fetching Data

12. User Interface Framework Components

12.1. Technical Requirements
12.2. Layout and Organization
12.3. Using Navigation Components
12.4. Collecting User Input
12.5. Working with Buttons
12.6. Working with Styles and Themes

13. High-Performance State Updates

13.1. Technical Requirements
13.2. Batching State Updates
13.3. Handling Asynchronous State Updates

14. Why React Native?

14.1. Technical Requirements
14.2. What is RN?
14.3. React and JSX are Familiar
14.4. The Mobile Browser Experience
14.5. Android and IOS – Different Yet the Same
14.6. The Case for Mobile Web Apps

15. React Native Under the Hood

15.1. Technical Requirements
15.2. Exploring React Native Architecture
15.3. Explaining JS and Native Modules
15.4. Exploring React Native Components and APIs

16. Kick-Starting React Native Projects

16.1. Technical Requirements
16.2. Exploring React Native CLI Tools
16.3. Installing and Using the Expo Command-Line Tool
16.4. Viewing Your App on Your Phone
16.5. Viewing Your App on Expo Snack

17. Building Responsive Layouts with Flexbox

17.1. Technical Requirements
17.2. Introducing Flexbox
17.3. Introducing React Native Styles
17.4. Using the Styled Components Library
17.5. Building Flexbox Layouts

18. Navigating Between Screens

18.1. Technical Requirements
18.2. Navigation Basics
18.3. Route Parameters
18.4. The Navigation Header
18.5. Tab and Drawer Navigation

19. Rendering Item Lists

19.1. Technical Requirements
19.2. Rendering Data Collections
19.3. Sorting and Filtering Lists
19.4. Fetching List Data
19.5. Lazy List Loading
19.6. Implementing Pull to Refresh

20. Showing Progress

20.1. Technical Requirements
20.2. Understanding Progress dan Usability
20.3. Indicating Progress
20.4. Measuring Progress
20.5. Exploring Navigation Indicators
20.6. Step Progress

21. Geolocation and Maps

21.1. Technical Requirements
21.2. Using Location API
21.3. Rendering the Map
21.4. Annotating Points of Interest

22. Collecting User Input

22.1. Technical Requirements
22.2. Collecting Text Input
22.3. Selecting From a List of Options
22.4. Toggling Between On and Off
22.5. Collecting Date/Time Input

23. Displaying Model Screens

23.1. Technical Requirements
23.2. Important Information
23.3. Getting User Confirmation
23.4. Passive Notifications
23.5. Active Modals

24. Responding to user Gestures

24.1. Technical Requirements
24.2. Scrolling with Your Fingers
24.3. Giving Touch Feedback
24.4. Using Swipeable and Cancellable Components

25. Using Animations

25.1. Technical Requirements
25.2. Using React Native Reanimated
25.3. Animating Layout Components
25.4. Animating Styling Components

26. Controlling Image Display

26.1. Technical Requirements
26.2. Loading Images
26.3. Resizing Images
26.4. Lazy Image Loading
26.5. Rendering Icons

27. Going Offline

27.1. Technical Requirements
27.2. Detecting the State of The Network
27.3. Storing Application Data
27.4. Synchronizing Application Data

28. Selecting Native UI Components Using NativeBase

28.1. Technical Requirements
28.2. Application Containers
28.3. Headers and Footers
28.4. Using Layout Components
28.5. Collecting Input Using from Components

Part 3 – React Architecture

29. Handling Application State

29.1. Technical Requirements
29.2. Organizing State in React
29.3. Implementing Context
29.4. Managing State in Mobile Apps
29.5. Scaling the Architecture

30. Why GraphQL?

30.1. Approaching State with GraphQL
30.2. Understanding Some Verbose Vernacular About GraphQL
30.3. Declarative Data Fetching
30.4. Mutating Application State

31. Building a GraphQL React App

31.1 Technical Requirements
31.2. Creating a Todo App
31.3. Constructing a GraphQL Schema
31.4. Bootstrapping the Apollo Client
31.5. Adding Todo Items
31.6. Rendering Todo Items
31.7. Completing Todo Items