React Fragments

React Fragments enables the bundling of multiple child elements without the need for additional nodes in the DOM.

For this purpose use <React.Fragment> or its shorthand syntax <> ... </>

Syntax 1:

import React from 'react'; function MyComponent() { return ( <React.Fragment> <div>Child A</div> <div>Child B</div> </React.Fragment> ); } export default MyComponent;

Syntax 2

import React from 'react'; function MyComponent() { // Or using shorthand syntax return ( <> <div>Child A</div> <div>Child B</div> </> ); } export default MyComponent;

In above example, MyComponent returns two <div> elements wrapped in a React.Fragment.

The grouping does not add an extra layer to the DOM.

It keeps the structure clean and efficient.

Fragments can accept keys, which is useful when mapping a collection to an array of elements, making them quite handy.

Context API in React

• The Context API in React is a way for components to effectively produce and use data at different levels of the component tree without needing to explicitly pass props down through every level.
• It is useful for sharing data that is 'global' for a tree of React components, such as authenticated user information, theme settings, or language preferences.
• Without Context API we have to pass data through the component tree by passing props down manually at each level, which could be cumbersome and inefficient for certain types of global data.
• The Context API makes the code cleaner and more maintainable.

How to use Context API

• 1-Create a Context:
  Creating context is done by using React.createContext(), which returns a Context object.
  The defaultValue argument is only used when a component does not have a matching Provider above it in the tree.
const MyContext = React.createContext(defaultValue);
• 2-Provide a Context Value: Use a Provider component that comes from the created Context object to wrap the part of your component tree that needs access to the context data. Any component within this tree can access the context value.
<MyContext.Provider value={/* some value */}> {/* component tree */} </MyContext.Provider>
• 3-Use or consume the Context Value:
  Components use the data can access it in two primary ways:
  A) Context.Consumer Component: This is a React component that subscribes to context changes.
  It requires a function as a child, which receives the current context value and returns a React node.

Syntax:

<MyContext.Consumer> {value => /* render something based on the context value */} </MyContext.Consumer>

B) useContext Hook:

This is a simpler and modern way to consume or use context
It is available in functional components.
It takes the context object itself as an argument and returns the current context value.

Syntax:

import React, { useContext } from 'react'; function MyFunctionalComponent() { const value = useContext(MyContext); return /* render something based on the context value */; }

The Context API in React is a tool for:
handling global state
and transmitting data across the component hierarchy.
Nevertheless, it doesn't used for all scenarios of state management.

In React, boundaries refer to defining a separation or limits between different parts of your application's UI or logic.

Creating boundaries improve code organization, maintainability, and scalability.

Several types of boundaries in React include:

1. Component Boundaries:

Functional or component separation or decomposition: Break down the UI into smaller, reusable components(function) that each have a single responsibility.
This promotes code reuse and makes components easier to understand and maintain.
This is the most common type of boundary.

Container Components vs. Presentational Components:




Container components are responsible for data fetching and state management.
Presentational components do focus on rendering UI.
This maintains a clear separation of data and presentation logic.

---

---

2. State boundaries:

Local Component State:
Use local state within components for managing UI-specific state that doesn't need to be shared with other components.

Use global State Management with the use of state management libraries like Redux, Context API, or Recoil for managing global application state that can be accessed across multiple components.
This centralizes state logic and avoid using prop.

---

3. Code Splitting boundaries

Dynamic Imports: Employ dynamic import() to partition your code into smaller units that are fetched as needed.
This approach enhances the initial page loading speed by only loading the code essential for the present view.

React.lazy() and Suspense:
React.lazy() and Suspense are two features in React used to do code splitting and improving the performance of your application by loading components asynchronously .


React.lazy():

React.lazy() is a function that dynamically import a React component(loads only components that are needed to load th app).
It significantly improve the initial loading time of the application(especially for large applications that has lots of components).

Syntax:

const MyComponent = React.lazy(() => import('./MyComponent'));

Think we have a component named MyComponent that you want to import lazily:

Example:

// MyComponent.js import React from 'react'; const MyComponent = () => { return <div>This is my lazy-loaded component!</div>; }; export default MyComponent;

Import it lazily in another component as follows:

import React, { Suspense } from 'react'; const LazyLoadedComponent = React.lazy(() => import('./MyComponent')); const MyParentComponent = () => { return ( <div> <Suspense fallback={<div>Loading...</div>}> <LazyLoadedComponent /> </Suspense> </div> ); }; export default MyParentComponent;

---

Suspense:

Suspense is a React component that specify loading indicators while waiting for some asynchronous code to resolve(like lazy loading of components).
It is managing the loading state of the application and displaying a fallback UI until the required data or components are loaded.

