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