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:
- Why does this exist? Why did people spend hundreds of hours of their time to build this?
- For what types of projects would you use this for?
- Gatsby
- Storybook
- i18n.js
- MathJax / KaTeX
- D3.js
- Formik
- react-hotkeys
- Next.js
- Frontity
- React Query
- Redux
Ameen Abdulsamad, Nma Shawkat, Heyam Masri, Mhamad Othman, and Sakar Masoud
Answers:
1- Gatsby: an open-source site generator it provides over 2500 plugins to create static websites, It's great to use because it supports React and has built-in data fetching and routing, and provides performance optimization out of the box.
2- Storybook: is to help developers, designers, and anyone involved in the project to work together it provides a platform to create test, and document UI components, and it helps in saving time in developing high-quality, reliable user interfaces.
3- i18n.js: it is an internationalization framework written in and for js. it supports local languages and cultural settings. besides providing you with i18n features which are plurals, context, interpolation, and format. it also provides you with a complete solution to localize your products from the web to mobile and desktop. it has integrations for many front-end libraries including React. js and Vue. people are using it because by internationalizing a codebase, developers and businesses can expand their user base and access a wider audience.
4- MathJax / KaTeX: TeX or MathML-coded mathematics in browsers without requiring font installation or browser plug-ins. Any modern browser with JavaScript enabled will be MathJax-ready. / KaTeX is a cross-browser JavaScript library that displays mathematical notation in web browsers. It puts special emphasis on being fast and easy to use. and MathJax is a JavaScript display engine for rendering.
5- D3.js: D3 is a JavaScript library for manipulating documents based on data and it exists to provide the building blocks for displaying data through colorful charts, graphs, and maps – instead of boring text and spreadsheets and so it helps us bring data to life using HTML, SVG, and CSS. And it allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.
people spend hundreds of hours of their time building this to allow you the ability to generate spectacular visual illustrations with your data. D3 works in projects that allow you to create engaging visuals with charts that move and transform in front of your eyes.
6- Formik: this is a small group of React components and hooks for building forms in React and React Native. It helps with the three most annoying parts: Getting values in and out of form state. Validation and error messages.
7- react-hotkeys: react-hotkeys is the React component that listens to key down and key up keyboard events, defining and dispatching keyboard shortcuts. A declarative library for handling hotkeys and focus areas in React applications react-hotkeys provides several components that are useful for implementing keyboard shortcuts into your React app.
8- Next.js: Next. js is a widely-used framework for building React applications that offer server-side rendering, automatic code-splitting, static exporting options, and easy production builds. It also relieves a lot of the general headaches involved with creating production-ready React applications.
9- Frontity: Frontity is the easiest way to create lightning-fast websites using WordPress and React. Open source and free to use.
10- React Query: React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing, and updating server state in your.
11- Redux: Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments, and are easy to test. While it’s mostly used as a state management tool with React, you can use it with any other JavaScript framework or library. It’s lightweight at 2KB (including dependencies), so you don’t have to worry about it making your application’s asset size bigger.