< browse all profiles
skill profile

React.js

Skills count in profile

106

Skills
Assess skills
People who contributed to profile creation

8

Contributors
Give us a feedback
Community

10

Subscribers
Subscribe for news

Description

React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality. Examples of successful websites built with React: Facebook, Netflix, Dropbox, Asana, AirBnB.

Skills

General knowledge

Expand/colapse
How does the internet works, how the Web works. Difference beetwen a web page, a web site, a web server and search engine. Understanding domain names. Understanding development processes, main programming paradigms etc.

Protocols (HTTP, HTTPS, HTTP2)

Protocol - set of rules or procedures for transmitting data between two or more entities of a communications system.

Browsers (how do they works)

A web browser (commonly referred to as a browser) is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. Although browsers are primarily intended to use the World Wide Web, they can also be used to access information provided by web servers in private networks or files in file systems. (Render, parsing, optimization etc.)

Domain Name and Hosting

Web hosting is the service that enables an individual or organization to publish a website on the Internet. Types of Web Hosting, Essential Web Hosting Features (Domain name registration, Speed, Storage, Bandwidth, Scalability, Uptime, Email Accounts, Support)

Web Security Knowledge (Content Security Policy, CORS, OWASP Security Risks)

Website security is the act/practice of protecting websites from unauthorized access, use, modification, destruction, or disruption (important principles of modern web security, security best practices)

SDLC

Software Development Life Cycle (SDLC) is a process used by the software industry to design, develop and test high quality softwares. The SDLC aims to produce a high-quality software that meets or exceeds customer expectations, reaches completion within times and cost estimates.

GraphQL

GraphQL is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data.

REST, SOAP

REST and SOAP are 2 different approaches to online data transmission. Specifically, both define how to build application programming interfaces (APIs), which allow data to be communicated between web applications.

Functional Programming (immutability, state less, meta reducers)

functional programming is a programming paradigm where programs are constructed by applying and composing functions. It is a declarative programming paradigm in which function definitions are trees of expressions that map values to other values, rather than a sequence of imperative statements which update the running state of the program.

OOP (Inheritance / Encapsulation / Polymorphism)

Object-oriented programming (OOP) is a programming paradigm based on the concept of "objects", which can contain data and code: data in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods).

MVC / MVVM / MV*

Architectural patterns that separates an applications into three main logical components Model, View, and Controller

OOD  (Singelton, Factory, Decoration, etc.)

Object Oriented Design. Software design pattern is a general, reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. Rather, it is a description or template for how to solve a problem that can be used in many different situations. Design patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system.

Test Driven development

Test-driven development (TDD) is a software development process relying on software requirements being converted to test cases before software is fully developed, and tracking all software development by repeatedly testing the software against all test cases. This is opposed to software being developed first and test cases created later.

Protocols (HTTP, HTTPS, HTTP2)
Protocol - set of rules or procedures for transmitting data between two or more entities of a communications system.
Browsers (how do they works)
A web browser (commonly referred to as a browser) is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. Although browsers are primarily intended to use the World Wide Web, they can also be used to access information provided by web servers in private networks or files in file systems. (Render, parsing, optimization etc.)
Domain Name and Hosting
Web hosting is the service that enables an individual or organization to publish a website on the Internet. Types of Web Hosting, Essential Web Hosting Features (Domain name registration, Speed, Storage, Bandwidth, Scalability, Uptime, Email Accounts, Support)
Web Security Knowledge (Content Security Policy, CORS, OWASP Security Risks)
Website security is the act/practice of protecting websites from unauthorized access, use, modification, destruction, or disruption (important principles of modern web security, security best practices)
SDLC
Software Development Life Cycle (SDLC) is a process used by the software industry to design, develop and test high quality softwares. The SDLC aims to produce a high-quality software that meets or exceeds customer expectations, reaches completion within times and cost estimates.

Performance optimization

Expand/colapse
Techniques and tools to speed up your website and improve user experience.

Rail Model

RAIL stands for response, animation, idle and load. RAIL is a user-centric performance model that breaks down the user’s web experience into four key actions.

Performance Metrics

Measuring performance provides an important metric to help you asses the success of your app, site, or web service. For example, you can use performance metrics to determine how your app performs in comparison to a competitor or you can compare your app's performance across releases.  The metrics you choose to measure should be relevant to your users, site, and business goals. They should be collected and measured in a consistent manner and analyzed in a format that can be consumed and understood by non-technical stakeholders.

