React in Concept — The Terms and Idea

What is React

React is a frontend UI library. The purpose of this library is to help in creating frontend applications. Some of the benefits of React are…

  • Reactive Data: React with the use of state and the virtual dom is able to monitor for changes in your application “state” and update the UI which is nice versus something like jQuery where you would have to write out the logic to update the DOM when necessary.

State vs Props

While you’ll also have standard variables, much of the data in your components will fall into one of two categories, state or props.

Lifecycle

Lifecycle is essentially saying that certain things should always happen at certain points. For example, for our <Human/> component when it is created it should be given a birth certificate and has a birthday every time it’s a year older. When the component is removed it gets a death certificate. The lifecycle of a component is that it mounts, updates, and is removed from the DOM. We can write out lifecycle for our human component as such…

React.useEffect(() => {
console.log("You are born, you get a birth certificate")
return () => console.log("you have died, you get a death certificate")
}, [])
React.useEffect(() => {
console.log("Happy Birthday")
}, [age])

Context

Imagine your application is a building with floors. At the top floor, we have our <App/> and as a child, we have <Floor80/> and then <Floor79/> and so on. You have a piece of data you want to take down to Floor 1. By default your only option is the stairwell which means you have to walk down to floor 80, then floor 79, floor 78, etc. Essentially this is the process of passing props to one component, then that component passing that data as props to its children, and so forth.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Merced Coder

Alex Merced Coder

59 Followers

Alex Merced is a Developer Advocate for Dremio and host of the Web Dev 101 and Datanation Podcasts.