DEV Community 👩‍💻👨‍💻

Cover image for React's Potential
Jake Pucci
Jake Pucci

Posted on

React's Potential

   Facebook has created one of the webs most popular frameworks, React. 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

One of Reacts greatest feature's are it hooks. React hooks are built in tools that Engineers can utilize to improve their code.

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
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. 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 components to child 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

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...

Top comments (4)

Collapse
 
teejaydixon profile image
Tahjg Dixon

Great blog for sure!

Collapse
 
konstantinstanmeyer profile image
Konstantin Stanmeyer

Great piece of writing! Definitely coming back to this :)

Collapse
 
ericahashert profile image
Erica Hashert

Love this - interesting read!

Collapse
 
elliotmangini profile image
Elliot Mangini

Nice one, Jake!!

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