Using Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.

Using DevTools

Google Chrome’s DevTools (or similar solutions). Hot to find Performance Bottlenecks, analyze runtime performance.

Rail Model
RAIL stands for response, animation, idle and load. RAIL is a user-centric performance model that breaks down the user’s web experience into four key actions.
Performance Metrics
Measuring performance provides an important metric to help you assess the success of your app, site, or web service. For example, you can use performance metrics to determine how your app performs in comparison to a competitor or you can compare your app's performance across releases. The metrics you choose to measure should be relevant to your users, site, and business goals. They should be collected and measured in a consistent manner and analyzed in a format that can be consumed and understood by non-technical stakeholders.
Using Lighthouse
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.
Using DevTools
Google Chrome’s DevTools (or similar solutions). Hot to find Performance Bottlenecks, analyze runtime performance.

JS Core

Expand/colapse
JavaScript is an interpreted programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.

ES6+

ECMA means European Computer Manufacturer's Association. ECMAScript is a programming language standard that web browsers follow while interpreting Javascript.

Asynchronous js

Using asynchronous JavaScript (such as callbacks, promises, and async/await), you can perform long network requests without blocking the main thread.

Primitive types, Object

The meaning of every primitive type is obvious except of undefined and null which are almost the same. In JavaScript, objects can be seen as a collection of properties.

Function context

Functions in JavaScript run in a specific context, and using the "this" variable we have access to it. All standard functions in the browser run under the Window context. Functions defined under an object or a class (another function) will use the context of the object it was created in. However, we can also change the context of a function at runtime, either before or while executing the function.

Scope, Closures

A scope in JavaScript defines what variables you have access to. There are two kinds of scope – global scope and local scope. Whenever you create a function within another function, you have created a closure. The inner function is the closure. This closure is usually returned so you can use the outer function’s variables at a later time.

Modules

A module is a piece of program that specifies which other pieces it relies on and which functionality it provides for other modules to use (its interface).

Asynchronous code, Event Loop

In general JavaScript is running code in a non-blocking way. This means that code which is is taking some time to finish (like accessing an API, reading content from the local file system etc.) is being executed in the background and in parallel the code execution is continued. This behaviour is being described by term asynchronous programming. An Event loop is browser’s mechanism to perform non-blocking operations by providing WebAPIs (setTimeout, setInterval, etc.) which are capable of maintaining callback references in memory.

Callbacks, Promises

You can achieve results from performing asynchronous operations using the callback approach or by using promises. But there are some minor differences between the two.

Regular Expressions

A regular expression is a sequence of characters that forms a search pattern. When you search for data in a text, you can use this search pattern to describe what you are searching for. A regular expression can be a single character, or a more complicated pattern. Regular expressions can be used to perform all types of text search and text replace operations.

DOM, Event handling, bubbling & delegation

DOM - Document Object Model. Event delegation is a better technique to handle events in our web app. This is possible because JavaScript has an event bubbled up (propagated) in the hierarchy in the DOM tree.

Modern browser APIs

Application Programming Interfaces (APIs) are constructs made available in programming languages to allow developers to create complex functionality more easily. They abstract more complex code away from you, providing some easier syntax to use in its place.

Cookies, LocalStorage/SessionStorage

localStorage is a way to store data on the client’s computer. It allows the saving of key/value pairs in a web browser and it stores data with no expiration date. stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. Stores data that has to be sent back to the server with subsequent XHR requests. Its expiration varies based on the type and the expiration duration can be set from either server-side or client-side.

JSON Web Token

JSON Web Token (JWT) is an easy way to secure an API. When a user authenticates first on a server, using for instance a standard login form, the server creates a token. This token includes some personal data, such as username or email address. Then, this token is signed server-side (to prevent token integrity), and sent back to the user. Within each next request, user sends the token to establish emitter identity.

Modular JavaScript

JavaScript modules are a way to structure JavaScript code. Code in a module is isolated from code in other modules and is not in the global scope. JavaScript has had modules for a long time. However, they were implemented via libraries, not built into the language. ES6 is the first time that JavaScript has built-in modules.

Prototype

When a function is created in JavaScript, the JavaScript engine adds a prototype property to the function. This prototype property is an object (called a prototype object) that has a constructor property by default. The constructor property points back to the function on which prototype object is a property. We can access the function’s prototype property using functionName.prototype.

