React Basics for Dummies

By the time you have searched "react" and come across this blog post, you probably have finished some course materials on HTML, CSS, and JavaScript. Now with some basic knowledge of how to use them to create cool websites, there is something even cooler called "React".

What is React?

You can find the official definition of React here, but for those who prefer definitions straight to the point, I would put it this way: it's like a built-in software (officially called a "library") installed inside JavaScript, so you can use that software to write your codes more easily.

Imperative vs. Declarative

If I were to pick one of the many benefits of using React, I would definitely say that React is declarative (versus imperative). Let me explain the difference between the two in a very simple way. Let's say that you order your assistant (we all have a personal assistant to run your errands, don't we?) to go to Starbucks the next building to get you a cup of coffee. An imperative way of your order would look something like this:

1. Go out the door of this building
2. Turn left
3. Walk 10 meters
4. See the sign for the name of the building
5. If the sign reads "Starbucks", go inside the building
6. Order a grande sized iced vanilla latte
7. Take out a wallet
8. Pay the full amount for the order
9. and so on...

I already got tired of writing more commands and therefore stopped here, but until you finally get your coffee, the list would go on, and on, and on. How would a declarative way of your order look like then?

1. Get me a grande iced vanilla latte from Starbucks next door

How simple is that? React allows us to give an order in a much simpler way to get the same result as you would do in the vanilla JavaScript!

I could spend the whole hour talking about the other good benefits of using React, but since I don't want this blog post to be so bombarding (honestly I feel like I have written so much already), let me introduce what React is actually composed of.

Components, Props, JSX... what?

React is composed of various "components". Components are the building blocks of React code. It is a JavaScript function, always starting with a capital letter to differentiate from the regular functions from vanilla JavaScript. A React component would look something like this:

function IAmAComponent () {
   return <h1>Hello, I am a component!</h1>
}

A component always returns what's called JSX. JSX, JavaScript XML, allows us to use HTML in JavaScript. (See that h1 tag that looks familiar?)

You may have seen the definition of component as "a function that takes in props and returns JSX." Okay, we now know component, and we also know JSX, but what are props?

Before I explain what props are, I would have to point out that I have said above "components are the building blocks of React code." What does that mean? You will create each component as a block to build, and place them in the top level component. From that top level component, you have access to each of the building block components. For example, an App component as a "parent" component, could have a "child" component called About. As the naming suggests, a "parent" component will pass down "props" to its "child" component(s). When the parent component calls child components, it will assign "props" by giving the prop's name and what that prop points to.

//Parent Component (App)

const movie = {
  title: "Inception",
  genre: "Action/Sci-fi",
  released: 2010
},

function App() {
  return (
      <About
         title={movie.title}
         genre={movie.genre}
         year={movie.released} />
  );
}

//Child Component (About)

function About({ title, genre, year }) {
  return <h2>{title} is a {genre} movie released in {year}.</h2>
}

From the example above, the App component is assigning props when it calls the About component. It's giving "instructions" on what each prop means. For example, title={movie.title} means the prop's name(or label) is title, and it refers to the value of the movie object(which was assigned as a variable on top)'s title key. You could name your prop any way you want (see the prop year above was named year, not necessarily released?), but by convention it is always best to come up with names that are relevant. It's like your mom (parent) telling you as a kid (child) "Hey, I'm going to give you this prop. (handing a prop) This prop's name is title. It means {movie.title} (the title of the movie). Whenever you play in your world, you say title to refer to {movie.title}. OK?"

Then, when the child component writes its own JSX in itself, it can use the prop name title to refer to the {movie.title} which was originated from the parent component.

This really is just the very basics of the general concept of React, and there will be a whole lot more when you actually dive into it. But having this basic concept well drawn in your head may help you understand the awesome features of React moving forward!

Resources

• https://en.wikipedia.org/wiki/React_(JavaScript_library)