React JS Programming Language is an Open source free Programming language, in order to develop User interfaces. Used as a base in the development of single page or mobile apps. Meanwhile allows you to interface with other libraries & framework. Compatible & easiest way to create UI’s. Develop new Features with existing code.
-
1. Introduction & Agenda
-
2. Introduction to DOM Render Process & Performance
-
3. Introduction to Virtual DOM
-
4. Your first React Web Application - Voting App
- Setting up your development environment
- Code editor
- Node js and npm
- Getting started
- Prepare the app
- Our first component
- React createClass()
- JSX
- The developer console
- Babel
- ReactDOM render()
- Our second component
- Making Product data-driven
- The data model
- Using props
- Rendering multiple products
- React the vote (your apps first interaction)
- Propagating the event
- Using state
- Setting state with this setState()
- Updating state
-
5. Debugging a React application using React and Redux Dev Tools
-
6. Components – Time Logging App
- Getting started
- Previewing the app
- Prepare the app
- Breaking the app into components
- The steps for building React apps
- Build a static version of the app
- TimersDashboard
- EditableTimer
- TimerForm
- ToggleableTimerForm
- Timer
- Render the app
- Determine what should be stateful
- State criteria
- Applying the criteria
- Determine in which component each piece of state should live
- The list of timers and properties of each timer
- Whether or not the edit form of a timer is open
- Visibility of the create form
- Hard-code initial states
- Adding state to TimersDashboard
- Receiving props in EditableTimerList
- Props vs state
- Adding state to EditableTimer
- Timer and TimerForm remain stateless
- Adding state to ToggleableTimerForm
- Add inverse data flow
- Updating timers
- Adding editability to Timer
- Updating EditableTimer
- Updating EditableTimerList
- Defining onEditFormSubmit() in TimersDashboard
- Deleting timers
- Adding the event handler to Timer
- Routing through EditableTimer
- Routing through EditableTimerList
- Implementing the delete function in TimersDashboard
- Adding timing functionality
- Adding a forceUpdate() interval to Timer
- Add start and stop functionality
- Add timer action events to Timer
- Create TimerActionButton
- Run the events through EditableTimer and EditableTimerList
- Methodology review
-
7. Forms
-
8. Routing
- What’s in a URL?
- React Router’s core components
- Building the components of react-router
- The completed app
- Building Match
- Building Link
- Building Router
- Building Redirect
- Using react-router
- More Match
- Using Miss
- Dynamic routing with React Router the completed app
- The server’s API
- The starting point of the app
- Using URL params
-
9. React Hooks
- Reconciliation and Lifecycles aka React Hooks
- Creating the Components
- How Content Is Rendered
- Update Process
- Reconciliation Process
- Understanding List Reconciliation
- Explicitly Triggering Reconciliation
- Component Lifecycle
- Mounting Phase
- Update Phase
- Unmounting Phase
- Using the Effect Hook
- Using the Advanced Lifecycle Methods
- Preventing Unnecessary Component Updates
- Setting State Data from Prop Values
-
10. Stateful Components
- Understanding the Different Component Types
- Understanding Stateful Vs Stateless Components
- Creating a Stateful Component
- Component Class
- Import Statement
- Render Method
- Stateful Component Props
- Reading & Modifying State Data
- Avoiding the State Data Modification Pitfalls
- Defining Stateful Components Using Hooks
- Lifting Up State Data
- Defining Prop Types and Default Values
-
11. Composing Applications
- Basic Component Relationship
- Using the Children Prop
- Manipulating Prop Children
- Specialized Component
- Higher-Order Components
- Stateful Higher-Order Components ]
- Combining Higher-Order Components
- Using a Render Prop with an Argument
- Using Contexts for Global Data
- Defining the Context
- Creating the Context Consumer
- Creating the Context Provider
- Changing Context Data Values in a Consumer
- Using the Simplified Context Consumer APIs
- Defining Error Boundaries
- Creating the Error Boundary Component
-
12. Using Refs and Portals
- Creating Refs
- Using Refs to Create Uncontrolled Form Components
- Creating Refs Using a Callback Function
- Validating Uncontrolled Form Components
- Understanding Refs and the Lifecycle
- Using Refs with Other Libraries or Frameworks
- Accessing a Child Component’s Content
- Using Ref Forwarding
- Using Portals
0.00 average based on 0 ratings