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
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.
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:
- 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.
- On line 11 we add the place where our component will render on the view.
- On line 13 we specify what we want to render using the React.DOM so we can create an
- On line 14 we specify where we want our component to be rendered.
- 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! 🎉
> You can learn more about ES6 here.
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.
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:
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. :)