Research frameworks

Frameworks are a collection of components (pieces of reusable code from a User Interface) and libraries that are used for certain, specific functionalities Source. But why should we use frameworks when we can also write vanilla JavaScript code? The main reason for this is: If a small part on the page needs to be changed, it doesn't have to reload the entire page (with lots of code to get that done) (Source, Source).

JavaScript has many different frameworks. The most famous are React, Angular and Vue Source. For this assignment from school, it was possible to choose the framework React, Vue, Svelte or even create your own framework.

Since I have never worked with a framework myself (except for the backend framework Node.js), it seemed sensible to start with a framework that already contains a lot of information online. It also seemed sensible to me to choose a framework of which ... First

For this reason, I chose to work with the framework React.

React

First I thought it would be useful to check the react site to see what it is and how I can use it. They themselves describe react as: A JavaScript library for building User Interfaces. So actually react is not a framework, but a library.

Components

Components are independent reusable code blocks

jsx

To get started with React, it is useful to have npm installed on your computer. The React framework can be installed with npm (node package manager). Because I followed block tech in year 2, I had already installed this on my laptop.

Classes vs. Hooks

export function useFetch (endpoint) {
 // Function in useState because faster (only runs once i.s.o. every time)
 const [data, setData] = useState(() => {
   return null;
 });
 
 useEffect(() => {
   // hierin opschoon functies aanroepen.
   async function fetchData() {
     let response = await json(endpoint);
     setData(prevRes => response);
   }
   fetchData();
 }, [endpoint]);

 return data;
}