A Crash Course Intro to React

6 min readDec 2, 2020

https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained

Compared to the horror of organizing pure Javascript code (I’m dramatic, sue me 🤷🏾‍♀️), React is a dream. If you are at all familiar with Ruby and Ruby on Rails, I’m sure you can appreciate a framework/library that makes your life a little easier. That being said, before approaching React I would advice you to learn some HTML, and JavaScript as it uses a JSX (JavaScript XML) syntax that lets you combine both, a smidge of CSS wouldn’t hurt either. Oh, you already have? Good for you! Let’s dive into this crash course then!

What is React?

React is used for front-end web development, it’s what your user will see and interact with when they come to your website or web application. You might be thinking, “what makes React so special?”; there are several features that make React shine:

https://github.com/learn-co-curriculum/this-is-react-readme

What is a React Component?

We mentioned earlier that React lets you compose complex UIs from small and isolated pieces of code called “components”. Components allow us to design, in separate sections, the presentation and functionality of our code. Web application can become very intricate and the larger the project, the more difficult it becomes to organize. That difficulty had led me to the idea for a previous blog, Pseudocode is King, in which I discuss pseudocode and how it can make your life so much easier; components in React are another way of achieving organizational bliss.

Let’s take a look at what a component would look like and how that would integrate into your app:

We’ll start off by create an Article component:

Sidebar: If we decided to just render this component, we’d have something like this rending on the DOM:

Next, we’ll create another component called Comment:

Now we can incorporate our components into a top-level parent component that we’ll call App:

Now that we have that all set up, we can see that both components render in the DOM!

What is a React Prop?

Prop is short for property. Props allow us to pass values into our components and is passed down from a parent component to its child component so that it can access, and potentially change, a property that is defined in the parent component. Props can be anything, objects, like arrays and functions, strings, and so much more. Lets take a look at an example:

Our MovieCard Component Hardcoded (Without Props)

To start we’ll create some props that we want to pass down to our MovieCard component:

Now, we’ll pass those in to MovieCard:

Et voila! We have ourselves a MovieCard component with dynamic prop data:

What is React State?

A state in React is simply data that is changed within a component, unlike with a prop, state allows us a way to track and update information within a component without requiring updated information from its parent component. Let’s see an Example:

Let’s say we have a component that displays a number, every time the component is clicked we should increment that number by 1. If we track this number in state then our component can update without needing any props passed down!

As mentioned above, to change the data in a state, we need to use the ‘setState’ method at which point we can assign our state a new value!

I’ve included above the basics of React to get you started! I’ve tried to be as brief a s possible, but the resources below go more in depth! Happy coding!