React: JSX, Components, and Props

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:

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:

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

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

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:

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.

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:

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!