React 101
React is a Javascript library for frontend developement, that can be used both for mobile and web applications.
Well , that depends on the point of view. Indeed, that code will be mixed. React is focused on separating elements by FUNCTIONALITY, to promove REUSABILITY OF CODE. When using React logic and structure are inseparable.
They are the smallest unit react works with. They represent the most basic items. They describe, literally what we see on the screen. They
They are diferent elements of the User Interface that are intended to be reused and combined. All of these components are Javascript objects.
Usually , components are described making use of JSX, which is an extension of the Javascript language. It's really similar to HTML.
This framework offers an important Feature: The virtual DOM (React DOM) , that stores a copy in memory of the DOM. It allows the application to display changes in it's user interface without forcing the user to refresh. It's because of that, that React apps are usually SPA (Single Page Applications).
It's basically, a way of integrating HTML into JavaScript code, making it easier to understand. BUT , it is JAVASCRIPT after all! See this jsx wiki page for more info.
Each component has one, that can only be shared with it's own children. There exists a GLOBAL state all components have access to. It can be accessed using the context api.
"Context lets the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props." The complete documentation can be accessed via React's context api docs
Important: Context should be used only when many components at different nesting levels require the use of certain data. If we make use of this api when it's not really necessary, and composition of components is not taken into account, these compontents will become less and less reusable. Some tips are also provided in this article of the React Docs. Before You Use Context
Context is kind of a new api , no react-based api existed for this. So it's usual to see programs making use of Redux, an open-source Javascript library.
In order to write this wiki , we have consulted the following sources:
Notes taken in professor's Pablo González class.
https://www.youtube.com/watch?v=lWQ69WX7-hA&ab_channel=EDteam
