React's Potential
Tags: react, beginners, programming
Published: 2022-09-15 18:05:07








&nbsp;&nbsp; Facebook has created one of the webs most popular frameworks, [React](https://reactjs.org/). It's popularity has been tremendous and some of the biggest companies have chosen to use React as their website framework. Some examples include...
-  Facebook
-  Instacart
-  Netflix
-  SalesForce

### With companies like these backing React, the framework's capability almost speak for itself. 
![an image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65e37sae03euqy8clstz.jpeg)
####One of Reacts greatest feature's are it hooks. React hooks are built in tools that Engineers can utilize to improve their code. 
<br>
<br>
<br>

#useState
#### useState allows Engineers to update the **state** of their functions. State is data that is dynamic in your component: it changes over time as users interact with your application. useState is probably the most common React hook as it allows for dynamic user interactivity. 

#useEffect
#### useEffect is a React hook that allows Engineers to tap into the _side effects_ of a function. Side effects of functions happens when a function is called and it causes change outside of the function itself. You can "hook" into this change via useEffect. I have found this to be the most useful for me when it comes to fetching data from  an API when a component loads. In this example, the component loading is the main function firing and the data fetch via useEffect is the side effect. 


![components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8g7waw3r1fbxn9a6xju.jpeg)
Another Engineer-friendly tool React provides are 
#components. 

#### Components are little bits of re-usable code blocks that are similar to JavaScript functions but return JSX. JSX or JavaScript XML, is the combination of both JavaScript and HTML and allows Engineers to write HTML in React. Components are really good at organizing our code and make it easy to extract the [boilerplate code](https://www.educative.io/answers/what-is-a-boilerplate-code). Components are a crucial and powerful part of React but they would be almost useless without...

#Props
#### Props allow us to pass information from [parent](https://www.pluralsight.com/guides/how-to-handle-communication-between-parent-and-child-components-in-reactjs) components to [child](https://www.pluralsight.com/guides/how-to-handle-communication-between-parent-and-child-components-in-reactjs) components. Props can hold all kinds of information including strings, numbers, booleans, objects, even functions. In the example below, "actors" is the prop being passed to the "Actors" component.

![actor props](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msg4a6s06acxnscz402k.jpeg)

 To break this down to a simpler level, let's use this analogy. Let's say we have a big tasty burrito in front of us. Notice how the tortilla carries all the ingredients inside of it. You can easily carry the burrito around with you and have access to all of its tasty ingredients within. Amazingly, this is just like React! Components are like the tortilla carrying all of the ingredients (props) inside! Just like the ingredients of a burrito, props can be anything you chose. 



### In my opinion, React is the most capable webpage wireframes currently available. Its use of props, components and hooks makes its modularity and ease of use stand out. I  hope this post helped educate or inspire your future React Use!... also make you a little hungry for a burrito...