ReactJS: quick start

The course starts very soon. “React.js developer”Therefore, 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;
  • Is functional programming easy or hard?
  • what is Redux and why is it needed.

At the end of the lesson, we developed a small ReactJS web application. Webinar held Nikita Ovchinnikov, 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?

React speaks of popularity, for example, statistics for the last 6 months, except for the characteristic subsidence during the winter holidays:

Good results are shown and following statistics:

Of course, statistics are far from everything, but nevertheless we can see from the sample that popularity is high, and it is only increasing.

Why is React so popular? There are a number of reasons for this:

  • he is really very well documented:
    – here tutorial;
    – here beginner’s guide.
    However, today the framework will not become popular if it is poorly documented;
  • React can be used on any device.. However, it should also be noted here that today almost any framework can be used on any device. But more real advantages with us will go lower;
  • the framework works declaratively, its main features are composition and a component approach to development. Just remember the same Jsx, which at one time went very well, and now it is very popular;
  • work with the framework is easy to start. So it is, but it should be added here that it may be easy to start, but it is difficult to develop, that is, to achieve serious success in mastering is not so simple what needs to be taken into account;
  • you get complete freedom of action. The framework is very democratic and does not dictate any rules to you. You can use any library, you have the right to choose the tool that is closer to you, you can use anything, anytime. This React compares favorably with the same Angular;
  • advanced debugging tools at your disposal (react-developer-tools, redux-dev-tools);
  • the world of React is extremely diverse, it has many ready-made examples and libraries, which is good news.

Is React Easy to Learn?

So, get acquainted – weakness No. 1: React is not easy to learn. And that’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 in it there is no inheritance. And these same guys from Facebook are quite logical 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.

Strictly speaking, 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 related to the fact that it contains there are 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 is for successfully mastering React. the 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 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 recently appeared – a conversation began about the fact that classes are no longer needed, the React Hooks vs React Class battles began … Everyone rushed to use hooks, and then, said that everything was not clear and returned to using classes, etc., etc. P…

In fact, 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 are Create react app, Webpack.js and Babel, therefore, as soon as you start, you will have a question here, but what to use?

The following agony of choice is associated with State. there is Redux and have Mobxand inside Redux there’s more 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, we can list the following cons React:

  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. Since it’s not easy to study, be prepared to spend time on it – otherwise, nothing. 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 some kind of technology, no matter how softly you are laid out from the point of view of marketing, do not believe the words in the style “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 now:

The next plus is a lot of ready-made libraries and solutions. This is evidenced 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. In essence, 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. It’s hard 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 it all will be shown to you from time to time and from one textbook to another, while your level of developer will grow at the same time with the speed of a snail.

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 in the public domain. here and strongly recommended 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. 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 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. Link attached.

Total

  1. Whoever says it, 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 we have already talked a lot about the pros, so we will not repeat ourselves.
  3. If you are interested in the history of React, here is a quite suitable roadmap.

That’s all. If you are interested in the practical part of the lesson, see the webinar from this moment. A small test web application will be developed on ReactJS, the code of which is available on Github.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *