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
Gatsby :
it is a static react_based site generator ..it uses front end techniques like react_routers in order to give fast page loads, service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching
it simply exists to make the developers lives easier .. when we have a framework that is ready to use and gives a great output like gatsby
it can be used with all kinds of static websites to optimize their performance and enhance the design .. and what's great about it is the developer doesn't need to learn how gatsby work or doesn't need to have a learning curve like learning a new language it's much simpler
storybook :
is an open-source UI development environment for React components in isolation
It makes development faster and easier by isolating components. and what specialize this tool is that we don't have to build a complex code in order to make the design and it runs outside the main app so the developers don't worry about crushing the code
i18n.js:
Internationalization (I18N) is the process of designing and preparing software products (apps) to support multiple locales, languages, and regions
like when we make a project for different nationalties or when our project needs translation that is the best time to use i18n.js
or even to solve the local-based problems like translating the internationalized app into specific languages for particular locales
it has a great deal of help regarding globalization
MathJax / KaTeX:
are A JavaScript display engine for mathematics that works in all browsers.
Helps to get easier for math operations in web apps and it can be used with Some MIT websites
D3.js:
is an open-source js library and it is used to create custom dynamic data visualizations. it brings the data to life by using SVG, Canvas, HTML, and CSS. Generating data is a massive deal today and communicating with it is difficult. So the visual representation of the data is the most effective way and we can do that by using d3.js
d3.js focuses more on transitions, transformations, and interactions
Formik:
is a library to handle forms in react. Creating forms and managing forms are difficult in react. And when the project gets bigger, it will be more difficult. because we need states for every form element and managing every state is difficult and it makes code repeated. so the form is a way to handle the forms. it will keep things organized and refactored.
React Hotkeys:
is a library for handling hotkeys and focus areas in React applications. it uses keymaps to decouple defining keyboard shortcuts from the functions they call. This allows hotkeys and handler functions to be defined and maintained independently of one another.
Next.js:
For optimizing, easy to use. Because it solves so many problems about communication between server and client, also rendering.
A project that what needs for performance
Frontity:
Using react for WordPress. Because WordPress is so common and react is an indispensable framework, also using this for fastness, SEO friendly. Literally any default blog, etc.
React Query:
Works with API, fetch / post req. Helps with server-state data management.
LIKE MOVIE PROJECT... Everything with that API