Praktik pengembangan aplikasi web menggunakan framework React JS. Dilengkapi dengan pembahasan studi kasus terkait penerapan konsep component-based architecture, pembuatan state management, penerapan React hooks & advanced patterns untuk membantu pengembangan fitur interaktif di React JS
CONTENT
1. Introduction React
1.1. What is React
1.2. React Features
1.3. What’s new in React
2. Rendering with JSX
2.1. Your first JSX content
2.2. Rendering HTML
2.3. Describing UI structures
2.4. Creating your own JSX elements
2.5. Using JavaScript expressions
2.6. Fragments of JSX
3. Component Properties, State, and Context
3.1. What is component state?
3.2. What are component properties?
3.3. Setting a component state
3.4. Passing property values
3.5. Stateless components
3.6. Container components
3.7. Providing and consuming context
4. Getting Started with Hooks
4.1. Maintaining state using Hooks
4.2. Performing initialization and cleanup actions
4.3. Sharing data using context Hooks
4.4. Using reducer Hooks to scale state management
5. Event Handling – The React Way
5.1. Declaring event handlers
5.2. Using event handler context and parameters
5.3. Declaring inline event handlers
5.4. Binding handlers to elements
5.5. Using synthetic event objects
5.6. Understanding event pooling
6. Crafting Reusable Components
6.1. Reusable HTML elements
6.2. The difficulty with monolithic components
6.3. Refactoring component structures
6.4. Render props
6.5. Refactoring class components using Hooks
6.6. Rendering component trees
6.7. Feature components and utility components
7. The React Component Life Cycle
7.1. Why components need a life cycle
7.2. Initializing properties and state
7.3. Optimizing rendering efficiency
7.4. Rendering imperative components
7.5. Cleaning up after components
7.6. Containing errors with error boundaries
8. Validating Component Properties
8.1. Knowing what to expect
8.2. Promoting portable components
8.3. Simple property validators
8.4. Type and value validators
8.5. Writing custom property validators
9. Handling Navigation with Routes
9.1. Declaring routes
9.2. Handling route parameters
9.3. Using link components
10. Code Splitting Using Lazy Components and Suspense
10.1. Using the lazy API
10.2. Using the Suspense component
10.3. When to avoid lazy components
10.4. Lazy pages and routes
11. Server-Side React Components
11.1. What is isomorphic JavaScript?
11.2. Rendering to strings
11.3. Backend routing
11.4. Frontend reconciliation
11.5. Fetching data
12. User Interface Framework Components
12.1. Layout and organization
12.2. Using navigation components
12.3. Collecting user input
12.4. Working with styles and themes
13. Introduction React Native
13.1. Introduction React Native
13.2. React and JSX are familar
13.3. The mobile browser experience
13.4. Android and iOS – different yet the same
13.5. The case for mobile web apps
14. Kick-Starting React Native Projects
14.1. Installing and using the Expo command-line tool
14.2. Viewing your app on your phone
14.3. Viewing your app on Expo Snack
15. Building Responsive Layouts with Flexbox
15.1. Flexbox is the new layout standard
15.2. Introducing React Native styles
15.3. Building Flexbox layouts
16. Navigating Between Screens
16.1. Navigation basics
16.2. Route parameters
16.3. The navigation header
16.4. Tab and drawer navigation
16.5. Handling state
17. Rendering Item Lists
17.1. Rendering data collections
17.2. Sorting and filtering lists
17.3. Fetching list data
17.4. Lazy list loading
18. Showing Progress
18.1. Progress and usability
18.2. Indicating progress
18.3. Measuring progress
18.4. Navigation indicators
18.5. Step progress
19. Geolocation and Maps
19.1. Where am I?
19.2. What’s around me?
19.3. Annotating points of interest
20. Collecting User Input
20.1. Collecting text input
20.2. Selecting from a list of options
20.3. Toggling between on and off
20.4. Collecting date/time input
21. Displaying Modal Screens
21.1. Important information
21.2. Getting user confirmation
21.3. Passive notifications
21.4. Activity modals
22. Responding to User Gestures
22.1. Scrolling with your fingers
22.2. Giving touch feedback
22.3. Swipeable and cancellable
23. Controlling Image Display
23.1. Loading images
23.2. Resizing images
23.3. Lazy image loading
23.4. Rendering icons
24. Going Offline
24.1. Detecting the state of the network
24.2. Storing application data
24.3. Synchronizing application data
25. Native UI Components Using NativeBase
25.1. Application containers
25.2. Headers, footers, and navigation
25.3. Using layout components
25.4. Collecting input using form components
25.5. Displaying data using lists
25.6. Showing user notifications
26. Handling Application State
26.1. Information architecture and Flux
26.2. Unified information architecture
26.3. Implementing Redux
26.4. Scaling the architecture
27. Introduction Apollo
27.1. Yet another approach?
27.2. Verbose vernacular
27.3. Declarative data fetching
27.4. Mutating application state
28. Building an Apollo React App
28.1. Todo and Apollo Client
28.2. The GraphQL schema
28.3. Bootstrapping Apollo Client
28.4. Adding todo items
28.5. Rendering todo items
28.6. Completing todo items
