My First React Project
Published: 2023-01-07 11:10:36



The sole purpose of this article is to share my ideas about this framework. 
And If you already knew React, you can stay away.  
I recently covered up a React project created by the Altschool Africa learning space, and sooner this month or early next month, I will become certified, as a front – end developer. 
What are you going to be learning from me? 
I will not in this article question or answer what a React is all about or does, but I will let you know most precisely all the implementations required in the framework, and how easy they are in a brief.

1. How to structure a react project or File structure
2. Function components and class components
3. Props or (properties)
4. State object
5. Hooks (belonging to function components)
6. Component lifecycles



## File Structure

A React project is made of components which contain JSX(react virtual Dom) which are the building blocks of an app. 
A component is usually a js file which has a given custom name, whatever you may call it; and a path, which allows you to access the component.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jaytkaragab9bspv5u2t.png)

You know when we all first started with HTML CSS JAVASCRIPT, we have to reference a javascript file path in the src attribute of the script tag, inside the html file. This works the same with component(s), a component has a file path for reference(s) and the given name for anchor.
A component can be re-used by, export(ING) from the component file where it was created, to another file by import(ING).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4x1zgb567av16fus3tq.png)
React components are conventionally stored in one folder for quick easy access (as a well Architecture patterns). 
All react components should be conglomerated in a main js/App js file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6ycz1q6s1zi1migrqrj.png)
The index js file must contain other functionalities provided by react like the BrowserRouter.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx985e5n3bud8ndkm89c.png)
All about React is components. (This is common in other js frameworks)


## Function components and class components

Function component(s) and class component(s) are the two options of creating a react component which works the same. You can decide to use one of the two or both together, depending on what the component logic demands from you.
Function components, just as its name being derived, it is created using either the regular function or an arrow function syntax.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bw3kkhrbvqgdbo9cd85a.png)
The class component also is created using the class keyword, with name of the class component and extends a parent component. It has a constructor function, a super function and a render function. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w649lbgdbnn3hvbz02rs.png)


## Props or (properties)

Props in React allows passing of data into component and from one component to the other. As you know, data can be of any data type.

A component attribute can serve the props to be used. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qhb8m9nvbszscgmctyj.png)
A child component which are always enclosed/found inside a parent component opening and closing tag can also serve the props to be used.
The props object is used to call component props. 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ciiwh4kp6ig7nfzhq77.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngmxyjayjo4jxic9413d.png)
Two or more components in a same parent component cannot pass data directly among the children components; there has to be a passage of data from a child component to the parent, then to the other child component: This flow of data is a common terminology in React, so don’t panic. Once you know this, you can apply it.
If we need data inside a component, we use the props keyword.
If we don’t need data at all in the JSX, we omit the props. 
It depends on what your component logic demands from you.


## State object

The state comes as state object in the class component, but the state comes as useState() method as a react hook in a function component. 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynifdhhk5xcj16mcqdlq.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ziaahtdiobh379m8yg45.png)

The state helps the React virtual dom to change component data and does this by re-rendering the component dom. 
The state has a custom key – value syntax for storing data.
If I want to change a data from A to B when an event happens, the state object helps to do this change. And this is specially done by calling the setState() method in a class component, but in a functional component, the useState() method is changed by a custom (set state method) which works by changing the value property.
Here in this below, I want to change the JSX from post component to RejectResolve component. I have to call the setState inside the Card component methods. So, when I click the button, it displays RejectResolve component JSX.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t843bvp4p6aoic2qec1r.png)
The state object works the same with useState() method usually used in functional component. 
The useState also contain a key – value syntax, also, setState.
You can’t use the state object belonging to the class component inside a functional component, and you can’t also use a useState() hook inside a class component. 
If you want a dynamic change to be done in your component, the state makes this to happen.


## Hooks (belonging to function components)

