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

Blog