All of Reacts concepts- one article

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