Hooks belong to function components and must not be used inside a class component, why, because they are specially made for the function components. All hooks are imported from the react library.
Hooks hook into react features and more react features available for react app development. React features like the state, useEffect (react lifecycles), useContext, useRef, useReducer, useCallback, Etc.
We talked about the useState before this subtopic. Let continue to briefly explain what the useEffect does and the rest of the hooks:
**UseEffect** hook tap into two react lifecycles (componentDidMount() and componentDidUpdate()).
The useEffect method takes two arguments (function(), [dependency]).
The usage of the dependency argument determines which lifecycle method is used.
If the dependency argument is removed, by default the hook calls and utilizes both the componentDidMount() and componentDidUpdate.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nl9vqp3db2mo5boic8na.png)
If the dependency argument is an empty square bracket, the componentDidMount() is called standalone.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6elq4h0g6lms3r9x5rvk.png)
If the square bracket contains a variable to watch for changes/updates when the variable changes value, the componentDidUpdate() is called standalone.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s3ne3y9busd1dqjbg4lf.png)
**useContext** works/function to distribute state value to other components, and also distribute the change of state method to other components. In a simple other word, useContext helps to manage/control state, globally between owner/creator component and outside components.
To create a context, we createContext and give it a custom container variable on a global scope, and source it on the owner component by making the owner component JSX a child of the context provider

The createContext (global state provider) is better used with the local state (useState), to manage/control state, globally between owner/creator component and outside components.
The main usage of createContext is how this context are utilized by neighbor components: this is done by the use of useContext method.
The useContext works the same as the useState as in, they must return the state variable and the custom set state method

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44w8xacgzb3fytmc2lvv.png)
**useRef** does two things: access react DOM element and also store a mutable value which does not allow a component(s) or the page to re-render but only cause the update/re-render of the variable stored in the useRef hook.
To pick a dom element, you need a ref attribute place on the element and a value.
To refrain from global re-rendering when changes takes place in the dom, use the current property or directly put in values in the useRef(value) method.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kguc4fv6rix9cafzqt58.png)
**useReducer** is used when useState can’t contain the complex logic we desire, useReducer is used for a complex state logic action. Its usage is similar to useState, but useReducer allows for user to build custom complex state logic. It takes two arguments which are the reducer function and the initial state of data; useReducer(reducer, initial state). 
The useReducer returns two object, just like the useState. 
Initial state is often a literal object with it key and value. 
The reducer function takes two arguments which are action and state. The state represents the initial state from the useReducer and the action does the changes in the reducer function. The action argument and the dispatch method work together to bring about the change we want. The reducer function performs the state change of an object (initial state).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzrls4hmq7vdqaecncq1.png)
The dispatch method must contain a custom key – value object that will give reference to the action.
Complex calculations and data fetching must not be done inside the reducer function.
**useCallback** function hook prevent a component from needless re-rendering. It watches and takes two argument which are a function which performs the change and a variable, which only is able to cause re-render that component.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76y8sb3nfp1wivipuvo6.png)
**Custom Hooks**
Customs hooks are reusable functions containing your custom logic which you can import into your application.



## Component lifecycles

React class component lifecycles provide side effects to the dom, beginning from when the Dom is mounted to when the Dom unmounts. These lifecycles are all provided by all React Class components. 

## Mounting
**Constructor()** lifecycle always present when creating a class component. It takes a props argument. It contains a super method, the state object. So, it gets called all the time when mounting.
**getDerivedStateProps()** lifecycle integrate the state object with component props. What this does is that, when the component mounts, it always change the state of an object to the value of the specified props.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4pg8qnl75eugrwf5r7l.png)
**render()** lifecycle always present in your class component to output JSX.
**componentDidMount()** lifecycle gets called when component did mount and perform the specific task given to it. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/un5wpzq1l58oysee5uyc.png)

## Updating
**getDerivedStateProps()** lifecycle is not only present in the Mount lifecycle, but also used when a component updates. 
**shouldComponentUpdate()** lifecycle returns true or false. When true, the component can update any of it state data or props. When false, the component becomes static.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b38ndj254khp2222ixxo.png)
**render()** lifecycles is not only present in the Mount lifecycle, but also get called when component did update.
**getSnapShotBeforeUpdate()** lifecycle takes two arguments which are previousProps and previousState. This lifecycle when called records the previous value for the state and the specified props which can stored or utilized. getSnapShotBeforeUpdate method must be used together with componentDidUpdate method.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmj30f6t2vlgthxwp9g4.png)
**componentDidUpdate()** lifecycle gets called and performs the task given to it when the component updates.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ak5yedi5aw4px8i5120e.png)

## Unmounting
**componentWillUnmount()** lifecycle gets called and performs the task given to it when the component unmount. It performs the task before the DOM unmounts.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kaax6h2ksgdapzhb63v.png)