Web Components (HTML Templates, Custom elements, Shadow DOM)

Web Components are a collection of building blocks. Templates are where we define reusable code. Custom Elements allow us to define our own element. ShadowDOM provides a DOM encapsulation within DOM.

Performance (Lazy Loading)

Lazy Loading is an approach through which you can prioritize content, delaying loads for less relevant or visible content. Consequently, your apps or websites load faster, delivering an enhanced user experience.

Design patterns in JS

A design pattern is a term used in software engineering for a general, reusable solution to a commonly occurring problem in software design.

ES6+
ECMA means European Computer Manufacturer's Association. ECMAScript is a programming language standard that web browsers follow while interpreting Javascript.
Asynchronous js
Using asynchronous JavaScript (such as callbacks, promises, and async/await), you can perform long network requests without blocking the main thread.
Primitive types, Object
The meaning of every primitive type is obvious except of undefined and null which are almost the same. In JavaScript, objects can be seen as a collection of properties.
Function context
Functions in JavaScript run in a specific context, and using the "this" variable we have access to it. All standard functions in the browser run under the Window context. Functions defined under an object or a class (another function) will use the context of the object it was created in. However, we can also change the context of a function at runtime, either before or while executing the function.
Scope, Closures
A scope in JavaScript defines what variables you have access to. There are two kinds of scope – global scope and local scope. Whenever you create a function within another function, you have created a closure. The inner function is the closure. This closure is usually returned so you can use the outer function’s variables at a later time.

HTML

Expand/colapse
HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.

HTML Basics

Tags, content, attributes, elements etc.

Writing Semantic HTML

Semantic HTML means writing HTML that is descriptive and meaningful in regards to content and context.

Forms and Validations

An HTML form is used to collect user input. Form validation is an feedback on the user's input and actions.

Conventions and Best Practices

As for developers, it is important to make the code visually appealing and understandable to other developers and users. There are some basic norms that are good to follow to attain this consistency in website development.

Accessibility

Provide the user a good way to navigate and interact with your site.

SEO Basics

The purpose of any website is to drive traffic. And a vast portion of those visitors is coming from search engines.

HTML Basics
Tags, content, attributes, elements etc.
Writing Semantic HTML
Semantic HTML means writing HTML that is descriptive and meaningful in regards to content and context.
Forms and Validations
An HTML form is used to collect user input. Form validation is an feedback on the user's input and actions.
Conventions and Best Practices
As for developers, it is important to make the code visually appealing and understandable to other developers and users. There are some basic norms that are good to follow to attain this consistency in website development.
Accesibility
Provide the user a good way to navigate and interact with your site.

CSS

Expand/colapse
CSS (Cascading Style Sheets) is the language used to style an HTML document. CSS describes how HTML elements should be displayed.

Basics

CSS Syntax, Selectors, CSS Typography, Division and Span, etc.

Responsive design

Responsive web design provides an optimal experience, easy reading and easy navigation with a minimum of resizing on different devices such as desktops, mobiles and tabs

Floats

Float is a CSS positioning property.

Positioning

The position property can help you manipulate the location of an element.

Display

The display property specifies the display behavior (the type of rendering box) of an element.

Box Model

The box model is the ruleset a browser uses to determine an element’s size and how it interacts with other elements.

CSS Grid

CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web. The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Flex Box

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

CSS Frameworks

A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. For example there are few of them, the most popular: Reactstrap, Material UI, Tailwind CSS, Chakra UI, Bootstrap, Materialize CSS, Bulma

CSS Architecture (BEM, OOCSS, SMACSS)

CSS methodologies to structure and organize CSS

CSS Basics
CSS Syntax, Selectors, CSS Typography, Division and Span, etc.
Responsive design
Responsive web design provides an optimal experience, easy reading and easy navigation with a minimum of resizing on different devices such as desktops, mobiles and tabs
Floats
Float is a CSS positioning property.
Positioning
The position property can help you manipulate the location of an element.
Display
The display property specifies the display behavior (the type of rendering box) of an element.

Modern CSS

Expand/colapse
Modern CSS gives us a range of properties to achieve custom select styles that have a near-identical initial appearance.

Styled Component

Styled Components are one of the new ways to use CSS in modern JavaScript.

CSS Modules

They generate locally scoped class names that are easy to reason about, without introducing complex conventions.

Styled JSX

