A Beginners Explanation of Components, Props and State in React

As a beginner writing this after spending a week with REACT, this is most likely going to come across like the following link:

My Explanation Visualized

React - How do you speak it?

It feels like the creator of react (Jordan Walke/Facebook/META/MIT?) really hated document.createElement,
document.querySelector("").appendElement and switching between screens to write HTML and JavaScript in general. So out of spite JSX was born, or at least this is the conclusion that I have come to.

Note: Allegedly React was made it so that large amounts of code were easier to read, but as a student with just over a week in I don't believe it.

JSX appears to be .innerHTML("") on steroids. And just as I was typing this blog, and coming to the conclusion "wow that's has to be dangerous" I came across this nugget via the following link JSX:

"By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks."

Elements, Components and Props Oh My!

Elements go inside of components and are how things get displayed on the DOM. Elements are apparently cheap to create (I'm assuming that's cheap related to computing power as REACT only updates what's "new" when it renders?). They can contain multiple HTML components, variables, and object and array values. If you are mapping an array of elements make sure to use a key!

Components (syntactically always get started with a capital letter) and are the blocks which make up the hierarchy of your application/program/website. These components can have parents or children (children must be exported in the child component and imported into the parent), not sure how many generations were allowed to use. More on that in a future blog.

Props are magical portals which allow you to share...stuff, with other components. That is so long as those Components have a parent child relationship. You can share props indirectly with two sibling components, if the parent component gets involved...yeah that sounds right?

These props are the logic that allows you to pass information from one component to another. This comes in handy when you have an event listener in a child component but need to re-render a parent component from that child component event. This is done using state in the parent component and by passing a callback function through props to the child. Props can also be used to pass fetched API data down form parent to child components. One thing to know about props is that they have to be "pure", meaning that if you pass a function with a parameter and argument you cannot alter that argument inside of the prop-function. So don't pass any count+= functions as props.

That should have been absolutely crystal clear, now onto state...which I'm currently not a fan of. Hopefully that changes soon.

An Ode to State

For a good day and a half I thought I always needed the state variable inside of the state setter function because of a misinterpreted Scrimba video, so I may still be a little bitter.

Here's what I believe to be important about state:

1. You have to import it - {useState} in the component you are using it in
2. Its comprised of a state variable, a state function and an initial value to which your state variable is set
3. You should use state when you need to change something in your component and re-render the page
4. It will be initially confusing especially if you watch the Scrimba video I did.

The state variable gets set to an initial value in your component. Then if you want to change that initial value, you need to use the state function. The state function can change the value of the state variable to what ever you wrap the state function with. When this setter function is called it will re-render the page and assign the new variable value to the state variable.

This was an oversimplified explanation of state, components and props. You can find out more about the items mention above in the following link.