Please enable JavaScript.
Coggle requires JavaScript to display documents.
React To create reusable slice of UIs that manage their own local…
React
To create reusable slice of UIs
that manage their own local state
Concepts
Components
Lifecycle
Updating Phase
Unmounting Phase
Mounting Phase
Types of
Components
Classes
Functions
Hooks
useContext
useReducer
useEffect
useCallback
useMemo
useMemo
useState
useRef
useLayoutEffect
Props
State
Picture of the app in any given time
Local and Encapsulated
Render
Changing State
Initialization
DOM Vs VDOM
VDOM
Reconsiliation
DOM
JSX
Folder
Structure
package-lock.json
public
package.json
node_modules
src
gitignore
CSS
Element<Class<ID
CSS Syntax
Selector
Types of
Selectors
Class Selector
Pseudo-class Selector
Element Selector
Descendant Selector
ID Selector
Selector
Combinations
Combine selectors in same element to specify more
To select the ancestor child
Combining different selectors
Everything Selector
Value
Property
Linking CSS
to REACT
External CSS Files
Inline Styles
CSS in JS Libraries
UI Libraries
Material UI
Features
Easy theming and customization
Accessible design
Active community and support
Comprehensive set of components
Key-Features
Material Design?
Component Library
Responsive
Theming
Accessibility
Material UI, Chakra UI, Fluent UI, Onsen UI
Why using UI libraries
Formatting
Colors
RGB
HSL
Hexadecimal
Box Model
Padding
Spacing between your content and the boarder
Boarder
Hight and Width
In here we have the actual content
Margin
Space outside the boarder which create space between elements
Sizes
Precentatge
Percentage of the width/ Hight of the screen
Pixels
Positioning
static (default)
relative
absolute
fixed
sticky
Event Handlers
Keyboard Event
onKeyDown
when a key is pressed down
onKeyPress
When a key is pressed
onKeyUp
When a key is released
Form Event
onSubmit
When a form is submitted
onFocus
When an element receives focus
onBlur
When an element loses focus
onInput
When an input element receives user input
onChange
When the value of an input select or text area is changed
onReset
When a form is reset
Mouse Events
onClick
When an element is clicked
onDoubleClick
When and element is double clicked
onMouseDown
When mouse button pressed down over an element
onMouseMove
When mouse is moved over an element
onMouseOver
When mouse enters an element
onMouseOut
When mouse leaves an element
onMouseUp
When mouse button is released over an element
JS used in
React
Variable
Names
Let
Var
Const
Arrow Function
Ternary Operators
Dynamic Styling
Global styling and Theming
