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
Partners Abdulrahman Taji, Mohammed Manar, Deniz Demirbilek
1- react Gatsby:
most simply is a static site generator that means the static site part of this means that what Gatsby will produce for us are static HTML files that we load up onto a server.
Gatsby is going to break that convention have All of the stuff already pre-configured ahead of time and just serve that up now.
Gatsby is built with a plug-in architecture and this is a great system because what we're serving up is a static site how do we go about interacting with JavaScript and other things can get a little complicated so it's really nice that we could pull this complex code out into plugins and we could rely on a huge ecosystem of other plug-in authors to do some of the heavy lifting with common things for us
briefly review gatsby is a static site generator that uses graph QL to get data react for templating and it's got a plug-in architecture.
2- Storybook:
storybook is basically a development environment and playground for UI components it enables you to create components independently and showcase those components interactively in an isolated development environment what that last part means is that storybook runs outside of your main react application so you can develop UI components in isolation without having to worry about the business logic.
it makes development across the team smoother one is the ability to view the different components that have already been developed as part of the app two is the ability to view what are the different props that those developed components accept three is the ability to visually showcase those components to your stakeholders for feedback.
3- I18n.js:
I18n.js = Internationalization
18 refers to the number of letter in the word “Internationalization”
basically I18n.js is a function to internationalize your extension. You can use these APIs to get localized strings from locale files packaged with your extension, find out the browser's current language, and find out the value of its Accept-Language header.
4- The purpose of MathJax and KaTeX is to bring the ability to include mathematics easily in web pages to as wide a range of browsers as possible.
Example:
5- D3 stands for Data-Driven Documents and is widely used to create interactive data visualizations on the web
6- Formik is a small library that helps us with the 3 most annoying parts: Getting values in and out of form state. Validation and error messages. Handling form submission
This would be useful if there are lots of functionality in the app and we would like to provide shortcuts for our users.
8.Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites. Traditional React apps render all their content in the client-side browser, Next.js is used to extend this functionality to include applications rendered on the server side.
So rendering on the server side means reducing the burden on web browsers and providing enhanced security. Even less powerful mobile devices can display complex apps since rendering is done on the server.
9.Frontity is an open source project that lets users create React web apps using WordPress. Using Frontity any wordpress project can be made into a React web app, so it makes React more accessible to developers.
10- React Query: Simplifies data fetching by eliminating the need to write fetching logic from scratch. This would be useful if we were fetching from lots of databases in our web app.
11- Redux:
Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces.
Redux is a small library with a simple, limited API designed to be a predictable container for application state. It operates in a similar fashion to a reducing function, a functional programming concept.
Explaining throw example:
in this application in any given component we dispatch actions so one action might be changed name this action then is ran through a reducer that is where the Redux reducer where the name comes from a reducer has one simple job or task it takes the action handles the action so if the action has changed name the reducer will have a method which knows what to do upon a change named action namely change the name and it will then take the old state and manipulate it in a way that it now reflects this action so takes the old state adds or execute this single action on the old state and gives us back a new state now this is best an immutable which means don't change the old state instead take it as a basis and then create a brand new state so kind of a copy of the old state with the change employees so the old state stays untouched we just create a new state and return it's a good practice to do so because it gives you unique States in your application which makes it very clear at which point of time you had which state so we're in this reducer and we're getting back a new state now this state is then stored in well a store and we have only one store in the whole application in our read acts world this store has one simple task store our state that's why it's called store and we may have multiple reducers but we only have one store so multiple reducers for multiple parts of our application but only one store which holds one unique store and then our application can subscribe to that store or specific components can subscribe to parts of the score store parts of the state they need and whenever the state is updated and therefore a new status passed to the store will automatically send it to all the components interested and the application will update.