React, developed by Facebook, has transformed web development with its component-based architecture and efficient rendering. However, mastering React requires a solid grasp of its core concepts.
In this comprehensive article, we'll explore all the essential aspects of React. Whether you're a beginner or an experienced developer, this guide covers everything from components and state management to hooks and lifecycle methods.
By the end, you'll have a thorough understanding of React's ecosystem and be ready to build sophisticated, maintainable applications.
Components
A function that returns markup (JSX). Kind of like legos, basic building blocks of a react app.
function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3As.jpg"
alt="Katherine Johnson"
/>
);
}
export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}
Curly braces
Allows react to be dynamic by allowing values to pass through it.
<img
className="avatar"
src={avatar}
alt={description}
/>
Fragments
An empty component is usually used as a parent container to return multiple components simultaneously.
<>
<ChildComponent />
</>
Props
The parameters passed through containers. Anything can be a prop including other components (as children, known as composition).
A 'key' in props (similar to the primary key in SQL) is used to identify a component. Usually, it is the current index.
// Writing a function that supports props
function Avatar({ person, size }) {
return (
<img
className="avatar"
src={getImageUrl(person)}
alt={person.name}
width={size}
height={size}
/>
);
}
// Using props with the component
return (
<Avatar
person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
size={100}
/>
);
Rendering
Works by using a virtual DOM (VDOM). how does it work:
- State changed? update VDOM to reflect changes
- 'Diff'ing is performed: Check for changes between DOM and VDOM.
- 'Reconciliation' with the DOM is performed.
Event Handling
Handles different events like onClick(), onChange(), and onSubmit().
State
A snapshot of the app at any given point. We use special functions like useState and useReducer.
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Controlled Components
Components used by a state to have a more predictable behaviour.
const [value, setValue] = useState('')
We change the state to change the behaviour.
Hooks
It allows us to hook into features like state within function components. There are 5 types of hooks:
- State Hooks- useState, useReducer, to manage state
- Context Hooks- useContext, use data through context
- Ref Hooks- useRef, to reference HTML
- Effect Hooks- useEffect, Lets you connect to external systems and APIs.
- Performance Hooks- useMemo, useCallback, Boosts performance.
Purity
Describes how react components should work (Like the one in Functional Programming). It follows two rules:
- Only return JSX
- Don't change stuff that existed before rendering
Strict Mode
A component that detects problems during app development. Here's how to use it:
<StrictMode>
<App />
</StrictMode>
Effects
Code that reaches outside the react application (like an API). Best done using event handlers or useEffect.
function ChatRoom({ roomId }) {
const [serverUrl, setServerUrl] = useState('https://localhost:1234');
useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.connect();
return () => {
connection.disconnect();
};
}, [serverUrl, roomId]);
// ...
}
Refs
Used to reference an element on DOM. Useful for tasks like focusing on an element.
export default function Counter() {
let ref = useRef(0);
function handleClick() {
ref.current = ref.current + 1;
alert('You clicked ' + ref.current + ' times!');
}
return (
<button onClick={handleClick}>
Click me!
</button>
);
}
Context
Passing data without sending as props.
function Button() {
const theme = useContext(ThemeContext);
return <button className={theme} />;
}
Portals
Context for components. Ideal for modals, dropdowns and tooltips.
<div>
<p>This child is placed in the parent div.</p>
{createPortal(
<p>This child is placed in the document body.</p>,
document.body
)}
</div>
Suspense
Component to wait for something to load/occur. Provides a fallback UX till the other component is fetched/rendered.
<Suspense fallback={<Loading />}>
<SomeComponent />
</Suspense>
Error Boundaries
Component to show a fallback component should that app encounter an error (like a 404 page).
export function MessageContainer({ messagePromise }) {
return (
<ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
<Suspense fallback={<p>⌛Downloading message...</p>}>
<Message messagePromise={messagePromise} />
</Suspense>
</ErrorBoundary>
);
}
function Message({ messagePromise }) {
const content = use(messagePromise);
return <p>Here is the message: {content}</p>;
}
References:
React Dev
Top comments (0)