Syntax:

<Suspense fallback={<LoadingIndicator />}> {/* Components or code that may suspend */} </Suspense>

Note:

In the example above, we see Suspense wraps the lazy-loaded component <LazyLoadedComponent >.
The fallback prop specifies what should be rendered while the component is loading. /p>

Example:

import React, { Suspense } from 'react'; const LazyLoadedComponent = React.lazy(() => import('./MyComponent')); const MyParentComponent = () => { return ( <div> <Suspense fallback={<div>Loading...</div>}> <LazyLoadedComponent /> </Suspense> </div> ); }; export default MyParentComponent;

Note:

While the LazyLoadedComponent is being fetched and loaded asynchronously, We see a loading indicator instead of a blank screen, providing a better user experience.

---

4. ErrorBoundary Component

Error Boundaries: Use error boundaries to handle errors (catch JavaScript errors) that occur in your application.
It prevents the application from crashing when an unexpected error occurs.

Error boundaries in React catch JavaScript errors occurring in their child component tree.

Instead of letting these errors disrupt the user experience, error boundaries log them and display a backup UI.


It is essential to use them for maintaining a smooth interface despite errors.

These boundaries capture errors during rendering, lifecycle methods, and constructors of all components below them.

---

---

5. Context Boundaries:

Context Providers:
Use Context API to pass data or functions down through the component tree without manually passing props at each level. Use or define context providers at appropriate boundaries to encapsulate related state or behavior.

---

6. Server-Side Boundaries:

API Endpoints:
Create or define clear boundaries between client-side and server-side logic.

Use API endpoints to communicate between the frontend and backend parts of your application, ensuring separation of concerns and security.

---

Establishing boundaries in React application make the codes cleaner, more maintainable and a better development experience.
It facilitates collaboration among team members and promotes code reuse and scalability.

