React: JSX, Components, and Props
Tags: react, webdev, beginners, programming
Published: 2022-07-31 20:25:00

Switching to React from vanilla JavaScript, many programmers will start to understand why many companies today use React (Facebook, Airbnb, etc.). The process of coding in React makes an easier understanding of a programmer's code and better layout of that code, especially in the HTML of a webpage. One of the first things you'll learn are JSX, Components, and Props. 

##JSX
JavaScript XML, also known as JSX, is a syntax extension that is read through Babel in React that allows programmers to write HTML inside their JavaScript code. Babel recognizes JSX and knows that it is not HTML. Let's say we have an App component that contains a header and paragraph element:

```javascript
function App() {
  return(
    <div>
      <h1> Hello, World! </h1>
      <p> Hope you have a good day! </p>
    </div>
  )
}
```
Whenever the webpage loads, JSX knows exactly what we want to show on our webpage. This process allows our code to become declarative instead of imperative. Instead of writing out exactly *how* our code is done in detail (imperative),  we can say *what* we would like to do (declarative). So instead of writing `document.createElement()` and `document.quereySelector()` like in vanilla JS, we can simply write our HTML elements inside our JS files!

##Components
As shown in the example above, components are one of the most essential parts of React that is different from vanilla JavaScript. Components help show where certain parts our code goes. By using components, it helps create a cleaner and easy to follow layout of our code, as well as the layout of our webpage. A component is a function that returns JSX. This function tells React what the properties of the component should look like once applied to the DOM. A component's function **must always** start with a capital letter. It also can only return **one** HTML element. For example: 
```javascript
function App() {
  return (
    <div> Hello, World!</div>
    <div> Goodbye! </div>
  )
}
```
Since there are two `div` elements being returned, React will throw back an error saying that it can only return one element. An easy fix to this kind of situation is putting `<>` and `</>` outside of the two `div` elements so that, in React's eyes, the component returns only one element.

##Props
![Opra Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vz6w0gh7qx0bw6d9epj9.png)

The arguments that components take in are known as props. In most applications, there is a *parent* component consisting of multiple *child* components. A parent component is the **top-level** component that contains pathways to other components(child components). 
```javascript
function App() {
  return (
    <div>
      <AnimalDetails />
      <Comments />
    </div>
  )
}
```
From the example above, `App` is the parent component of the child components `AnimalDetails` and `Comments`. If we wanted to pass information into our child components from the parent component, we can assign props to each of them:
```javascript
function App() {
  return (
    <div>
      <AnimalDetails 
        name = 'Max' 
        species = 'dog' 
        personality = 'Loves to go on walks!' />
      <Comments commentsText = 'Max is a really good boy!' />
    </div>
  )
}
```
Now that our child components have props with information we want to pass down, we can assign these props to different elements to be displayed on the webpage. 

**NOTE:** Props cannot be passed between child components, only from a parent component.
```javascript
function AnimalDetails (props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <h3>{props.species}</h3>
      <p>{props.personality}</p>
    </div>
  )
}
```
Whenever we want to call our props into our JSX, we must contain them inside `{}` then use `props.` before the key name to access them. 

##De-structuring Props
As you can see from our previous example, if there are multiple props being passed down, our code starts to look very cluttered with `prop.`. An easy solution to make our code cleaner and easier to read, we can use destructuring. From our last example, instead of passing `props` as an argument of our `AnimalDetails` component, we can pass down the key names we assigned our information to: 
```javascript
function AnimalDetails ({name, species, personality}) {
  return (
    <div>
      <h1>{name}</h1>
      <h3>{species}</h3>
      <p>{personality}</p>
    </div>
  )
}
```
Whenever destructuring props, the key names being passed down must be contained inside `{}`. Now, we can just pass the keys and have clean and concise code that is easy to read!