styled-jsx is a library to support CSS-in-JS. It was developed by Zeit for use in their awesome Next.js (React) apps.

Emotion

Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.

Radium

Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.

Glamorous

Glamorous is React component styling solved with an elegant (inspired) API, small footprint (<5kb gzipped), and great performance (via glamor).

CSS Preprocessors (Sass, PostCSS)

CSS preprocessors are scripting languages that extend the default capabilities of CSS. (Sass - CSS extension language. PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations)

Styled Component
Styled Components are one of the new ways to use CSS in modern JavaScript.
CSS Modules
They generate locally scoped class names that are easy to reason about, without introducing complex conventions.
Styled JSX
styled-jsx is a library to support CSS-in-JS. It was developed by Zeit for use in their awesome Next.js (React) apps.
Emotion
Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.
Radium
Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.

Testing and Code Quality

Expand/colapse
In the context of software engineering, software quality refers to two related but distinct notions: Software functional quality; Software structural quality.

SmokeTesting approaches and End to end tests.

Smoke Testing is a software testing process that determines whether the deployed software build is stable or not. End-to-end testing is a technique that tests the entire software product from beginning to end to ensure the application flow behaves as expected. The most popular examples: Smoke, Unit test, Black Box, Code Coverage, Selenium, Pupeteer.

Test Frameworks

The JavaScript testing framework is a dynamic framework based on JS. For example there are few of them, the most popular: Jest, react-testing-library, Cypress, Enzyme, Mocha, Chai, Ava, Jasmine.

Typescript

TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language.

SmokeTesting approaches
Smoke Testing is a software testing process that determines whether the deployed software build is stable or not. End-to-end testing is a technique that tests the entire software product from beginning to end to ensure the application flow behaves as expected. It's about Smoke, Unit test, Black Box, Code Coverage End to end tests (Selenium, Puppeteer)
Test Frameworks
The JavaScript testing framework is a dynamic framework based on JS. For example Jest, react-testing-library, Cypress, Enzyme, Mocha, Chai, Ava, Jasmine, etc.
TypeScript
TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language.

Dev tools

Expand/colapse
Development Tools help to accelerate the web development process. There are many front-end web development software that help you faster your development work.

Build Tools (Boulder, Task Runners)

Build tools can save you valuable time. They can do a lot of useful stuff: download libraries, run tests, bundle packages, automatize tasks, and so much more.

Task Runners (npmscripts, Gulp)

Task runners allows to automate many tasks (repetitive tasks: making a change, compressing the js and css file, minimize code to gain performance.). Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. NPM is the default ‘Node Package Manager’ for the JavaScript runtime environment Node.js.

Modules Bundlers (Webpack, Rollup, Parcel)

Module bundlers are tools that process your modern JavaScript applications, internally build dependency graphs which map every modules your projects need and generate one or module bundles.

Linters and Formatters (Prettier, ESLint, StandartJS)

Code formatters and code linters used to have the same code format everywhere (like "tabs" and "spaces") and use the best code practices for good quality (like "let"/"const" rather than "var")

Package Manager (npm, yarn)

Package managers are tools that automatically handle the dependencies of a project.

Cloud Deployment Platforms

There are several cloud providers that offer the necessary services to build and deploy an application. Amazon Web Services, Google Cloud Platform, Microsoft Azure, Heroku etc.

CI/CD

Continuous Integration (CI) is the practice of merging all developers' working copies to a shared mainline. Continuous Delivery (CD) is a software engineering approach in which teams produce software in short cycles, ensuring that the software can be reliably released at any time and, when releasing the software, doing so manually.

VCS (Version control system)

Version control, also known as source control, is the practice of tracking and managing changes to software code. Version control systems are software tools that help software teams manage changes to source code over time. Git (Git branching models), GitHub, GitLab, Bitbucket, Mercurial, SVN.

Build Tools (Boulder, Task Runners)
Build tools can save you valuable time. They can do a lot of useful stuff: download libraries, run tests, bundle packages, automatize tasks, and so much more.
Task Runners (npmscripts, Gulp)
Task runners allows to automate many tasks (repetitive tasks: making a change, compressing the js and css file, minimize code to gain performance.). Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. NPM is the default ‘Node Package Manager’ for the JavaScript runtime environment Node.js.
Modules Bundlers (Webpack, Rollup, Parcel)
Module bundlers are tools that process your modern JavaScript applications, internally build dependency graphs which map every modules your projects need and generate one or module bundles.
Linters and Formatters (Prettier, ESLint, StandartJS)
Code formatters and code linters used to have the same code format everywhere (like "tabs" and "spaces") and use the best code practices for good quality (like "let"/"const" rather than "var")
Package Manager (npm, yarn)
Package managers are tools that automatically handle the dependencies of a project.

