Component Basics
import React
Import React library
function Component()
Functional component
class Component
Class component
export default
Export component
props
Component properties
props.children
Nested content
defaultProps
Default props
PropTypes
Prop type checking
JSX Syntax
// Basic JSX
const element = <h1>Hello</h1>;
// With expressions
const element = <h1>{name}</h1>;
// With attributes
const element = <img src={user.avatarUrl} alt={user.name} />;
const element = <h1>Hello</h1>;
// With expressions
const element = <h1>{name}</h1>;
// With attributes
const element = <img src={user.avatarUrl} alt={user.name} />;
className
CSS class (not class)
htmlFor
Label for (not for)
{expression}
JavaScript expression
{/* comment */}
JSX comment
Fragment
Wrap multiple elements
State & Props
useState
State hook
this.state
Class component state
this.setState()
Update class state
props
Read-only data
destructuring
Extract props/state
prop drilling
Passing props down
Context API
Avoid prop drilling
React Hooks
const [state, setState] = useState('initial');
useState
State management
useEffect
Side effects
useContext
Context consumption
useReducer
Complex state logic
useCallback
Memoized callback
useMemo
Memoized value
useRef
DOM reference
useLayoutEffect
Sync effect
Lifecycle Methods
constructor
→
render
→
componentDidMount
componentDidUpdate
↻
componentWillUnmount
constructor()
Initialize state
render()
Return JSX
componentDidMount()
After render
componentDidUpdate()
After update
componentWillUnmount()
Before unmount
shouldComponentUpdate()
Optimize re-renders
Event Handling
// Event handler
const handleClick = () => {
console.log('Clicked');
};
// In JSX
<button onClick={handleClick}>
Click me
</button>;
const handleClick = () => {
console.log('Clicked');
};
// In JSX
<button onClick={handleClick}>
Click me
</button>;
onClick
Click event
onChange
Input change
onSubmit
Form submit
e.preventDefault()
Stop default action
e.target.value
Input value
Conditional Rendering
// Ternary operator
{isLoggedIn ? <Dashboard /> : <Login />}
// Logical AND
{showError && <ErrorMessage />}
// If statement
if (isLoading) {
return <Loader />;
}
{isLoggedIn ? <Dashboard /> : <Login />}
// Logical AND
{showError && <ErrorMessage />}
// If statement
if (isLoading) {
return <Loader />;
}
condition ? true : false
Ternary operator
condition && Component
Logical AND
if/else statements
Early returns
switch statements
Multiple conditions
Lists & Keys
const items = data.map(item => (
<li key={item.id}>
{item.name}
</li>
));
<li key={item.id}>
{item.name}
</li>
));
.map()
Transform array
key prop
Unique identifier
index as key
Last resort
filter()
Filter array
reduce()
Reduce array
React Router
BrowserRouter
Router wrapper
Routes
Route container
Route
Single route
path
URL path
element
Component to render
Link
Navigation link
useParams
URL parameters
useNavigate
Programmatic navigation
Performance
React.memo()
Memoize component
useMemo()
Memoize value
useCallback()
Memoize function
lazy loading
Code splitting
Suspense
Loading fallback
shouldComponentUpdate
Prevent re-renders
PureComponent
Shallow compare
Development Tools
React DevTools
Browser extension
create-react-app
Project setup
Next.js
React framework
Vite
Fast build tool
TypeScript
Type safety
ESLint
Code linting
Prettier
Code formatting
What is CodeSikhoWithAJ?
CodeSikhoWithAJ is a coding education platform dedicated to teaching programming skills to everyone who wants to learn. Our mission is to make coding accessible and help people start their journey in the tech industry.
Founded by Ajeet Yadav, CodeSikhoWithAJ provides comprehensive tutorials, practical examples, and hands-on projects to help you master web development and other programming skills.
Trusted by developers at:
Google
Microsoft
Facebook
Amazon
Netflix
Twitter