Get best of the week

ReactJS: quick start

The React.js developer course is about to start , so another open lesson was held within the walls of OTUS. The following issues were considered at it:

  • What is included in the standard React.js feature set;
  • is it possible to build a complex application with this;
  • composition against inheritance;
  • functional programming - is it easy or difficult?
  • what is Redux and why is it needed.



At the end of the lesson, we developed a small ReactJS web application. The webinar was hosted by Nikita Ovchinnikov , a software engineer with over 8 years of commercial development experience.

What is React?


You will see the answer to this question by opening the official website, where it is written that React is a JavaScript library for building user interfaces.



Here you will find a wonderful tutorial, having studied which, you can use this framework immediately after reading it. If you want, see the tutorial in Russian, but this is not recommended. If it’s really bad with English, still open the original English version and use the Google translator. The fact is that official Russian-language sources sometimes lag behind in terms of translation (it happens that the documentation is updated, but the translation is not yet).

Why is React so popular?


For example, the statistics for the last 6 months , not counting the characteristic subsidence during the winter holidays , testify to React’s popularity : The following statistics



also show good results : Of course, statistics are far from everything, but nevertheless we can see from the sample that popularity high, and it is only increasing. Why is React so popular? There are a number of reasons for this:







  • it is really very well documented :
    - here is a tutorial ;
    - here is a guide for beginners .
    However, today the framework will not become popular if it is poorly documented;
  • React . , . ;
  • , — . JSX, , ;
  • . - , , , , , , , ;
  • . . , , , . React Angular;
  • (react-developer-tools, redux-dev-tools);
  • React , , .

React?


So, get acquainted - weakness # 1: React is not easy to learn . And here's why:

1. React is a completely different way of thinking. If you work with him, you really need to rebuild. In React, unlike other frameworks, there is only the concept of composition. The guys from Facebook designed their framework in such a way that it does not have any inheritance . And these same guys from Facebook quite logically explained this state of things :

"At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies . "

In fact, this statement is not unfounded, because in the OOP there are, of course, many well-known problems, for example, an excessive number of abstractions. In addition, not all developers are supporters of building incredible chains of inheritance and this is all, although, of course, somewhere inheritance is necessary and useful.

2. The second point that complicates the study of React is that it contains only recommendations and there is no rigid set of rules. Not only that, while studying the framework it is still bearable, but when you get to a real project, you will be very surprised. The fact is that there are no two identical projects in React, and in each company a project with React is completely individual. You get used to one situation, and then switch to another team and see that everything is different there: other libraries, other rules ... And again, you need to adapt and adapt. As they say, you have to pay for flexibility.

3. The third difficulty of learning - to successfully master React, a developer needs to have a high level. No, React itself is simple and easy to write. But in order to do something more or less complicated on it, you need to have good programming skills. If there are gaps in the fundamental knowledge of JS and TS, it will be quite difficult for you, and you will not understand everything.

Problem of choice


Now let's talk about the weakness number 2 - the problem of choice . It is a variety in which it is easy to get lost. There really are a lot of things. Hooks have recently appeared - a conversation has begun about the fact that classes are no longer needed, the React Hooks vs React Class battles have begun ... Everyone rushed to use hooks, and then they said that everything is not clear and returned to using classes, etc., etc. p ...

Actually, the correct answer to the question " React Hooks or React Class " does not exist. Or, to be more precise, the correct answer depends on the conditions in which you ask this question.

Another question arises: "How to check types"? See we have:


And here we have again the problem of choice, which, to be honest, sometimes unsettles. Of course, everything is very variable, and in the process of working with some decisions you will meet, but you will never “see” some. It all depends on the situation.

Again, there is Create React App , Webpack.js and Babel , so as soon as you start, you will have a question here, what to use?

The following agony of choice is associated with State . There is Redux and there is MobX , and inside Redux there are also redux-saga and redux-thunk . And it’s hard, without trying, to realize what is better to use in a specific situation.

