For most of us, when we start looking on how to become a front-end developer, we think it's enough to learn HTML and CSS. Some already know that they also will need a strong knowledge of Javascript. You will soon find that it is becoming more and more common to master this new language: REACT. You might have already heard this, "React is nothing more than Javascript".
Whether it's the first time you've heard this or you've already stumbled upon it during one of your searches, don't worry. In this article I will tell you how to get started with React!
Story time
React is a library created by a group of developers at Facebook. They realised that it was difficult to maintain and control all the code necessary for the platform to work properly, as the connections between data and visual rendering grew exponentially as Facebook’s web app became bigger.
To solve this problem, they created a library that allows them to optimise the visual rendering of the platform when the data changes and simplifying the development of the platform by dividing each part into small reusable components. This library is called React.
Facebook has started to use React on part of its web app. Following positive results, the Instagram app - also owned by Facebook - was developed entirely on React. Other major web apps soon became interested in React and integrated it into their technology stack: Airbnb, Netflix, Paypal or Tesla now use React.
But how does React work?
We could write hundreds of articles about it! I'll try to summarise the main ideas here to give you a general idea.
React is based on components. These are small bits of interface, such as a navigation bar, an image, a form... In turn, these components are defined by other smaller components such as buttons, titles, paragraphs and so on.
The behaviour of all these components is defined by their internal state and by defined properties. Any change to this internal state or these properties (the user goes from logged in to logged out, a click on a button to change the language, etc.) results in the component being rendered again with the new properties and the defined state. All this operation is based on what is known as the "component lifecycle".
This method has immediate advantages: for example, writing the code only once to render a button. Then, we define whether it is a primary, secondary button, a contact form or a registration form through the properties and status. So we get a reusable and scalable code, which means that we have to write much less code. Only advantages!
Another strength of React is the way in which components are updated with DOM (Document Object Model). React works with a virtual DOM. React creates a hidden memory of the data structure, which calculates the resulting differences and then efficiently updates the DOM displayed by the browser. This guarantees a significant increase in performance compared to doing the same code Javascript only. If you are interested to find out more, have a look at the official documentation about the virtual DOM.
Sounds interesting, but what do I need to get started with React?
If you ask any web developer on how to get started with React, they’ll probably tell you this: "Nothing! React is just Javascript!"That's one of the great advantages of React: it's first and foremost a Javascript library. So its code is just an extension of the features we already know with Javascript.
Now let's compare React to other alternatives such as Angular, Vue or Ember. To work with these frameworks, you need to learn knowledge how it works and its syntax. With React, the advantage is that you write it just like Javascript.
As I said before, React is based on components that are nothing more than Javascript classes programmed by the React development team. As users you simply used these pre-programmed classes, with their methods and functionalities, to create an application that meets your requirements.
React is ideal for the most experienced developers. Within a few hours they can start assembling applications with complex functionalities, since the logic they will use is, once again, that of Javascript.
But if you're new at programming, React is also a very good alternative for you. Once you understand how its structure works and the flow of information within its components, React will become the ideal environment to put your Javascript knowledge into practice and to improve your skills as you create new apps. Because, I'll say it again, React is just Javascript!
Don't start from scratch, use the work of others!
Although React has often been compared to frameworks such as Angular, Vue or Ember, React's core code offers less functionality than these. Angular, Vue or Ember have many more internal tools to develop functionalities such as page architecture management, updating the UI (User Interface) when receiving new data or the general state of the application. In React, you are in charge of doing all of this.
On the one hand that's good, because you'll be able to do it your own way. But on the other hand, it's still a bit scary to have to write all these features from scratch... But that's far from being the case!
For a start, all these features are placed inside components which, as I said, are the basis of the React code. If you remember, the advantage of using components is that we can reuse them in different places in our app, right?
So that's a good news! We can also reuse them in different projects as packages via Node's package manager: NPM (Node Package Manager). We can install a package to manage the architecture of our project, and another package that will make sure that our components such as buttons, forms, links, have their own style (like Bootstrap).
Just Javascript... but what about HTML and CSS?
I know I've said this a few times already, but React is just Javascript. But where is the HTML and CSS code in all this?
In the end, React is about setting up the UI (User Interface) logic, i.e. to explain what logic we're following as we program. The logic is written in each component. It is also in these components that we will write our HTML code.
Indeed with React we will mix the Javascript code, in charge of defining the behaviour of components, with the HTML code, in charge of defining their structure. This is done with JSX (Javascript XML). JSX will transform the tags of the HTML code into elements that React understands and knows how to handle.
Since CSS is designed to give life to the HTML code (colours, font, spacing, positioning...), we will be able to continue writing CSS code in the same way as before, although some NPM packages already exist to allow you to write CSS code in Javascript (such as Styled Components or Material UI).
Alright, I'm convinced! How can I create my first project with React?
You will find the most information on React in their documentation. I highly recommend the introductory tutorial. The React documentation contains many step-by-step guides with examples on both the most basic and more advanced notions as well as very specific concepts.
If you follow this documentation you will see that there are two ways to start using React. One way is to import it into your HTML file with a script tag. With this we get direct and fast access to start using React. This is a good option for working on a small app.
The other option is to create a work environment with a tool to control and manage all the packages you install and use via NPM. One of the most popular tools today is Webpack with a code transpiler like Babel. So do we also have to learn Webpack and Babel?
Luckily not! It is always advisable to learn and know these tools, that's for sure, but you don't need to know them to start working with React. This is thanks to a tool developed by the Facebook team itself called create-react-app. This is an installer package that will create the full environment necessary to be able to get started working with React and use all of its features without having to worry about anything else but programming!
Wait, there's more!
You think that's all React has to offer? Just web apps? Well, there's more! All the features and working methodologies used by React have been extended to React Native and React 360.
The first one, React Native, is a framework that allows the development of native apps for Android and iOS. The second, React 360, allows the development of augmented reality and virtual reality apps. So, once you start mastering and programming React's web apps, it will be quite easy for you to move on to mobile apps and even virtual reality ones!
Another strength of React is that it is an Open Source project: its code is open to any developer to inspect and to work directly on any possible improvements. You can find the code on GitHub.
So, if while reading this, you feel like trying it out and start writing your first lines of code with React, don't hesitate, go ahead and start trying it now! Check out our Web Development Bootcamp!
