Learn React JS. How to React.

on December 2, 2017


Let's learn React JS. What is ReactJS? It is a Javascript library for creating user interfaces and maintained by Facebook. You can use React to render HTML on the page and handle its events. In other words, it is a 'View' part of the MVC pattern. Also, React has a vast ecosystem, which allows the creation of powerful and modern applications.

Why should you not use React?

You should not use React or other trendy and modern tool like Angular or Vue without reason. Remember, if you build an application for business, you should use the technology that will help to reach business goals. Do you need a landing page? Use plain HTML or a SaaS solution. Do you need a blog? Use WordPress or similar platforms. Do you need JS to open dropdowns and enable modal windows? JQuery will be fine. Yes, even in 2017. Also, if you need to create a web application, you can use Ruby on Rails or Django frontend to build MVP, and it will be enough. Keep it as simple as you can, do not overengineer, and do not increase the cost of the application by using unnecessary technologies. Therefore, use React for complex frontend logic, reusable components, and if you have to scale your app in the future.

What about Angular and others?

Yes, there are a lot of other JS frameworks and libraries that will help to build a complex web application. They all have pros and cons, and the disputes about which is better have been going on for many years. Let's describe the advantages of React. It is extremely fast because it has a virtual DOM, so it does not change the real DOM when it is necessary. It is lightweight, only 109kB, and 35kB gzipped in v16! It has an enormous number of support libraries and tools. Facebook is a maintainer of React, so it will be actual and in development for many years.

What is JSX?

JSX is a JavaScript extension that allows writing HTML-like code inside the JS. For example,

export default class MyComponent extends React.Component {
  render() {
    return (
      <div className="class_1">

will render to:

<div class="class_1">

Can we use ES5 syntax instead of JSX? Technically yes, but don't do this; it is a path full of pain and darkness. We need to transpile our JSX code to browser-compatible ES5 using Babel, Webpack, and some other tools. Should we spend all our time on Webpack configuring instead of coding? Yes, we can, but not should, because the React team developed the create-react-app boilerplate with zero configuration. Let's try it!