Web Coding Center
REACT
[Getting Started]
Getting Started
Adding React directly in HTML
Create React App
Other Toolchains
About JSX
Online Editors
[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 with useCallback
Callback Ref
useMemo
Memoizing a Value
Difference with useCallback()
Running on Every Render
Avoiding Unnecessary Renders with useMemo
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
useTransition
The Standalone startTransition
useDeferredValue
Deferring the Initial Render
useId
useSyncExternalStore
Subscribing to a Backbone Model
use
useActionState
Combining with useOptimistic
useOptimistic
useFormStatus
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
Portals
Inserting into a Different DOM Node
Event Bubbling Through Portals
Other APIs
React.X
component.forceUpdate(callback)
ReactDOM.X
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>
<Routes>
<Route>
From 'withRouter' to Hooks
'match'
'matchPath'
<NavLink>
Routers
<BrowserRouter>
<HashRouter>
<MemoryRouter>
<StaticRouter>
Refreshing Or Direct Navigation
UseLocation
useParams
URL Parameters
'generatePath'
useNavigate
Modal Gallery
Programmatic Navigation
useMatch
Nesting
Recursive Paths
Redirects
No Match (404)
Redirects (Auth)
<Navigate>
Sidebar
Route Config
Custom Link
useBlocker
Preventing Transitions
[Data APIs]
Loaders and Actions
useLoaderData
useActionData
useNavigation
useRevalidator
useFetcher
useSubmit
useRouteError
useAsyncValue
useOutletContext
Server side Rendering
Setting Status Codes with StaticRouter
Get a high-paying job and work remotely from home now!
Earn a fixed interest of 23% annually by holding USDT. Join us to claim your USD500 now!
Battle against intelligent animals! Prove or improve your knowledge!
MENU
react motion
react-motion helps you create animations. To install it:
Installing react-motion via npm
npm install react-motion