23 Shorts by ReactJS - short video tutorials not only for beginners

All last year I spent long lessons for an hour and a half , where we studied React in practice, made small and large applications, always did it from scratch and live on the air. I always broadcast these pair programming sessions and they brought the main benefit to the partner and those who live with us and asked questions. All the same practice in the study of technology, the most important.



But it turned out that watching such lessons is unbearably hard, an hour and a half time at the screen, constant repetition of the same thing, searching for knowledge from long “boring” replicas of the author, and often with echo in the recording, due to poor microphone or slow Internet , it's very hard. But nevertheless, a large percentage of developers, relying on our weekly pair programming sessions, studied the new React for themselves and successfully complete the complex tasks of large projects. But watching them is boring. What to do?

')

So there were shorts. I collected all the raisins from past lessons, frequently asked questions in practice and the holes of newcomers in interviews and turned them into 3–4 minute videos. The principle of shorts: sample code, no more than 5 minutes, pre-typed code, not banal content, confirmation of the question by practice.



Who am i? Wetsel Eugene, the creator of w3bsit3-dns.com , author of books in the fiction genre, is technical part of one of the teams of the large frontend company CSSSR .

CSSSR Shorts # 1: Deploy React Js to CodePen

A story about the minimum settings of the online code editor that allow you to write code for React using the ES6 language specification

Shorts ID: codepen.io/Imater/pen/XpLbrg

CSSSR Shorts # 2: Deploy React Js + Redux to CodePen

A story about the minimum settings of the online code editor that allow you to write code for React + Redux using the ES6 language specification. Plus a minimum code example using redux.

Shorts ID: codepen.io/Imater/pen/JEQdGv

CSSSR Shorts # 3: shouldComponentUpdate - component update control

The fact that React is fast masks for beginners the fact that if nothing is done, the entire application will be redrawn for any user action. In this tutorial, I will explain the basics of React performance, preventing unnecessary calls to the render functions.

Shorts ID: codepen.io/Imater/pen/pRXJPe

CSSSR Shorts # 4: Which props spoil performance

The most common mistake that leads to unnecessary calls to the render function is the transfer of props to the component, a link to which is created every time. It looks usually harmless, so you need to train the eye to prevent this in large applications. Also consider the purpose of PureComponent, which compares all the props with their past values ​​and avoids the call to render if nothing has changed.

Shorts ID: codepen.io/Imater/pen/pRXJaw

CSSSR Shorts # 5: Does changing the state of the component affect the drawing of PureComponent

In practice, we find out whether the render function of the pureComponent component will be called when calling it this.setState ()

Shorts ID: codepen.io/Imater/pen/ZLdbwN

CSSSR Shorts # 6: How many times is render called when three this.setState calls in a row

Do I need to combine multiple setState to speed up React

Shorts ID: codepen.io/Imater/pen/JEQYgX

CSSSR Shorts # 7: Debug with console.log without interfering with code

Using console.log returns `undefined`, using the expression` console.log (var) || var` can output variables, minimally interfering with the code. This is very convenient in switch functions or in objects.

Shorts ID: codepen.io/Imater/pen/jyjWOd

CSSSR Shorts # 8: We write our Redux in 15 lines and use it without React

To understand how redux works inside and dispel all the magic that inevitably surrounds those who did not look inside the code, just look at this lesson or the code from it.

Lesson code: codepen.io/Imater/pen/pRMexM

CSSSR Shorts # 9: Options for recording functions in the React component and passing context to this

Consider 6 options for writing functions in a class (React component) and understand why there is a different context for this inside the function. Look at the code and you will always remember the different options that are often found at interviews and cause confusion in real projects.

Code shorts: stackblitz.com/edit/react-m32gzi

CSSSR Shorts # 10: Memoizee caching, and why it is needed to optimize React applications

The implementation of the caching function, and its use to eliminate unnecessary rerenders of React components.

Code shorts: stackblitz.com/edit/react-7opmc8?file=index.js

CSSSR Shorts # 11: Memoizee caching for passing data to a function before it is executed

