Getting Started
Setup React
// Using Create React App (recommended for beginners)
npx create-react-app my-app
cd my-app
npm start
// Using Vite (faster alternative)
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
// Manual setup with CDN (not recommended for production)
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
npx create-react-app my-app
cd my-app
npm start
// Using Vite (faster alternative)
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
// Manual setup with CDN (not recommended for production)
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
Note: Create React App is the official way to create single-page React applications. It offers a modern build setup with no configuration.
Basic Component
// Functional Component (modern approach)
import React from 'react';
function Welcome({ name }) {
return <h1>Hello, {name}!</h1>;
}
// Arrow function component
const Welcome = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
// Exporting the component
export default Welcome;
// Using the component
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
import React from 'react';
function Welcome({ name }) {
return <h1>Hello, {name}!</h1>;
}
// Arrow function component
const Welcome = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
// Exporting the component
export default Welcome;
// Using the component
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
JSX Syntax
JSX Basics
// JSX is JavaScript XML - syntax extension for JavaScript
const element = <h1>Hello, world!</h1>;
// Embedding expressions in JSX
const name = 'Josh Perez';
const element = <h1>Hello, {name}!</h1>;
// JSX is an expression too
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
// Specifying attributes with JSX
const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;
// JSX prevents injection attacks
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;
const element = <h1>Hello, world!</h1>;
// Embedding expressions in JSX
const name = 'Josh Perez';
const element = <h1>Hello, {name}!</h1>;
// JSX is an expression too
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
// Specifying attributes with JSX
const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;
// JSX prevents injection attacks
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;
Note: JSX gets compiled to React.createElement() calls which return plain JavaScript objects called "React elements".
JSX Advanced
// Specifying children with JSX
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
// JSX represents objects
// This JSX:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// Gets compiled to this:
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
// Which creates an element object like:
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
// Using JavaScript expressions in JSX
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
// JSX represents objects
// This JSX:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// Gets compiled to this:
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
// Which creates an element object like:
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
// Using JavaScript expressions in JSX
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
Components & Props
Functional Components
// Simple functional component
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// Arrow function component
const Welcome = (props) => {
return <h1>Hello, {props.name}!</h1>;
};
// Implicit return (for simple components)
const Welcome = (props) => <h1>Hello, {props.name}!</h1>;
// Destructuring props
const Welcome = ({ name, age }) => {
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old</p>
</div>
);
};
// Default props
Welcome.defaultProps = {
name: 'Guest',
age: 0
};
// PropTypes (for type checking)
import PropTypes from 'prop-types';
Welcome.propTypes = {
name: PropTypes.string,
age: PropTypes.number
};
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// Arrow function component
const Welcome = (props) => {
return <h1>Hello, {props.name}!</h1>;
};
// Implicit return (for simple components)
const Welcome = (props) => <h1>Hello, {props.name}!</h1>;
// Destructuring props
const Welcome = ({ name, age }) => {
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old</p>
</div>
);
};
// Default props
Welcome.defaultProps = {
name: 'Guest',
age: 0
};
// PropTypes (for type checking)
import PropTypes from 'prop-types';
Welcome.propTypes = {
name: PropTypes.string,
age: PropTypes.number
};
Class Components
// Class component (legacy approach, still supported)
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
// Class component with state
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={this.increment}>
Click me
</button>
</div>
);
}
}
// Class component lifecycle methods
class Example extends Component {
componentDidMount() {
// Runs after the component output has been rendered to the DOM
console.log('Component mounted');
}
componentDidUpdate(prevProps, prevState) {
// Runs after component updates
console.log('Component updated');
}
componentWillUnmount() {
// Runs before component is removed from the DOM
console.log('Component will unmount');
}
render() {
return <div>Example Component</div>;
}
}
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
// Class component with state
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={this.increment}>
Click me
</button>
</div>
);
}
}
// Class component lifecycle methods
class Example extends Component {
componentDidMount() {
// Runs after the component output has been rendered to the DOM
console.log('Component mounted');
}
componentDidUpdate(prevProps, prevState) {
// Runs after component updates
console.log('Component updated');
}
componentWillUnmount() {
// Runs before component is removed from the DOM
console.log('Component will unmount');
}
render() {
return <div>Example Component</div>;
}
}
Note: Functional components with hooks are now the preferred way to write React components. Class components are still supported but not recommended for new code.
Hooks
useState & useEffect
// useState Hook - managing state in functional components
import React, { useState } from 'react';
function Counter() {
// Declare a state variable called "count" with initial value 0
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
// useEffect Hook - handling side effects
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
// useEffect with cleanup (similar to componentWillUnmount)
useEffect(() => {
const subscription = props.source.subscribe();
// Cleanup function
return () => {
subscription.unsubscribe();
};
}, [props.source]); // Only re-run if props.source changes
import React, { useState } from 'react';
function Counter() {
// Declare a state variable called "count" with initial value 0
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
// useEffect Hook - handling side effects
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
// useEffect with cleanup (similar to componentWillUnmount)
useEffect(() => {
const subscription = props.source.subscribe();
// Cleanup function
return () => {
subscription.unsubscribe();
};
}, [props.source]); // Only re-run if props.source changes
Additional Hooks
// useContext Hook - accessing context
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button className={theme}>I am styled by theme!</button>;
}
// useReducer Hook - alternative to useState for complex state logic
import React, { useReducer } from 'react';
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}
// useRef Hook - accessing DOM elements or storing mutable values
import React, { useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button className={theme}>I am styled by theme!</button>;
}
// useReducer Hook - alternative to useState for complex state logic
import React, { useReducer } from 'react';
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}
// useRef Hook - accessing DOM elements or storing mutable values
import React, { useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
Event Handling
Handling Events
// Handling events in React
function ActionLink() {
const handleClick = (e) => {
e.preventDefault();
console.log('The link was clicked.');
};
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
// Binding methods in class components
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
// Alternative to binding: Class fields syntax (experimental)
class LoggingButton extends React.Component {
// This syntax ensures `this` is bound within handleClick
handleClick = () => {
console.log('this is:', this);
};
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
// Passing arguments to event handlers
const A = 'A';
const B = 'B';
function ActionLink() {
const handleClick = (id, e) => {
e.preventDefault();
console.log('Link ' + id + ' was clicked.');
};
return (
<>
<a href="#" onClick={(e) => handleClick(A, e)}>
Link A
</a>
<a href="#" onClick={(e) => handleClick(B, e)}>
Link B
</a>
</>
);
}
function ActionLink() {
const handleClick = (e) => {
e.preventDefault();
console.log('The link was clicked.');
};
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
// Binding methods in class components
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
// Alternative to binding: Class fields syntax (experimental)
class LoggingButton extends React.Component {
// This syntax ensures `this` is bound within handleClick
handleClick = () => {
console.log('this is:', this);
};
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
// Passing arguments to event handlers
const A = 'A';
const B = 'B';
function ActionLink() {
const handleClick = (id, e) => {
e.preventDefault();
console.log('Link ' + id + ' was clicked.');
};
return (
<>
<a href="#" onClick={(e) => handleClick(A, e)}>
Link A
</a>
<a href="#" onClick={(e) => handleClick(B, e)}>
Link B
</a>
</>
);
}
Conditional Rendering
Conditional Rendering Techniques
// Element variables - store JSX elements in variables
function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}
function LoginControl() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const handleLoginClick = () => setIsLoggedIn(true);
const handleLogoutClick = () => setIsLoggedIn(false);
let button;
if (isLoggedIn) {
button = <LogoutButton onClick={handleLogoutClick} />;
} else {
button = <LoginButton onClick={handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
// Inline If with Logical && Operator
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
// Inline If-Else with Conditional Operator
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
return (
<div>
{isLoggedIn
? <UserGreeting />
: <GuestGreeting />
}
</div>
);
}
// Preventing Component from Rendering
function WarningBanner(props) {
if (!props.warn) {
return null; // Return null to prevent rendering
}
return (
<div className="warning">
Warning!
</div>
);
}
function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}
function LoginControl() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const handleLoginClick = () => setIsLoggedIn(true);
const handleLogoutClick = () => setIsLoggedIn(false);
let button;
if (isLoggedIn) {
button = <LogoutButton onClick={handleLogoutClick} />;
} else {
button = <LoginButton onClick={handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
// Inline If with Logical && Operator
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
// Inline If-Else with Conditional Operator
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
return (
<div>
{isLoggedIn
? <UserGreeting />
: <GuestGreeting />
}
</div>
);
}
// Preventing Component from Rendering
function WarningBanner(props) {
if (!props.warn) {
return null; // Return null to prevent rendering
}
return (
<div className="warning">
Warning!
</div>
);
}
Lists & Keys
Rendering Lists
// Rendering multiple components
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
function NumberList() {
return <ul>{listItems}</ul>;
}
// Keys help React identify which items have changed
function Blog(props) {
const sidebar = (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
const content = props.posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{sidebar}
<hr />
{content}
</div>
);
}
const posts = [
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
// Using the Blog component
function App() {
return <Blog posts={posts} />;
}
// Keys only need to be unique among siblings
function ListItem(props) {
// Correct! There is no need to specify the key here:
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Correct! Key should be specified inside the array.
<ListItem key={number.toString()} value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
function NumberList() {
return <ul>{listItems}</ul>;
}
// Keys help React identify which items have changed
function Blog(props) {
const sidebar = (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
const content = props.posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{sidebar}
<hr />
{content}
</div>
);
}
const posts = [
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
// Using the Blog component
function App() {
return <Blog posts={posts} />;
}
// Keys only need to be unique among siblings
function ListItem(props) {
// Correct! There is no need to specify the key here:
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Correct! Key should be specified inside the array.
<ListItem key={number.toString()} value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
Forms
Controlled Components
// Controlled Components - form elements controlled by React state
function NameForm() {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
const handleSubmit = (event) => {
alert('A name was submitted: ' + value);
event.preventDefault();
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" value={value} onChange={handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
// The textarea Tag
function EssayForm() {
const [value, setValue] = useState('Please write an essay about your favorite DOM element.');
const handleChange = (event) => {
setValue(event.target.value);
};
const handleSubmit = (event) => {
alert('An essay was submitted: ' + value);
event.preventDefault();
};
return (
<form onSubmit={handleSubmit}>
<label>
Essay:
<textarea value={value} onChange={handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
// The select Tag
function FlavorForm() {
const [value, setValue] = useState('coconut');
const handleChange = (event) => {
setValue(event.target.value);
};
const handleSubmit = (event) => {
alert('Your favorite flavor is: ' + value);
event.preventDefault();
};
return (
<form onSubmit={handleSubmit}>
<label>
Pick your favorite flavor:
<select value={value} onChange={handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
// Handling Multiple Inputs
function Reservation() {
const [state, setState] = useState({
isGoing: true,
numberOfGuests: 2
});
const handleInputChange = (event) => {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
setState({
...state,
[name]: value
});
};
return (
<form>
<label>
Is going:
<input
name="isGoing"
type="checkbox"
checked={state.isGoing}
onChange={handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input
name="numberOfGuests"
type="number"
value={state.numberOfGuests}
onChange={handleInputChange} />
</label>
</form>
);
}
function NameForm() {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
const handleSubmit = (event) => {
alert('A name was submitted: ' + value);
event.preventDefault();
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" value={value} onChange={handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
// The textarea Tag
function EssayForm() {
const [value, setValue] = useState('Please write an essay about your favorite DOM element.');
const handleChange = (event) => {
setValue(event.target.value);
};
const handleSubmit = (event) => {
alert('An essay was submitted: ' + value);
event.preventDefault();
};
return (
<form onSubmit={handleSubmit}>
<label>
Essay:
<textarea value={value} onChange={handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
// The select Tag
function FlavorForm() {
const [value, setValue] = useState('coconut');
const handleChange = (event) => {
setValue(event.target.value);
};
const handleSubmit = (event) => {
alert('Your favorite flavor is: ' + value);
event.preventDefault();
};
return (
<form onSubmit={handleSubmit}>
<label>
Pick your favorite flavor:
<select value={value} onChange={handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
// Handling Multiple Inputs
function Reservation() {
const [state, setState] = useState({
isGoing: true,
numberOfGuests: 2
});
const handleInputChange = (event) => {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
setState({
...state,
[name]: value
});
};
return (
<form>
<label>
Is going:
<input
name="isGoing"
type="checkbox"
checked={state.isGoing}
onChange={handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input
name="numberOfGuests"
type="number"
value={state.numberOfGuests}
onChange={handleInputChange} />
</label>
</form>
);
}
Further Learning
Best Practices
- Keep components small and focused on a single responsibility
- Use functional components and hooks instead of class components
- Use descriptive component and variable names
- Lift state up to the closest common ancestor when needed
- Use keys properly when rendering lists
- Use controlled components for form inputs
Comprehensive React.js Frontend Cheatsheet Reference
This React.js Frontend cheatsheet on Nikhil Learn Hub collects syntax, commands, and practical snippets for quick revision. Learn React.js components, hooks, state management, JSX, and frontend development concepts with practical examples.
Use the reference cards and examples above during coding sessions; return here instead of scattered searches when you need dependable reminders. Follow the React learning roadmap when you want structured lessons beyond one-page lookups.
Quick lookup coverage
- Syntax, commands, and API signatures
- Copy-ready examples and common patterns
- Terminology for coursework and interviews
- Cross-links to the matching learning roadmap
How to study with this sheet
- Production debugging and tuning reminders
- Security, performance, or scale cautions
- Integration with adjacent stacks on this site
- Deeper study through tutorials and roadmaps
Who Should Use This Cheatsheet
Students, self-taught developers, and professionals who need fast React.js Frontend lookups during labs, debugging, or interview revision should keep this page bookmarked.
Related Resources on Nikhil Learn Hub
- React learning roadmapstructured learning path for the same technology
- Cheatsheets hubbrowse all quick-reference sheets
- Technology hubtutorials, roadmaps, and practice hubs