Web Coding Center
REACT
[Classical Syntax]
Getting Started
Adding React directly in HTML
Create React App
Other Toolchains
About JSX
Online Editors
Components and Props
Function Component
Class Component
List
Fragment
props.children, defaultProps, displayName
…props
ReactDOM.render()
Special Component Members
Attributes
HTML Attributes
SVG Attributes
className
htmlFor
style
dangerouslySetInnerHTML
suppressContentEditableWarning
suppressHydrationWarning
defaultValue
defaultChecked
Adding Attribute Conditionally
Toggling Visibility
Events
Differences from HTML events
Binding
Passing Arguments
Rate Limiting
States
Setting and Using a State
Asynchronous States
Optional Callback
AJAX
Forms – Controlled Components
Updating Complex State
Lifting States Up
Lifecycle & Error Boundaries
Order of Execution
React.PureCompoent
React.memo
Error Boundary
Ref
Child Access
On Function Components
Callback Ref
Ref Forwarding
Context
Retrieving the Context 'value'
Consuming Multiple Contexts
Updating a Nested Component
Preventing Unintentional Renders
Class.contextType
Context.displayName
Portals
Inserting into a Different DOM Node
Event Bubbling Through Portals
Render 'props'
In an Attribute
Between Tags
With Hooks
Higher Order Components
Caveats
Copying Over Static Methods
Maximizing Composability
Forwarding Refs
with a Render Prop
Container Components
Other APIs
React.X
component.forceUpdate(callback)
ReactDOM.X
[Hooks]
useState
Creating and Updating a State
Functional Update
Merging Update Objects with …
Functional State Initialization
Separating State Variables
useEffect
Simulating componentDidMount() & componentDidUpdate()
Simulating componentWillUnmount()
Out of order Responses
Avoiding Unnecessary Firing
Listening For Key Press
useContext
Passing an Object
Passing A Function
useReducer
Initialization
Forcing Re Render
useCallback
Remembering States
Avoiding Unnecessary Renders
Callback Ref
useMemo
Memoizing a Value
Difference with useCallback()
Running on Every Render
Avoiding Unnecessary Renders
useRef
Accessing DOM Node
Functional Initialization
As a Component Variable
Dealing with Stale States
Avoiding Unnecessary Renders
useImperativeHandle
Exposing Selected Node Methods
Calling Child Component Methods
UseLayoutEffect
Building a Custom Hook
usePost
usePrevious
useFocus
useOutsideAlerter
useScript
useWindowSize
UseIsMounted
UseDebugValue
Special Notes on Hooks
New Capabilities
Things to Avoid
Lifecycle Methods Conversion
[Supplementary Concepts]
Web Components
Custom Elements
Shadow DOM
HTML Templates
Composition vs Inheritance
Containment
Specialization
Thinking In React
Strict Mode
Code Splitting
import()
React.lazy()
Loadable Components
SyntheticEvent
SyntheticEvent Reference
Event SubTypes Reference
Performance Optimization
Production Build
Assets Bundling & Code Minification
ShouldComponentUpdate()
Windowing
Static Type Checking
PropTypes
Flow
TypeScript
Accessibility
Development Tools
Testing
Profiler
Jest with Create React App
Test Utilities
Test Renderer
React Testing Library
Mocking Modules
Timers
Snapshot Testing
Multiple Renderers
Eslint Plugin React Hooks
Plugins
React Developer Tools
React Sight
React Extension Pack (for VS Studio)
Development Environments
Bit
Storybook
React Styleguidist
React Proto
Why Did You Render
[Libraries]
JQuery
Importing JQuery
Importing JQuery Plugin – Chosen
Backbone
Embedding React in Backbone View
Using Backbone Models in Components
Extracting Data From Backbone Models
react bootstrap
Carousel
Tooltip
Button Group
Formik
Simple Form
connect()
<FieldArray>
Downshift
Combo Box
Select Box
Multiple Selection
react charts
Other React Chart Libraries
react motion
<Motion>
<StaggeredMotion>
<TransitionMotion>
Redux
<Provider>, UseSelector(), UseDispatch()
Relay
Intro to GraphQL
Installing React Relay
Basic Query
Basic Update
ReactDOMServer
.renderToString() &-.hydrate()
.renderToNodeStream()
Gatsby.js
Next.js
Image Optimization
Routing
[React Router]
Basic Routing
Basic Example
<Link>
<Switch>
<Route>
'withRouter' HOC
'match'
'matchPath'
<NavLink>
Routers
<BrowserRouter>
<HashRouter>
<MemoryRouter>
<StaticRouter>
Refreshing Or Direct Navigation
UseLocation
useParams
URL Parameters
'generatePath'
useHistory
Modal Gallery
'history' Object
useRouteMatch
Nesting
Recursive Paths
Redirects
No Match (404)
Redirects (Auth)
<Redirect>
Sidebar
Route Config
Custom Link
<Prompt>
Preventing Transitions
Server side Rendering
<StaticRouter>
[React Native]
Setting Up React Native
Setting Up Expo CLI
Publishing to App Stores
Minimizing App Size
AppRegistry
StyleSheet
Views and Text
<View>
<Text>
<TextInput>
<KeyboardAvoidingView>
<ScrollView>
Image Components
<Image>
<ImageBackground>
<Modal>
Indicator Components
<ActivityIndicator>
<RefreshControl>
<StatusBar>
Touch Control Components
<Button>
<Pressable>
<TouchableWithoutFeedback>
<TouchableHighlight>
<TouchableOpacity>
<Switch>
List Components
<FlatList>
<SectionList>
<VirtualizedList>
Information APIs
AccessibilityInfo
Appearance
AppState
DevSettings
Dimensions
PixelRatio
Platform
PlatformColor
Animation APIs
Animated
Animated.Value
Animated.ValueXY
LayoutAnimation
Easing
InteractionManager
Interaction APIs
Alert
Keyboard
Linking
PanResponder
RootRagContext
Share
Transforms
Vibration
Hooks
useColorScheme
UseWindowDimensions
Android Specifics
<DrawerLayoutAndroid>
<TouchableNativeFeedback>
BackHandler
PermissionsAndroid
ToastAndroid
Systrace
iOS Specifics
<InputAccessoryView>
<SafeAreaView>
ActionSheetIOS
DynamicColorIOS
Settings
Earn a fixed interest of 16% annually by holding USDT. Join us to claim your USD25 bitcoin now!
Let experts and bots trade cryptos for you. Claim USD25 now!
MENU
useContext
Similarly, there is a hook for context for use in functional components.