JS Architecture

Expand/colapse
Frontend architecture is a collection of tools and processes that aims to improve the quality of frontend code while creating a more efficient and sustainable workflow.

Micro-frontend

Micro-frontends is an architectural style for building web-based applications. Micro-frontends are taking the concept of micro-services to the frontend.

Serverless

Serverless architecture (also known as serverless computing or function as a service, FaaS) is a software design pattern where applications are hosted by a third-party service, eliminating the need for server software and hardware management by the developer. Applications are broken up into individual functions that can be invoked and scaled individually.

Single Page applications

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

Multi Page application

A multi-page application (or an MPA) is a web application that consists of multiple web pages that are downloaded when a user visits different parts of the page.

Micro-frontend
Micro-frontends is an architectural style for building web-based applications. Micro-frontends are taking the concept of micro-services to the frontend.
Serverless
Serverless architecture (also known as serverless computing or function as a service, FaaS) is a software design pattern where applications are hosted by a third-party service, eliminating the need for server software and hardware management by the developer. Applications are broken up into individual functions that can be invoked and scaled individually.
Single Page applications
A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.
Multy Page application
A multi-page application (or an MPA) is a web application that consists of multiple web pages that are downloaded when a user visits different parts of the page.

Database

Expand/colapse
A database is an organized collection of data, generally stored and accessed electronically from a computer system.

Relational Databases, SQL, Joins

A relational database is a type of database. It uses a structure that allows us to identify and access data in relation to another piece of data in the database. Often, data in a relational database is organized into tables.

ACID, Transactions, Isolation levels

Set of properties that a database transaction in a relational database is supposed to have (Atomicity, Consistency, Isolation, Durability)

Normalisation, Indexes

Database normalization is the process of structuring a database, usually a relational database, in accordance with a series of so-called normal forms in order to reduce data redundancy and improve data integrity.

NoSQL

A NoSQL (originally referring to "non-SQL" or "non-relational")[1] database provides a mechanism for storage and retrieval of data that is modeled in means other than the tabular relations used in relational databases.

CAP theorem

CAP theorem is also called brewer's theorem. It states that is impossible for a distributed data store to offer more than two out of three guarantees (Consistency, Availability, Partition Tolerance)

ORM, Database Migrations

Object–relational mapping (ORM, O/RM, and O/R mapping tool) in computer science is a programming technique for converting data between incompatible type systems using object-oriented programming languages. This creates, in effect, a "virtual object database" that can be used from within the programming language. Data migration is the process of selecting, preparing, extracting, and transforming data and permanently transferring it from one computer storage system to another.

Relational Databases, SQL, Joins
A relational database is a type of database. It uses a structure that allows us to identify and access data in relation to another piece of data in the database. Often, data in a relational database is organized into tables.
ACID, Transactions, Isolation levels
Set of properties that a database transaction in a relational database is supposed to have (Atomicity, Consistency, Isolation, Durability)
Normalisation, Indexes
Database normalization is the process of structuring a database, usually a relational database, in accordance with a series of so-called normal forms in order to reduce data redundancy and improve data integrity.
NoSQL
A NoSQL (originally referring to "non-SQL" or "non-relational") database provides a mechanism for storage and retrieval of data that is modeled in means other than the tabular relations used in relational databases.
CAP theorem
CAP theorem is also called brewer's theorem. It states that is impossible for a distributed data store to offer more than two out of three guarantees (Consistency, Availability, Partition Tolerance)

React, Basics

Expand/colapse
React.js is a JS library. Unlike Angular, React.js makes it a developer's responsibility to set a project structure, find relevant services for HTTP routing, and so on. At this point, React's ideology is to be agile and provide developers with absolute freedom. As a result, it leads to minimizing the project's size from start, as they could involve those libraries that they need by a certain time.

Main principles

React.js couldn't work alone, as it is only the View (V) and needs an engine for data processing. A developer needs to figure out its implementation, manage with Redux and Saga, and arrange that individually.

Class components/functional components

