JSX is a new concept in React that allows us to introduce HTML through js code. Components are pieces to build the react App. Basically, components are the structures that compose the website.
Tools
To see the react code we need extensions in our browsers ReactDevTools.
One of the shortcuts that React offers to use is the usage of JSX, let’s say it is the combination of javascript and HTML for a mere purpose, to simplify code.
ReactDom is the object that contains the code behind the compilation from javascript to HTML, this counts on the property render with the parameter from and to so it can compile.
It is necessary to import these two objects, react, to use JSX code and reactDom, to compile from javascript into HTML.
Another shorthand is the usage of the method React.createElement which will need three parameters: the label name, attributes, and the innerText or child.
Basically, React has this sugar syntax that collet the parameter the coder writes, and thanks to babel, webpack, React-app make possible the render on the screen.
It is recommended to use the JSX because in the case of having more children from an element it’s easier as writing HTML.
Unit basic of development, this are the know atoms in physics, so in web development, these components are construction block, indestructible and independents that build the website.
For example, a house is an element, and its component would be the map. The component would be the class and the element would be the object house, the label.
To identify them: which elements repeat and which elements do a specific function. Good candidates are elements in the list and switches that change its visual aspect.
It is essential to identify components to manage to React perfectly in all its power.
Components has a life cycle that is divided into three main stages:
• Montage: Here the component is created and it’s born into the App
• Growth: Here the components can suffer updates through functions and React will register that growth through functions.
• Unmontage: Here the component will fade leaving behind the App closed when the user leaves.
Here a technical image that will describe the process:
Components must live inside their own respective folders. This is a best practice :
Inside of the routes of the App src create a folder components and their inside host all the files that will contain the code of these.
Then when the main javascript is called to compile for React, it needs to be imported that component we made. This is built as a class and after export (is important to import also here React to use JSX). In the main javascript file when the render is made, make sure the class is between “</>” so it can be rendered propertly.
Like in webpack it is necessary to import the CSS file’s position in the App, in the case of using preprocessors is necessary to install firstly the node-sass that will read the scss documents and it’s loaders to compile into CSS.
<h3>-Props-</h3>It refers to the properties aka the arguments of the class/component we are creating. These arguments can be called inside the building of the element so the object resulted will contain those properties. To point those values as all prototype objects it must be referred by the keyword this.props.<parameterer-name>.
In this case, the parameters will correspond to the attributes of the HTML.
To construct a page it must be defined by several components, vague but we can take it as the main difference between page and component.
<h3>-Linking Events-</h3>When in a form a client is introducing new data, these need to be linked through events that we can handle with function the handlers that are methods from the components, in this case, the Form Component.
We find out three handlers, this.handleChange, it will register the value and name for the input the data is being filled; this.handleClick, it will be triggered by a click giving a pass to action; this.handleSubmit, when a form is submitted this will commit an action.
Thanks to react at the time of building the HTML structure it is possible to link the javascript code that will live from the interaction with the html.
Working with the Form we are going to save the data introduced to later consume it when it needs it.
All components have received values through props but there is a way to retain those values and send them when is whished. For that, we are going to work with the object state and the method setState from the class Components.
Without the state object, we are not controlling efficiently the states for the inputs, so it is important to initializing it first assign empty or whished values to the inputs.
Each input is saving each value and also setState save values, so to cancel this each input must have a value that read from the State and not from its saved value, so an object state must be settled with or without values inside.
Consist in the situation of the state in a specific location close to the Form in this case.
So with this location settle, we can access to that information and share it with other components if it is whished.
To do so normally on the page, where the state will be saved we build the object with its properties and values to save and the function with a spread operator to not overwrite the object values, we send these to the component that will take the information from the client.
Once we can access that object state from other components too for example print them on the website.
Components are classes that are objects due that React is based in javascript, so it is possible to make a component and inside situate several instances from classes with data we pass through.
React router works to allows SPA (Single Page Apps) to work fluently. It is built by four parts: main, the browser, in javascript router it would be the instance of the router and will wrap all the connections and functionalities to access the navigation bar; route, this will contain the specific route to point; switch, compare routes with the selected one and will match; link, from the button it will send the route we want to go.
This will receive the location of the pages and through a function will execute these classes the first one BrowserRouter, that will create the instance and allow us to use the Switch to match the url and Route inside this last one, that will save the URL case that exists in the SPA. Nevertheless, the Link class must be import and use as a label in the page we want to move from, instead of containing the attribute “href” will have instead “to”.
<h3>-IMPROVE UI, LAYOUT-</h3>One way to not repeat code is to create a function that will implement the code needed while the layout is building. It is simple as creating a new component that will contain the function and implement the layout, in this case, a navigation bar. After this, the router will be called this layout function and send properties or arguments that will be the children. So each time we select a path and navigate through this structure will be called the layout and after the data showed.
Finally, to add a NotFound page in the switch class it needs to be added a route with the component attribute only, this will be like the default of the switch function.
Component’s life consists of three stages, Mounting, firstly it will initialize with a constructor the code to after been introduced with rendering into the DOM the last method ComponentDidmount() will be rescindable to pass to the next stage; Updating, where the component will watch the props to update itself, it will establish the update with componentDidUpdate() method; Finally when the client change to another page the component must dismount so we pass to the last stage where component didUnmount() will settle the life of the component.
<h3>-Practice-</h3>This method we mentioned before follows a chronological path, starting for the constructor, render, mount, update, render if there was an update, unmount.
The method didMount() can trigger the props for the render so this last method will activate and executed again. Finally, before the unmount the method will unmount has to be able to clearTimeout if the update was currently going on.
When a request is made is recommended to make the fetch or axon in the method didMount of the component so the asynchronism will trigger the method didUpdate and the new data will flow to refresh the component.
Also when rendering is important to check the properties of this data, Error.message and Emptiness of the data, for that a simple if function before sending the JSX will work perfectly.
If it is wished to send data to the API it is possible thanks to the method create() that will receive as parameter the structure we want.
In this project, we use a library that from a string it will give us a hash, md5. We will use that hash in a Component so when the browser renders the image of an avatar, this component will request the email from an api and send an url back that will be the proper avatar.
It is necessary to improve the UI experience so the manage of the states is necessary when the data has been sent to the api and whne there is an error. Finally, when the structre is sent and confimed we make a history.push() to the url the list is showed so the badges, include the recen made one, can be seen.
For this we need to pickup the id of the structure we want to modify. Props.match will allow us to do so, it comes with the router-react library.
Once we get the id wished, we can edit the data with the method read() from the api, this will need two parameter, the Id and the structure that is the data so it will overwrite those properties and values.
The easiest but not efficient method to employ is polling that consist in an interval of wished time that will fetch data and refresh the App. This can make it slower so it is better to use other methods like subscriber/notification that will consist in a design pattern that will observe the api for notification that will be the updates.
Dividing task is a best practice so the order of the code and other coders or participants can see the responsabilities making easier the colaboration.
In this case we have divided the request of the api and the show of the data in two, one the page that makes the petition to get the data, and finally the function that will show the data in the App.
Other good practice is the organization of the imports three categories, dependencies, components and assets.
As we have the render method thanks to react-dom, this can cause several issues like for example the display of a modal that can be break because one of our components or elements have a style that dosen’t allow the display.
React counts with portals that allow us to access the app externally, this ReactDOM.createportal() admit ttwo parameters, the element to introduce and the node we are going to introduce it in the App.
The usage of generic components is called composition and it is a best practice. In this case we use the portal Modal with a function and stablish all the events onClick to close or cancel the Modal and added other modal to make sure this petition of deleting a badge, accessing the api making match trough the id and removing this to finally push the url into the badges list with history.push.
<h3>-Hooks-</h3>Hooks are optimal in React because allow us to mix the great of two words functions and classes. There are several Hooks in the react library but it is also possible to customize our own, they only need to follow the next principle: use must be the entrance of the Hook when naming it and no-conditionals inside the Hook.
Following these rules in the proyect we are going to employ hooks to make a counter.
Hooks only work inside functional classes so it is whished to convert one class into a hook this must be pass to be a functional one.
