React Introduction For Newbie

React, also known as React.js or ReactJS, is an open-source JavaScript library developed by Facebook. It is primarily used for building user interfaces (UIs) for web applications. React follows the component-based architecture, where UIs are broken down into reusable components that manage their own state and can be composed to build complex UIs.

CSR (Client-Side Rendering) is a rendering approach where the web browser loads a minimal HTML file and JavaScript bundle from the server. The JavaScript code then takes over the rendering process on the client-side. React is commonly used for CSR, and here’s how it accomplishes it:

Component-based structure : React applications are organized into reusable components. Each component encapsulates its own logic, state, and rendering. Components can be composed and nested to create complex UI structures.

Virtual DOM: React introduces the concept of a Virtual DOM, which is an in-memory representation of the actual browser DOM. When a component’s state changes, React efficiently calculates the difference between the previous and new Virtual DOM representations, known as the “diffing” process.

Reconciliation and efficient updates : React’s reconciliation algorithm uses the Virtual DOM diffing process to determine the minimal set of changes required to update the actual browser DOM. This approach significantly improves performance by avoiding unnecessary re-renders of unchanged components.

React rendering : React provides the `ReactDOM` library, which bridges the gap between React components and the actual browser DOM. It renders the Virtual DOM representation into the browser DOM, updating only the necessary parts of the UI based on the component changes.

Event handling and state management : React provides a declarative approach to handle user interactions and manage component state. Event handlers and state updates trigger re-renders of the affected components, ensuring that the UI stays in sync with the application’s state.

JavaScript bundle: React applications are typically bundled using tools like webpack or Parcel. These tools package all the JavaScript code, including React components and dependencies, into a single bundle that can be loaded by the browser. This bundle contains the logic necessary for rendering and updating the UI on the client-side.

When the React application is loaded in the browser, the JavaScript bundle is executed, and the React components are rendered into the browser DOM. From that point on, React takes care of efficiently updating the UI in response to user interactions or changes in component state.

Overall, React’s component-based architecture, Virtual DOM, reconciliation algorithm, and efficient updates enable it to handle client-side rendering effectively, providing a smooth and interactive user experience in web applications.

Let’s go through the different directories and files in this structure:

public/: This directory contains static files that are publicly accessible, such as the HTML file (index.html) that serves as the entry point for your React application.

src/: This is the main directory where your React application’s source code resides.

assets/: This directory contains any static assets used in your application, such as images or stylesheets.

components/: This directory is for reusable components that can be used across multiple pages or sections of your application.

pages/: This directory contains components that represent individual pages or views of your application. Each page typically has its own folder containing the page component and any related styles or assets.

services/: This directory is for services or utility files that interact with external APIs or provide other functionality to your application.

utils/: This directory contains utility functions or helper files that can be used throughout your application.

App.js: This is the main component that serves as the entry point for your application. It typically contains the routing logic and high-level structure of your app.

index.js: This file is responsible for rendering the root component (App.js) and mounting it to the HTML file in the public/ directory.

index.css: This file contains global styles that apply to your entire application.

.gitignore: This file specifies files and directories that should be ignored by version control systems like Git.

package.json and package-lock.json: These files contain information about your project’s dependencies, scripts, and other metadata.

README.md: This file typically includes information about your project, how to set it up, and any other relevant documentation.

Here are a few commonly used React hooks:

useState: useState is used to add state to functional components. It returns a stateful value and a function to update that value.

useEffect: useEffect is used to handle side effects in functional components. It allows you to perform actions like data fetching, subscriptions, or manual DOM manipulations after the component has rendered.

useContext: useContext is used to access the value of a context in a functional component. It allows you to consume and update context values without nesting multiple components.

useRef: useRef returns a mutable ref object that persists across component renders. It can be used to access DOM elements, store mutable values, or create references to other values that persist between renders.

useCallback: useCallback returns a memoized version of the callback function that only changes if one of the dependencies has changed. It is typically used to optimize performance by preventing unnecessary re-rendering of child components.

useMemo: useMemo returns a memoized value that only recomputes when one of the dependencies has changed. It is useful for optimizing expensive computations or complex calculations.

State and Props :

state and props are two important concepts that are used to manage data and functionality within a component

State: State refers to the data that a component manages and updates itself. It is stored in the component’s state object and can change over time as the component’s props or internal logic change.

Props: Props are read-only, immutable data that are passed from a parent component to a child component. They are used to convey information from one component to another and cannot be changed by the child component.

Example :

Github : https://github.com/wahyueko22/learn-react/tree/master/my-layout