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!
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!
Sounds interesting, but what do I need to get started with React?
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).
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.
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! And don't forget that at the Wild Code School, our training programmes specifically focus on React. In a few months you can become a real expert and you will be able to use your new skills in different projects!
Check out our React training programmes on our website.