1. Higher-Order Components (HOCs)is an extension of existing components' functionality.
2. HOCs function as wrappers accept a component as input and yield a new component with supplementary props or behavior.
3. HOC is an advanced technique in React for reusing component logic.
4. They are functions that take a component and return a new component(They enhance the original component with additional properties or functionality.
5. We use HOC when we want ot share same functionality for many components
6. It makes the code cleaner and maintainable(not use repeated code for many Components).
7. We can a HOC to modify or add new props to a component before it is rendered.
8. Wrap the component at the export stage or in the export statement.
9. HOC modifies props before passing them to a component.
10. HOC manages state or access lifecycle methods in a reusable way.
11. HOC conditionally renders components based on certain criteria like user permissions.

Syntax:

//Basic Syntax const withHOC = (WrappedComponent) => { return class extends React.Component { render() { return <WrappedComponent {...this.props} />; } }; };

Example 1:

function withExtraInfo(WrappedComponent) { return function(props) { return <WrappedComponent {...props} extraInfo="This is some extra info!" />; }; }

Example 2: Data Fetching

function withData(WrappedComponent, selectData) { return class extends React.Component { constructor(props) { super(props); this.state = { data: null, }; } componentDidMount() { fetchData().then(data => this.setState({ data: selectData(data) })); } render() { return <WrappedComponent {...this.props} data={this.state.data} />; } } }

Example 3: Loading Spinner

function withLoading(Component) { return function WithLoadingComponent({ isLoading, ...props }) { if (!isLoading) return <Component {...props} />; return <p>Loading...</p>; }; }

Example 4: Error Handling

function withErrorHandling(WrappedComponent) { return class extends React.Component { state = { error: null }; componentDidCatch(error) { this.setState({ error }); } render() { const { error } = this.state; if (error) { return <p>An error occurred: {error.message}</p>; } return <WrappedComponent {...this.props} />; } }; }

Example 5: Authentication

function withAuthentication(WrappedComponent) { return function(props) { const isAuthenticated = /* logic to check if authenticated */; return isAuthenticated ? <WrappedComponent {...props} /> : <p>Please log in to view this part of the application.</p>; }; }

Example 6: Styling

function withStyles(Component, style) { return function StyledComponent(props) { return <Component {...props} style={{...props.style, ...style}} />; }; }

HOC will wrap the component at the export stage or in the export statement.

const EnhancedComponent = withExtraInfo(MyComponent); export default EnhancedComponent;

Or

export default withData(MyComponent, data => data.particularField);

Example 7: HOC called withLogging that logs props to the console before rendering the wrapped component

import React from 'react'; const withLogging = (WrappedComponent) => { return class extends React.Component { render() { console.log('Props:', this.props); return <WrappedComponent {...this.props} />; } }; }; // Example component const MyComponent = ({ name }) => { return <p>Hello, {name}!</p>; }; // Wrap MyComponent with withLogging HOC const EnhancedComponent = withLogging(MyComponent); // Usage const App = () => { return <EnhancedComponent name="Ali" />; };

Explanation:

We define the withLogging HOC, which takes a WrappedComponent as an argument.

Inside the HOC, we return a new component that renders the WrappedComponent and logs its props before rendering.

We then wrap our MyComponent with the withLogging HOC to create the EnhancedComponent.

When EnhancedComponent is rendered, it logs the props before rendering MyComponent.

---

Example 6: Adding a greeting to multiple components based on the user's status

function withUserGreeting(WrappedComponent) { return function(props) { const additionalProps = { greeting: 'Welcome back!' }; return <WrappedComponent {...props} {...additionalProps} />; }; }

Use the above (example 6) to enhance any component

function UserProfile(props) { return ( <div> <h1>{props.greeting}, {props.name}!</h1> </div> ); } // Enhance UserProfile with the withUserGreeting HOC const EnhancedUserProfile = withUserGreeting(UserProfile); // Now, when you use EnhancedUserProfile, it has access to the 'greeting' prop

Note:
HOC should pass through props to the wrapped component.

HOC will wrap the component at the export stage or in the export statement.
HOC is a function that takes a component as its input.
We use HOC to avoid code repetition. For example you want to add checks to so many components individually, you can create an HOC that does this check and use it to wrap all these components.
When you want to separate components (functions) such as fetching data, handling authentication use HOC. const EnhancedComponent = withExtraInfo(MyComponent); export default EnhancedComponent;

Common Use Cases for HOCs:

1. Code Reuse: HOCs allow you to encapsulate common functionality (e.g., logging, authentication, data fetching) and apply it to multiple components.
2. Prop Manipulation: HOCs can add, remove, or modify props passed to the wrapped component based on certain conditions or requirements.
3. State Management: HOCs can inject state into components or manage stateful logic (e.g., form handling, state synchronization).
4. Conditional Rendering: HOCs can conditionally render components based on certain conditions or user authentication status.
5. Performance Optimization: HOCs can optimize component rendering by memoizing components, implementing shouldComponentUpdate logic, or lazily loading components.

Note:

HOCs introduce an additional layer of component abstraction, which can sometimes make the component hierarchy more challenging to understand.

HOCs do not modify the original component. Instead, they create a new component with enhanced functionality, which may affect component identity and lifecycle methods.

HOCs are a powerful tool, but overuse can lead to code complexity and reduced readability. Use them judiciously and consider alternative patterns such as Render Props or Hooks when appropriate.

Overall, Higher-Order Components are a valuable tool in the React developer's toolkit for enhancing component functionality, promoting code reuse, and improving application architecture.

HOCs are like kind of wrappers for the components to add additional functionalities (like checking for login, handling errors, loading data) without making changes to the original components. It is helpful in reusing code and keeping components organized.

Testing in React

Jest

It is maintained by Facebook, stands as a JavaScript testing framework, easy to use with rapidity, and robust capabilities. It offers features like snapshot testing and mocking.

Syntax for Running Tests:

//bash npm test

Example Test File:

// myComponent.test.js import { render, screen } from '@testing-library/react'; import MyComponent from './MyComponent'; test('renders component with correct text', () => { render(<MyComponent />); const linkElement = screen.getByText(/hello, world/i); expect(linkElement).toBeInTheDocument(); });

---

React Testing Library:

React Testing Library, a testing utility designed for React.
It mirrors user interaction with the application.
It provides a user-friendly and simple API for querying and interacting with components.

React Testing Library is a powerful tool for testing React components.

It tests that components behave correctly.

React Testing Library integrates with popular testing frameworks like Jest.
We can write and run tests within our existing testing setup.

npm test

Example 1: Test File

// myComponent.test.js import { render, screen } from '@testing-library/react'; import MyComponent from './MyComponent'; test('renders component with correct text', () => { render(<MyComponent />); const linkElement = screen.getByText(/hello, world/i); expect(linkElement).toBeInTheDocument(); });

Example 2

import { render, fireEvent, screen } from '@testing-library/react'; import Button from './Button'; test('Button onClick handler is called', () => { const handleClick = jest.fn(); render(<Button onClick={handleClick}>Click me</Button>); // Find the button element by its text content const buttonElement = screen.getByText('Click me'); // Simulate a click event on the button fireEvent.click(buttonElement); // Verify that the onClick handler is called expect(handleClick).toHaveBeenCalled(); });

Key Testing Features

1. Rendering Components: Use render methods provided by testing libraries to render React components in a test environment.
2. Querying Elements in the DOM: Use query methods (e.g., getByText, getByTestId) to query and interact with rendered elements in your tests.
3. Prediction: Use assertion or prediction functions (e.g., expect) to make assertions about the expected behavior or appearance of components.
4. Mocking Dependencies: Use mocking techniques to replace dependencies (e.g., API calls, external libraries) with mock implementations for isolated testing.
5. Snapshot Testing: Use snapshot testing to capture the rendered output of components and detect unexpected changes in subsequent test runs.

---

Integration Testing:

For integration testing, we use tools like Cypress or testing library's testing frameworks.

Example with Cypress

// myComponent.spec.js describe('MyComponent', () => { it('should render with correct text', () => { cy.visit('/'); cy.contains('Hello, World').should('exist'); }); });

Tips in testing:

1. Simplified concise targeted tests that analyze individual aspects of component's functionality.
2. Validate and verify user interactions and guarantee the desired behavior of the components.
3. It tests responsiveness that covers different screen sizes and browser environments to confirm compatibility across platforms.
4. Implement Continuous Integration: Embed testing within your continuous integration (CI) workflow to automate testing and detect issues early during development.
5. Adhering to best practices and utilizing suitable testing frameworks.
   It enhances the reliability and resilience of your React applications.
   It explores a range of testing methods and libraries to determine the most suitable approach for the project.

Styling in React

In React, there are several ways to style components. Here are some common methods to style the React App.

Inline Styles:

W can apply styles directly within the JSX using JavaScript objects.

//jsx file const MyComponent = () => { const style = { color: 'blue', fontSize: '16px', }; return <div style={style}>Hello World</div>; };

---

CSS Stylesheets:

We can create separate CSS files and import them into your components.

// jsx file // styles.css .myComponent { color: blue; font-size: 16px; } <br/> <textarea style="width: 100%; height:300px"> //jsx import './styles.css'; const MyComponent = () => { return <div className="myComponent">Hello World</div>; }; <h3>CSS Modules:</h3> <p>CSS Modules allow scoped styling for components.</p> <textarea style="width: 100%; height:300px"> //jsx // styles.module.css .myComponent { color: blue; font-size: 16px; }
//jsx import styles from './styles.module.css'; const MyComponent = () => { return <div className={styles.myComponent}>Hello World</div>; };

---

Styled Components:

Styled Components offer a way to write CSS directly within your JavaScript files.

//jsx import styled from 'styled-components'; const StyledDiv = styled.div` color: blue; font-size: 16px; `; const MyComponent = () => { return <StyledDiv>Hello World</StyledDiv>; };

CSS-in-JS Libraries (other than Styled Components):

There are other libraries similar to Styled Components that allow you to use CSS-in-JS, such as Emotion.

These libraries let you write CSS directly in your JavaScript, providing dynamic styling capabilities.

//Emotion Example: //jsx import { css } from '@emotion/react' const style = css` color: blue; font-size: 16px; `; const MyComponent = () => { return <div css={style}>Hello World</div>; };

---

Tailwind CSS:

A utility-first CSS framework that can be used in React for rapidly building custom designs by composing utility classes.

//Tailwind CSS Example: //jsx file import 'tailwindcss/tailwind.css' const MyComponent = () => { return <div className="text-blue-500 text-lg">Hello World</div>; };

---

SASS/SCSS:

SASS/SCSS is a scripting language that pre-processes code before it's converted into CSS. It offers enhanced capabilities compared to standard CSS, including features like variables, nested rules, mixins, and additional functionalities

$text-color: blue; .myComponent { color: $text-color; font-size: 16px; import './styles.scss'; const MyComponent = () => { return <div className="myComponent">Hello World</div>; };

---

Inline CSS with React's style Attribute (Dynamic Styling):

We can dynamically change styles based on props or state.

Example: Dynamic Inline Style

//Dynamic Inline Style Example: //jsx file const MyComponent = ({ isImportant }) => { const style = { color: isImportant ? 'red' : 'blue', fontSize: isImportant ? '20px' : '16px', }; return <div style={style}>Hello World</div>;

Each of these methods has its own set of advantages.
Inline styles and CSS-in-JS libraries like Styled Components or Emotion are great for components that require dynamic styles based on props or state.
CSS, SASS/SCSS, and CSS Modules are excellent for more static, global styles.
Tailwind CSS is favored for its utility-first approach and rapid prototyping capabilities.
The choice often depends on the project requirements, scalability needs, and developer preference.