Please enable JavaScript.
Coggle requires JavaScript to display documents.
Reactjs - Coggle Diagram
Reactjs
MAIN CONCEPTS
JSX
Why JSX?
Embedding Expressions in JSX
JSX is an Expression Too
Specifying Attributes with JSX (quotes or curly braces )
Specifying Children with JSX
JSX Prevents Injection Attacks
JSX Represents Objects
Rendering Elements
Rendering an Element into the DOM
Updating the Rendered Element
React Only Updates What’s Necessary
Components and Props
Function and Class Components
Rendering a Component
Composing Components
Extracting Components
Props are Read-Only
State and Lifecycle
Converting a Function to a Class
Adding Local State to a Class
Adding Lifecycle Methods to a Class
Using State Correctly
Do Not Modify State Directly
State Updates May Be Asynchronous
State Updates are Merged
The Data Flows Down
Handling Events
Passing Arguments to Event Handlers
Conditional Rendering
Inline If with Logical && Operator
Inline If-Else with Conditional Operator
Preventing Component from Rendering
Lists and Keys
Keys
Extracting Components with Keys
Keys Must Only Be Unique Among Siblings
Embedding map() in JSX
Forms
Controlled Components
The textarea Tag
The file input Tag
Handling Multiple Inputs
Controlled Input Null Value
Alternatives to Controlled Components
Fully-Fledged Solutions
Lifting State Up
Composition vs Inheritance
Containment
Specialization
So What About Inheritance?
ADVANCED GUIDES
1. Accessibility
Standards and Guidelines
WCAG
WAI-ARIA
Semantic HTML
Accessible Forms
Labeling
Notifying the user of errors
Focus Control
Keyboard focus and focus outline
Mechanisms to skip to desired content
Programmatically managing focus
Mouse and pointer events
More Complex Widgets
Other Points for Consideration
Setting the language
Setting the document title
Color contrast
Development and Testing Tools
The keyboard
Development assistance
Testing accessibility in the browser
Screen readers
Commonly Used Screen Readers
2. Code-Splitting
Bundling
Code Splitting
import()
React.lazy
Avoiding fallbacks
Error boundaries
Route-based code splitting
Named Exports