Let's explore a popular framework. What is React?

Contents

• What is React
• Why is it needed
• How it appeared
• How it works
• Pros and cons of using
• Comparing React with other frameworks. Which is better to choose
• Useful materials from the editors of Skillbox.by

What is it?

React is a framework for the JavaScript programming language. It was created by Facebook for developing web pages.

Why is it needed?

• Simplifies the creation of interfaces. Thanks to React, developers can easily break pages into small elements - components. These are the parts that make up the entire page.
• Helps create complex projects. Developers describe complex processes in code using the React toolkit.
• Speeds up development.The framework ensures quick and easy implementation, reuse of individual components and website pages. This saves programmers time during development.

How it came about

In 2012, Jordan Walke and his team began working on React. They wanted to solve the problems they encountered when developing the appearance of pages. For example, after many years of working on the project, newcomers could no longer understand the code. Then React came to the rescue. Technology has adjusted everything to a standard that everyone can understand.

Thanks to the support of Facebook and other large companies, the framework quickly became popular. In 2016, React took a leading position among front-end libraries due to its light weight and efficiency.

How it works

Every framework and technology has concepts and operating principles. A programmer needs to know them to use them in development.

Basic concepts and operating principles of React

• Components. Components in React are the building blocks of a user interface. Each component can be inserted into a page multiple times.
• Virtual DOM.The DOM is the structure of an HTML document, which is represented as a tree. The virtual DOM is a copy of the real DOM that is stored in memory. It's as if you first wrote something in a draft and then transferred your work to the final version.
• Props and State.These are ways of managing data in React. Props are properties that are passed to components from other components. State is their internal data. Props can be compared to human genes. Then State is, for example, the knowledge we receive in school.
• Hooks. This is a mechanism that allows you to write code without using classes - models for creating objects of a certain type.
• Unidirectional data flow. Data in React is passed only in one direction - top to bottom, from the parent component to the children. This simplifies debugging, since you can always understand where the data came from.

• React Developer Tools.There are special tools for working with React — browser extensions that help check your code for errors.
• JSX. JSX is a JavaScript extension created by Facebook for use with React. JSX uses HTML syntax to create objects.

Pros and cons of using

Pros

• High performance. React is fast thanks to the virtual DOM. Imagine you have a book that needs to be updated. Instead of rewriting every page, you change only the lines you need. This is how React handles changes on the site.
• Scalability.React makes it easy to add new features to a site or application. It's like building a house and adding new rooms as needed, without tearing down the old ones.
• Ecosystem.React has created an entire ecosystem of tools and libraries that help developers solve various problems. This simplifies the development process and speeds up the implementation of new solutions.
• Large community.Many developers use and support React. This means it's easy to find help or ready-made solutions.

Cons

• Confusing syntax.Because of the JSX extension, which uses HTML syntax, React code can be incomprehensible to a beginner.
• Rapid evolution.The libraries and tools used with React are frequently updated. Developers need to constantly learn to remain in-demand.

Comparing React with other frameworks. Which is better to choose?

The quality of a tool can be determined by comparing it with its peers. React's analogs are Angular and Vue.

Pros and cons of React

✅ Ease of use with other projects and libraries;

✅ Large community and many ready-made solutions;

✅ The ability to use JSX to simplify working with interfaces.

❌ High entry threshold for beginners;

❌ The need for additional configuration to work with projects.

Pros and Cons of Angular

Angularis a framework developed by the Google team. It is used to create large-scale web applications.

✅ The developer immediately gets a full set of tools;

✅ TypeScript support;

✅ Good documentation and Google support.

❌ Large amount of code compared to other solutions;

❌ Difficult to learn for beginners due to the abundance of built-in functions.

Pros and Cons of Vue

Vue is a framework for creating user interfaces. Vue is often chosen for its simplicity and flexibility. The technology was developed by Evan Yu.

✅ Easy to learn and use;

✅ Flexible.

❌ Small community compared to React and Angular.

❌ Limitations in scaling large projects.

Useful materials from the editors of Skillbox.by

React is a tool that helps create interactive web pages. With its help, developers easily change the content on websites.

Web technologies are developing rapidly, and users are becoming more demanding about the quality and speed of website loading. React is a great tool for building complex and feature-rich web applications that can meet these needs.

The Skillbox.by editorial team has compiled useful resources that will introduce beginners to React and its capabilities.

Documents:

• Official React documentation - a good place to start learning.

References:

• «React Fast. Web Applications with React, JSX, Redux, and GraphQL» by Azat Mardan — a guide for those who want to learn the technology in a short time;
• «React. Quick Start» by Stoyan Stefanov — describes the creation of components and their implementation in a project;
• «React in Action» by Thomas Mark Thielens — teaches how to create practical and engaging user interfaces.

Telegram channels and chats: 

• React: Russian-speaking community — an independent community of React developers;
• Notes on React — short notes on working with the library;
• Frontend Interview — interviews on Javascript / Html / CSS — interview questions for the position of front-end developer.