React Basic Concepts

On this post I’ll talk about some basic concepts that are fundamental to learning React the right way. If you want to start sailing on these waters, this might help you.

What is React?

According to React’s website, it is

a JavaScript library for building user interfaces.

You’ll often hear people say that React is the V in the MVC. MVC stands for Model View Controller and it’s a design pattern commonly used on the back end side of development, which have been brought to the front end side by many JavaScript frameworks/libraries such as React itself, Angular, Vue.js, etc.

MVC

Before we start diving into React, it would be wise to understand MVC a little bit better. Those three letters represent layers that have their own specific responsibilities on a project:

  • Model: stores the data and tells your views and controllers about any state changes on them, so everything is up to date.
  • View: when in the front-end side of things, we say that the view is our HTML files, it is what you see. Hence why people say React belongs to this layer, once we create “custom elements” to be placed inside our HTML files.
  • Controller: it is the glue between the model and the view layers. It is inside the controller that all of your app’s “business rules” will be, aka this is where the logic lives.

Components

I’ve mentioned above that we can create “custom elements” with React and attach them to our views, these are called components and I’d say it’s one of the coolest things React provides us. Breaking your project into smaller chunks always help readability, organization and subsequently, code maintenance.

Here’s an example on how to make a React component:

Now, let me explain what’s happening up there:

  1. On lines 6–8 we import the React library along with the React DOM and Babel — don’t worry, I’ll talk about those last two later on.
  2. On line 11 we add the place where our component will render on the view.
  3. On line 13 we specify what we want to render using the React.DOM so we can create an h1 tag.
  4. On line 14 we specify where we want our component to be rendered.
  5. Finally, on line 15, we use ReactDOM.render() to render our component.

Phew! If you’ve tried to reproduce the code above (highly recommended) on your machine, you’ve just created your very first React app! 🎉

Babel

Babel is a JavaScript compiler that lets us use new JavaScript features that aren’t yet supported by all browsers. If you’ve coded JavaScript it was probably the ES5 version (EcmaScript 5) but there’s a new version called ES6 that brings a lot of cool features to it. Besides transpiling ES6 to ES5, Babel is also a requirement to use JSX.

> You can learn more about ES6 here.

JSX

JSX stands for JavaScript Extension and it is a JS syntax extension. It kind of looks like xml but it’s just plain old JS.

JSX is a statically-typed, object-oriented programming language designed to run on modern web browsers. — jsx official website

JSX makes our lives much easier when coding components:

A best practice is to write React components as ES6 classes, so that’s why the example above is a little bit different from the previous one.

Ok, but where’s the JSX? It’s on line 15, <h1> Hello World with JSX!</h1> is JSX code.

The Root class will return us a React component that we can pass to the ReactDOM.render() function along with where we want it to be displayed.

And here’s the result:

index.html

To sum it all up:

  • React is the V on the MVC design pattern
  • It is component-based
  • Babel is a transpiler and JSX is a JS extension
  • How to create components with and without JSX

That’s all for now. I’ll be writing a series about React as I learn it, so in a way I’ll be sharing with you my learning path.

English is not my first language so there may be some grammar errors and typos. Feel free to correct me about any of those. :)