React code is made of entities called components. Components can be rendered to a particular element in the DOM using the React DOM library. When rendering a component, one can pass in values that are known as "props": Functional components are declared with a function that then returns some JSX. Class-based components are declared using ES6 classes.

Component lifecycle

Each component in React has a lifecycle which you can monitor and manipulate during its three main phases.

Context API

The Context API is a component structure provided by the React, Context provides a way to share values between components without having to explicitly pass a prop through every level of the tree.

Props/state, setState

Props are arguments passed into React components. Props are passed to components via HTML attributes. React components has a built-in state object. The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders.

hooks

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components. It does not work inside classes. Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace your knowledge of React concepts.

Main principles
React.js couldn't work alone, as it is only the View (V) and needs an engine for data processing. A developer needs to figure out its implementation, manage with Redux and Saga, and arrange that individually.
Class components/functional components
React code is made of entities called components. Components can be rendered to a particular element in the DOM using the React DOM library. When rendering a component, one can pass in values that are known as "props": Functional components are declared with a function that then returns some JSX. Class-based components are declared using ES6 classes.
Component lifecycle
Each component in React has a lifecycle which you can monitor and manipulate during its three main phases.
Context API
The Context API is a component structure provided by the React, Context provides a way to share values between components without having to explicitly pass a prop through every level of the tree.
Props/state, setState
Props are arguments passed into React components. Props are passed to components via HTML attributes. React components has a built-in state object. The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders.

React, Rendering

Expand/colapse
In React, the render() method is the only required method in a class component, and is responsible for describing the view to be rendered to the browser window.

JSX

JSX, or JavaScript XML, is an extension to the JavaScript language syntax.

Conditional rendering

In React, we can create multiple components which encapsulate behavior that we need. After that, we can render them depending on some conditions or the state of our application. In other words, based on one or several conditions, a component decides which elements it will return. In React, conditional rendering works the same way as the conditions work in JavaScript. We use JavaScript operators to create elements representing the current state, and then React Component update the UI to match them.

Preventing rendering

Sometimes it might happen that a component hides itself even though another component rendered it. To do this (prevent a component from rendering), we will have to return null instead of its render output.

JSX
JSX, or JavaScript XML, is an extension to the JavaScript language syntax.
Conditional rendering
In React, we can create multiple components which encapsulate behavior that we need. After that, we can render them depending on some conditions or the state of our application. In other words, based on one or several conditions, a component decides which elements it will return. In React, conditional rendering works the same way as the conditions work in JavaScript. We use JavaScript operators to create elements representing the current state, and then React Component update the UI to match them.
Preventing rendering
Sometimes it might happen that a component hides itself even though another component rendered it. To do this (prevent a component from rendering), we will have to return null instead of its render output.

React, Events

Expand/colapse
An event is an action that could be triggered as a result of the user action or system generated event.

Handling bubbling/capturing

Every time a user does something on a website — a click of a mouse, a button press — a series of potential events occurs in JavaScript. This is event capturing and bubbling

Adding events to elements

Handling events with React elements is similar to handling events on DOM elements, with a few minor exceptions.

Handling bubbling/capturing
Every time a user does something on a website — a click of a mouse, a button press — a series of potential events occurs in JavaScript. This is event capturing and bubbling
Adding events to elements
Handling events with React elements is similar to handling events on DOM elements, with a few minor exceptions.

React, State management

Expand/colapse
In React development, keeping track of how your application data changes over time is called state management.

Middlewares

Middleware generally refers to software services that "glue together" separate features in existing software. For Redux, middleware provides a third-party extension point between dispatching an action and handing the action off to the reducer: [ Action ] <-> [ Middleware ] <-> [ Dispatcher ]

Flux

Flux is the application architecture that Facebook uses for building client-side web applications. The major idea behind Flux is that there is a single-source of truth (the stores) and they can only be updated by triggering actions.

Redux

Redux is the state management library. It provides a JavaScript object called the store, which, once set up, includes all states in your application and updates them when necessary.

Mobx

MobX is an open source state management tool.

Rxjs

RxJS (Reactive Extensions for JavaScript) is a library for reactive programming (reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change) using observables that makes it easier to compose asynchronous or callback-based code.

