libraries.md

Learning Objectives

The objective of this discussion is to expose you to some of the popular frameworks that are built on top of JavaScript or React. The goal is not for you to know how to use these, but simply understand what their intended usage is in case you want to use it at some point in time.

For each of these, I want you to answer the following questions for the class:

1. Why does this exist? Why did people spend hundreds of hours of their time to build this?
2. For what types of projects would you use this for?

Questions

1. Gatsby
2. Storybook
3. i18n.js
4. MathJax / KaTeX
5. D3.js
6. Formik
7. react-hotkeys
8. Next.js
9. Frontity
10. React Query
11. Redux

team:- Mustafa M. ,Ali ibrahem ,Alan abdullah ,abdulbari ,Roza

1->Gatsby is an open-source framework that combines functionality from React, GraphQL and Webpack into a single tool for building static websites and apps.

2->Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time.

3- i18njs is an internationalization-framework written in and for JavaScript and you can use it with React and next js, in purpose of translating web applications easily i18njs is created and All started back in 2011 when we were in search for an internationalization library that meets our demand - allowing to run both on server side Node.js and on our client side single page applications and when your website is used in different places and nations then you have to make translating for your web contents and by using i18njs you can achieve that

mathJax was designed with the goal of consolidating the recent advances in web technologies into a single, definitive,
math-on-the-web platform supporting the major browsers and operating systems.
It requires no setup on the part of the user (no plugins to downlaod or software to install),
so the page author can write web documents that include mathematics and be confident that users will be able to view it naturally and easily.
One simply includes MathJax and some mathematics in a web page, and MathJax does the rest.

MathJax works with screenreaders & provides expression zoom and interactive exploration. You also can copy equations into Office, LaTeX, wikis,and more .

5. Why does this exist

D3 helps you bring data to life using HTML, SVG, and CSS. D3's emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

For what types of projects would you use this for

To reate an interactive SVG bar chart with smooth transitions and interaction and for visualizations and 3D for games.

6 : Formik is the world's most popular open source form library for React , by using Formik you cand avoid 3 most annoying part when you create a form Getting values in and out of form state , Validation and error messages and Handling form submission cause Formik collocating all of them in one place so in order to handle form and form validations in an efficient way it's better to use Formik and you need to use Formik if your project needs form handling and form validation.

7. Why does this exist

react-hotkeys uses key maps to decouple defining keyboard shortcuts from the functions they call. This allows hot keys and handler functions to be defined and maintained independent of one another.

For what types of projects would you use this for?

To decouple defining keyboard shortcuts from the functions they call.

8- >for the most part related to speed and performance. React components that make up the user-facing part of a website are all initially rendered on the server side. This means that once the HTML has been delivered to the client (the user’s browser), nothing else needs to happen for the user to be able to read the content on the page. This makes page loading times appear much faster to the user.

for developing server-side rendered (SSR) React applications. It's easy to use and well supported, making it an attractive choice for web app development projects.

9.>
Frontity enables you to easily build a React-based frontend for a headless (or decoupled) WordPress site.
Your WordPress site serves its data via the REST API,
and the frontend that you build with Frontity consumes this data and renders it in the browser as a
SPA (Single Page Application) which you can configure and style to your liking.

The Frontity framework allows developers to create React-based frontends for WordPress. You can create any kind of frontend, be it an app, theme, single-page website, or even a simple blog interface using Frontity.

10-> quick start page , managing the cycle in the old pattern required 19 lines of code, and using React-Query requires only one. The query object returned by React-Query includes all the state information we had before. We are released from the burden of repetitively managing the request process over and over — React-Query does it for us. By this stage, to put it in React terms.

This library will help you to fetch, synchronize, update, and cache your remote data while also reducing the amount of code you need to write by providing you two simple hooks and one utility function.

11->React was designed with the concept of states and lifecycles. And in React, state can also not be modified directly, it can only be done via the function setState. This makes it easier for Redux concepts to be applied because they share they same understanding and behavior of a state object. Without Redux, you would have to make data dependent on the components and pass it through different components to where it’s needed.

when your app grows to the scale where managing app state becomes a hassle; and you start looking out for making it easy and simple.because Redux allows you to manage your app’s state in a single place and keep changes in your app more predictable and traceable .