Framework Report

for React
1. Introduction
Correctly speaking, React is not a framework at all. Technically, developers refer to
React as a front-end library to assist in building functionality for projects. However,
almost universally, developers still use React as a framework and continue to discuss
and compare it with other web frameworks. Therefore, React remains a framework like
any other framework in this article.
React is a declarative, efficient, and flexible JavaScript library for building user
interfaces. It enables you to create complex user interfaces (UIs) from small,
independent pieces of code.

2. Components and Key Features

2.1. Virtual DOM (Document Object Model)
React uses a virtual DOM to efficiently update the UI. Instead of directly
updating the browser’s DOM for every change, React creates a virtual
representation of the DOM in memory. When changes occur, React compares
the virtual DOM with the actual DOM and only applies the necessary updates,
minimizing the number of DOM manipulations and improving performance.

2.2. JSX (JavaScript XML)

JSX is a syntax extension for JavaScript that allows developers to write HTML-
like code within JavaScript. It makes React components more readable and
expressive. JSX gets transpiled into regular JavaScript during the build
process.

2.3. Props (Properties)

Props are used for passing data from parent to child components in React.
They are immutable and help in making components more reusable and
modular. Props are similar to function arguments and are accessed through the
‘this.props’ object within a component.

2.4. State
State is a built-in feature in React that allows components to manage their own
data. Unlike props, which are passed down from parent components and are
immutable, state is mutable and managed internally by the component. When
a component’s state changes, React automatically re-renders the component
and its children to reflect the new state.

2.5. Lifecycle Methods

React components have lifecycle methods that allow developers to hook into
various stages of a component’s life cycle, such as when it is mounted to the
DOM, updated, or unmounted. These methods provide opportunities for
performing actions like fetching data, setting up subscriptions, or cleaning up
resources.
 2.6. Hooks
Introduced in React 16.8, hooks are functions that allow developers to use state
and other React features in functional components, which were previously only
available in class components. Hooks like useState and useEffect are
commonly used for managing state and performing side effects in functional
components.

2.7. Context API

The Context API allows data to be passed through the component tree without
having to pass props down manually at every level. It provides a way to share
data between components without explicitly passing props through every level
of the tree.

2.8. React Router

React Router is a popular routing library for React applications. It allows
developers to handle navigation and routing in a declarative way, enabling
them to define different routes and render different components based on the
URL.

2.9. Redux
While not part of React.js itself, Redux is often used alongside React for
managing global state in larger applications. Redux provides a predictable state
container that can be used with any JavaScript framework or library, including
React. It helps in managing complex application state and makes data flow
more predictable.

3. Utilizing Components
3.1. Virtual DOM
React handles the virtual DOM automatically behind the scenes. You don't
directly interact with the virtual DOM; instead, you work with React's
component-based architecture and state management, and React takes care
of updating the actual DOM efficiently.

3.2. JSX
JSX allows you to write HTML-like code within JavaScript. To use JSX, simply
include it within your React component files. JSX gets transformed into regular
JavaScript by tools like Babel during the build process.

3.3. Props
To pass data from a parent component to a child component, you simply add
attributes to the child component when rendering it. In the child component,
you access these props through the props object.
 3.4. State
To use state in a component, you initialize it in the component's constructor (for
class components) or using the useState hook (for functional components).
You can then update the state using setState (for class components) or the
function returned by useState (for functional components).

3.5. Hook
To use hooks in functional components, you simply import them from the react
package and call them within the component body. For example, useState for
managing state and useEffect for performing side effects.

3.6. Context API

To use the Context API, you first create a context using ‘React.createContext()’.
You then provide this context at the top of your component tree using a
‘Provider’ component. Consumers of the context can access its value using a
‘Consumer’ component or the ‘useContext’ hook.

4. Advantages Compared to Other

Frameworks
4.1. Component-Based Architecture
React's component-based architecture encourages modular development and
reusability. Components can be easily composed to build complex UIs, making
it easier to maintain and scale applications. Additionally, React's unidirectional
data flow simplifies state management, reducing the likelihood of bugs and
making the codebase more predictable.

4.2. Community and Ecosystem

React has a large and active community, with extensive documentation,
tutorials, and third-party libraries available. This vibrant ecosystem provides
developers with access to a wide range of tools and resources for building
React applications, including UI component libraries, state management
solutions, and routing libraries.

4.3. Performance Optimization

React offers several performance optimization features, such as memoization,
lazy loading, and code splitting. These features help developers optimize
rendering performance and reduce the initial loading time of applications,
resulting in a better user experience, especially for large-scale applications.

4.4. Backward Compatibility

React maintains a strong commitment to backward compatibility, ensuring that
older codebases and third-party libraries continue to work with newer versions
 of React. This stability reduces the risk of breaking changes and makes it easier
for developers to upgrade their applications to the latest React releases.

4.5. Flexibility and Extensibility

React's design philosophy emphasizes simplicity, flexibility, and composable
components. Developers have the freedom to choose the tools and libraries
that best suit their needs, allowing for greater customization and extensibility.
React can be integrated seamlessly with other JavaScript frameworks and
libraries, enabling developers to leverage existing code and infrastructure.

5. Limitations and Challenges

5.1. Learning Curve
React has a relatively steep learning curve, especially for developers who are
new to JavaScript frameworks or functional programming concepts.
Understanding concepts like JSX, virtual DOM, and state management can
require time and effort, particularly for beginners.

5.2. Tooling and Configuration

Setting up a React development environment with build tools like Webpack or
Babel can be complex, especially for developers who are not familiar with
modern JavaScript tooling. Managing dependencies, configuring build
pipelines, and optimizing production builds can also be challenging tasks.

5.3. Integration with Legacy Code

Integrating React into existing codebases or working with legacy technologies
like jQuery or server-side rendered templates can pose challenges, as React
operates differently from traditional web development approaches. Bridging the
gap between React and legacy codebases often requires careful planning and
refactoring.

5.4. Community Fragmentation

The React ecosystem is large and diverse, with numerous third-party libraries,
tools, and frameworks available. While this diversity provides developers with
many options, it can also lead to fragmentation and inconsistency within the
community, making it challenging to choose the right tools and libraries for a
given project.

6. Conclusion
6.1. React is a declarative, efficient, and flexible JavaScript library for building user
interfaces. It enables you to create complex user interfaces (UIs) from small,
independent pieces of code.
6.2. Main reasons for choosing Reacts for this project
6.2.1. React contributes to accelerating development speed, reducing
research time, and effort for team members.
6.2.2. React help modulize and reuse some UI components of the software
especially software Event Management functionality where Event
Cards will be requested and displayed mutiple times in different pages
of the website.
6.2.3. State and Hook functionality of this project helps constant UI update
whenever there are changes made to the data.