Context API

Niyi0904 — Mon, 01 Jul 2024 16:01:03 +0000

The Context API in React provides a way to pass data through the component tree without the need to pass props down manually at every level. The global state created using context API can be accessed by any component within the tree, regardless of how close they are to one another in the hierarchy.

There are cases where we want to pass down data to a child component, and we have components in between the child component that needs such data and the parent component. Rather than do a prop drilling ( passing prop down to component that don't need it to get ut to components that need it )we can use a context API

When to Context API ?

To avoid prop drilling which is a bad practice
To avoid use a separate API for state management. Usually we will use library like Redux to manage our state, but in a medium or small size application context API would be the best choice.

How do we integrate Context API?

Create a file named context ( or whatever you want )
In that file import createContext from react like so;
Import { createContext, useContext} from 'react';
Create a context:
const MyContext =
createContext();
Create a provider:
const MyProvider = ({ children }) => {
const [state, setState] = useState(initialState);

return (

{children}

);
};

Wrap your app with the provider in your index.JS file:
Create an exported variable with that wraps your context with useContext making your context available to any component: const UseStateContext = () => useContext(MyContext); To use your created context in a file
Import your export context variable (UseStateContext) into your desired file.
Use it either by destructuring e.g
Const {state, setState} = UseStateContext();

Now you can use state and setState in your component

By following these steps, you have successfully integrated the Context API in your React application, allowing you to share state and functionality across components without prop drilling.

Note: Make sure to import the React and useContext hook from the react package, and the useState hook from the react package or a compatible library like react-hooks.

React Vs Angular

Niyi0904 — Mon, 01 Jul 2024 15:22:47 +0000

Firstly I would like to introduce the frameworks and their popularity

REACT
React is a popular JavaScript library for building user interfaces created in 2011 by Jordan walker and it is managed by Facebook

It is also important to know react was released as an open source library, and it was firstly named faxJS.

Some of the key concepts of React are as follows

Component-based architecture: React uses a component-based architecture, where applications are broken down into small, reusable components.
JSX: React uses JSX, a syntax extension that allows you to write HTML-like code in your JavaScript files.
Virtual DOM: React uses a virtual DOM (a lightweight in-memory representation of the real DOM) to optimize rendering and updating of components.
One-way data binding: React uses a one-way data binding approach, where components only receive updates from their parents, not the other way around.
State and props: Components manage their own state, and receive props from their parents.
Hooks: React provides hooks, a way to use state and other React features without writing a class component.
Popular libraries and tools: React has a large ecosystem of libraries and tools, including Redux, React-router-dom, React-scroll and Webpack.
Wide adoption: React is widely adopted in the industry, and is used by companies like Facebook, Instagram, and Netflix.

Some advantages of using React include:

Efficient rendering: React's virtual DOM and one-way data binding approach make it efficient for rendering and updating components.
Easy to learn: React has a relatively low barrier to entry, and is easy to learn for developers familiar with JavaScript and HTML/CSS.
Flexible and customizable: React can be used for a wide range of applications, from small widgets to complex enterprise applications.

Some potential Disadvantages of using React include:

Steep learning curve for advanced topics: While React is easy to learn for basic usage, some advanced topics like hooks and context can be challenging to master.
Not a full-featured framework: React is a library, not a full-featured framework like Angular or Vue. This means you may need to use additional libraries and tools to build a complete application.

ANGULAR
Angular is a popular JavaScript framework for building web applications. It was created by Google in the year 2010

Here are some key points about Angular:

**Full-featured framework: **Angular is a complete framework that includes everything you need to build complex web applications.
Modular architecture: Angular uses a modular architecture, where applications are broken down into small, reusable modules.
Components: Angular uses components, which are similar to React components, to build user interfaces.
Templates: Angular uses HTML templates, which are compiled into JavaScript code.
Dependency injection: Angular uses dependency injection to manage dependencies between components and services.
Services: Angular provides services, which are singletons that can be used to share data and functionality across components.
Routing: Angular provides a built-in routing system for navigating between views.
Forms: Angular provides a built-in forms system for handling user input.
Observables: Angular uses observables, which are a way to handle asynchronous data streams.
TypeScript: Angular is built on top of TypeScript, which provides type checking and other features.

Some advantages of using Angular include:

Comprehensive framework: Angular provides everything you need to build complex web applications.
Large community: Angular has a large and active community, with many resources available.
Enterprise-ready: Angular is widely used in enterprise environments, and is well-suited for large-scale applications.
Opinionated: Angular has a strong opinion on how applications should be structured, which can help guide development.

Some potential Disadvantages of using Angular:

Steep learning curve: Angular has a complex architecture and a lot of features, which can make it challenging to learn.
Verbose: Angular requires a lot of boilerplate code, which can make it feel verbose.
Not as flexible as React: Angular has a more rigid architecture than React, which can make it harder to adapt to certain use cases.

Let see some diffence between React and Angular

Here is a table comparing React and Angular:

Feature	React	Angular
Architecture	Library, component-based	Framework, modular
Components	Functional/Class, JSX	Components with templates
State Management	Props, State, Redux/MobX	Services, Observables
Templates	JSX, JavaScript-based	HTML templates, Template-driven
Learning Curve	Steeper, JavaScript-focused	Gentler, HTML/CSS-focused
Performance	Virtual DOM, efficient updates	Real DOM, efficient change detection
Ecosystem	Large, diverse, widely adopted	Large, strong backing from Google

Now, let see some similarities between React and Angular
Here is a table highlighting some similarities between React and Angular:

Similarity	React	Angular
Component-based architecture	Yes	Yes
Use of components	Yes	Yes
Support for one-way data binding	Yes	Yes
Use of services for global state management	Yes	Yes
Support for server-side rendering	Yes	Yes
Large and active community	Yes	Yes
Wide adoption in industry	Yes	Yes
Support for desktop and mobile applications	Yes	Yes
Extensive library of third-party tools and libraries	Yes	Yes

From the developer survey

React takes the lead over Angular.

Forem: Niyi0904

Context API

React Vs Angular