All of Reacts concepts- one article
Tags: react, beginners, tutorial, webdev
Published: 2024-06-30 09:30:36

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. 

![Image courtesy of Telerik.com, Describes rendering in react](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4d96xj2l0pkl10782b6.png)



## Event Handling
Handles different events like onClick(), onChange(), and onSubmit().



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kclgvvmfeo5c2ewuo2w.png)

## 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.
 

![Types of hooks in react](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5f4nmizzu7ayokgraizi.png)

## 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} />;
}
```

![Image courtesy of Shamalka Vanod (medium)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lff4uxzt650idixjt94h.png)


## 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](https://react.dev/)