Consider another way to use memoizee: to cache a function that returns a function in order to pass arguments to it before execution.

Code shorts: stackblitz.com/edit/memoizee-on-click?file=index.js

CSSSR Shorts # 12: Use the component name from a constant, make layout easier under different conditions

An unusual way to store the name of the component being used in a variable. It helps with layout, changing under different conditions.

Shortcut code: stackblitz.com/edit/component-name?file=index.js

CSSSR Shorts # 13: Print variables to the console without really changing the code.

Conditional breakpoint in Chrome is convenient for adding output code to the console or debug stop condition.

Shortcut code: stackblitz.com/edit/component-name?file=index.js

CSSSR Shorts # 14: Reselect is a smarter caching feature.

Reselect helps to eliminate unnecessary rerender of React components and make complex selectors with auto-caching. The main convenience is that all functions that return caching keys receive the same set of arguments as input. In the case of redux, it is better to send the entire store to the input, then the global selector is “omnipotent” and can collect the output from the entire application state. Thus, if you use the entire repository as an argument, then the entire application can be made on selectors that are combined with each other.

Code shorts: stackblitz.com/edit/reselect?file=index.js

CSSSR Shorts # 15: Reselect caching in the Redux function connect

Reselect caching in the connect function of Redux allows you to eliminate the extra component re-rendering. We use redux with one storage on one reducer. We demonstrate an extra rerender when the data has not changed, but the link to them has changed. We use four RamdaJs functions: path, sortBy, prop, compose.

Code without reselect shorts: stackblitz.com/edit/redux-simple-bad?file=index.js

Shortcut code with reselect: stackblitz.com/edit/redux-simple-with-reselect?file=index.js

CSSSR Shorts # 16: Redux-form minimal use case

Redux-form is a minimal use case; initialization of initial values ​​from other storages; the story of how the minimal code of connection redux-form is arranged. Combining multiple reducers. Use R.compose to minimize the number of brackets when creating the component connected to the repository and reduxForm.

Shortcut code: stackblitz.com/edit/redux-form-v1?file=index.js

CSSSR Shorts # 17: Masks in Field reduxForm via normalize

What to do if you need to convert 8922884848 during input to 8-922-88-48-48 or 12012017 to 12.01.2017? Answer: use normalize, it receives a new, past value not only of the current input field, but also all the values ​​of all fields of the form. Using this information, you calculate the new value of the current Field.

Shortcut code: stackblitz.com/edit/redux-form-v2-normalize?file=index.js

CSSSR Shorts # 18: Custom input components for reduxForm

Let's look at a simple input component that we will create as a class. Discuss the properties that this component receives.

Shortcut code: stackblitz.com/edit/redux-form-v3-component?file=index.js

CSSSR Shorts # 19: What happens if you forget the type of the button inside the form

If you have forgotten the type = "button" of the button, then when you submit the form, this button will call onClick

Code shorts: codesandbox.io/s/y2ql953m9j

CSSSR Shorts # 20: Nested data structures in reduxForm

Use FormSection to specify a nested data structure with any depth

Shorts ID: codesandbox.io/s/8x02q1jro8

CSSSR Shorts # 21: How to change the Field value from the form

Using the change function of the form to set the value of the field with any nesting

Shorts ID: codesandbox.io/s/8x02q1jro8

CSSSR Shorts # 22: Changing Multiple Fields with One Function

Using the change function to change multiple fields at once in the redux-form

Code shorts: codesandbox.io/s/7wxkvww01j

CSSSR Shorts # 23: Making reduxForm listen to the repository for initialValues

The enableReinitialize property reduxForm causes the form to update the initialValues ​​when the data in the repository changes

Code shorts: codesandbox.io/s/7wxkvww01j



Thanks for attention. Do not scold the microphone in the first 4 rollers, it is already ritually burned, and the diction and incorrect pronunciation could not be burned.



Shorts for React, and then Angular 2+, will be released all this year every week. Subscribe to youtube channel. Watch videos from our summer conference there . Come to our work .