Middlewares
Middleware generally refers to software services that "glue together" separate features in existing software. For Redux, middleware provides a third-party extension point between dispatching an action and handing the action off to the reducer: [ Action ] <-> [ Middleware ] <-> [ Dispatcher ]
Flux
Flux is the application architecture that Facebook uses for building client-side web applications. The major idea behind Flux is that there is a single-source of truth (the stores) and they can only be updated by triggering actions.
Redux
Redux is the state management library. It provides a JavaScript object called the store, which, once set up, includes all states in your application and updates them when necessary.
Mobx
MobX is an open source state management tool.
Rxjs
RxJS (Reactive Extensions for JavaScript) is a library for reactive programming (reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change) using observables that makes it easier to compose asynchronous or callback-based code.

React, Routing

Expand/colapse
Routing is a process in which a user is directed to different pages based on their action or request.

Configuration

The way how we define each of the routes in our application

Matching

A match object contains information about how a <Route path> matched the URL.

History

The term “history” and "history object" in this documentation refers to the history package, which is one of only 2 major dependencies of React Router (besides React itself), and which provides several different implementations for managing session history in JavaScript in various environments.

Dynamic routes

“Dynamic Routing” means that routing takes place as your app is rendering, not in a configuration or convention outside of a running app.

Navigation

Navigation is a fundamental component of traditional applications and single-page applications (SPAs). Navigation refers to the ability to  move from one page to another.

Configuration
The way how we define each of the routes in our application
Matching
A match object contains information about how a <Route path> matched the URL.
History
The term “history” and "history object" in this documentation refers to the history package, which is one of only 2 major dependencies of React Router (besides React itself), and which provides several different implementations for managing session history in JavaScript in various environments.
Dynamic routes
“Dynamic Routing” means that routing takes place as your app is rendering, not in a configuration or convention outside of a running app.
Navigation
Navigation is a fundamental component of traditional applications and single-page applications (SPAs). Navigation refers to the ability to move from one page to another.

React, Testing

Expand/colapse
There are a few ways to test React components. Broadly, they divide into two categories: Rendering component trees, Running a complete app.

Component testing

When the user clicks the button, your component renders a message in a div element. Your test should check practically for the same — check if the button is clickable and if this div exists after the clicking.

State management Testing

It will be a good topic to discuss some tools and techniques with an interviewer on the interview.

Hooks testing

If you're using react v.16.8, then you probably use hooks and some of them could bu custom written ones yourself. It's nice to be confident that your hook continues to work over the lifetime of your application.

Component testing
When the user clicks the button, your component renders a message in a div element. Your test should check practically for the same — check if the button is clickable and if this div exists after the clicking.
State management Testing
It will be a good topic to discuss some tools and techniques with an interviewer during the interview.
Hooks testing
If you're using react v.16.8, then you probably use hooks and some of them could be custom written ones yourself. It's nice to be confident that your hook continues to work over the lifetime of your application.

React, Features

Expand/colapse
As ReactJS gaining quick popularity, it is playing an essential role in the front-end ecosystem. The are many important features of ReactJS and even more.

Suspence

React 16.6 added a <Suspense> component that lets you “wait” for some code to load and declaratively specify a loading state (like a spinner) while we’re waiting.

Fiber

React Fiber is a set of internal algorithms for rendering graphics used by the JavaScript library React, as opposed to its old rendering algorithm, Stack. The actual syntax for programming with React does not change; only the way that the syntax is executed has changed.

Suspence
React 16.6 added a <Suspense> component that lets you “wait” for some code to load and declaratively specify a loading state (like a spinner) while we’re waiting.
Fiber
React Fiber is a set of internal algorithms for rendering graphics used by the JavaScript library React, as opposed to its old rendering algorithm, Stack. The actual syntax for programming with React does not change; only the way that the syntax is executed has changed.

React, Best Practices

Expand/colapse
React best practices, methods, and techniques help you stay consistent during the app development.

Patherns (render props...)

The are several patherns, one of them is Render props. The Render props pattern is a way for us to create a component that provides some kind of data to a child component.

HOCs

Higher Order Components (HOC) − Former React versions offered mixins for handling reusable functionalities. Since mixins are now deprecated, one of the solutions is to use HOC.

Patterns (render props...)
The are several patterns, one of them is Render props. The Render props pattern is a way for us to create a component that provides some kind of data to a child component.
HOCs
Higher Order Components (HOC) − Former React versions offered mixins for handling reusable functionalities. Since mixins are now deprecated, one of the solutions is to use HOC.
we are loading comments...
Join discussion
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.