Besides:

1. Router . There are about five, here are the most popular:


2. CSS-IN-JS . In the framework of this very good approach, by the way, there is also a choice:


To summarize, you can list the following React cons :

  1. High entry threshold. Without pretense, let’s say that it’s hard to learn React. Including because of the very large infrastructure.
  2. A lot of time to study. Once it’s not easy to learn, be prepared to spend time on it - otherwise, no way. You need to understand what's what.
  3. A very large variety in which it is easy to get lost. There is nothing to add.

What does “a lot of study time” mean? In fact, if you take any technology, no matter how softly you are laid out from the point of view of marketing, do not believe the words in the style of “You will learn in just two short lessons” - this is all nonsense, and does not work in the real world . Trite, but true: in order to become something really good specialist, you need to spend a lot of time. And in order to just start doing something, a lot of time is not needed.

What is the strength in, brother?


Despite all of the above, React is a very powerful technology. Firstly, if you are a professional, work will be very easy to find. Rather, it will be difficult to refuse it, because there are so many offers on the market:



The next plus is a lot of ready-made libraries and solutions. This is indicated by the same screenshot from GitHub (there are more than a million repositories):



If you just think that it would be nice to “gash this thing”, it turns out that it has already been made by someone. The technology is really very popular.

Besides:

  1. Diversity is a problem for beginners, but for a pro it is a plus!
  2. React contains a huge amount of good solutions.
  3. You can develop applications of any complexity.
  4. You can write in any style.

Typescript Support


React has just great Typescript support. This language is good if only because it can be used to write types that really work and really help. And with Typescript you can write a really strong type system. Essentially, Typescript is now a standard, and this standard is in React. Of course, you can not use it, preferring JavaScript. However, without Typescript it is very difficult to do something sanely difficult, because without strict types it is very difficult to work. It is also hard to predict how your decision will behave without strict types. This is difficult to do even with types, and without them it’s really sad ...

In general, be sure to work with Typescript, because this is a very necessary technology:

- https://www.typescriptlang.org/docs/handbook/react-&- webpack.html.



A couple of tips


Finally, I would like to give some recommendations. Today they talk a lot about OOP, and you can easily find a huge amount of information on this topic. And everywhere you will be written for the millionth time about the base class Animal, and from it - about Cat and Dog. Or about the base class Car, and from it - Ferrari and BMW. And this is all that they will show you from time to time and from one textbook to another, while your level of developer will grow at the same time as snails.

At the same time, clearly not enough attention is paid to functional programming, the understanding of which will really pump your skills. If you really learn to use it correctly and correctly. One of the most adequate books to date is freely available here and is strongly recommended for reading:



Why is it difficult to learn functional programming? Because very often books are overloaded with mathematics, academic complexity, etc. After the same book, you will succeed, because it is just wonderful.

Why is functional programming important? Because, such a thing as Redux is built on the basic foundations of functional programming. And having mastered at least basic functional programming, you really will begin to write code much better. The main thing is to understand everything correctly.

The second point that I would like to talk about is architecture. Our architecture is everything ! There is a very good architectural paradigm called ducks. This is about how to build React and Redux applications. This architecture is well worth recommending for practical use.

The idea itself is very interesting and represents a set of strict and at the same time cool rules that will make your decision structure understandable and readable. This is not a longrid, so it’s enough to read and understand the contents once. After that, you will be able to properly organize your applications. The link is attached.



Total


  1. Whoever says anything, React has a high entry threshold. Even with several years of JavaScript programming experience, get ready for what will be difficult and many questions will come up.
  2. React provides very great opportunities. But a lot has already been said about the pros, so we will not repeat ourselves.
  3. If you are interested in the history of the development of React, here is a good Roadmap .

That's all. If you are interested in the practical part of the lesson, watch the webinar from now on . A small test web application will be developed on ReactJS, the code of which is available on GitHub .

More articles:


All Articles