Category Archives: react

Storybook for creating components library

It works with all popular frameworks like React, Angular, Vue, and others. https://github.com/storybooks/storybook

React, redux and redux-thunk with typescript

I tried it and it looks strange, verbose and painful. But if you want to try it, please take a look at: https://github.com/piotrwitek/react-redux-typescript-guide https://levelup.gitconnected.com/react-and-redux-with-typescript-da0c37537a79 (together with https://github.com/JonJam/react-redux-ts/tree/68e8cca4a6e6214b4acb030cf3fdb3321b636085/src)

Multiple react applications on one page. Theory

Yes, it can be done. That’s how you render several react apps on one page:

React. Benchmarking and optimizing performance

There is a tool called react-addons-perf that should be imported into your project.

import Perf from 'react-addons-perf';

window.Perf = Perf;

import Perf from 'react-addons-perf';

window.Perf = Perf;

After that you can use Perf object in your console. It can tell you about your react performance issues, not including redux. For instance, you can check unnecessary renders or unnecessary change calculations:

Perf.start();
// do whatever you want to measure
Perf.stop();

Perf.printOperations(); // to show DOM manipulations
Perf.printWaisted(); // to show unneeded calculations for components which remained the same afterwards

Perf.start();

// do whatever you want to measure

Perf.stop();

Perf.printOperations(); // to show DOM manipulations

Perf.printWaisted(); // to show unneeded calculations for components which remained the same afterwards

Here’s more on that — https://reactjs.org/docs/perf.html. And …

MVC vs Flux

They are all architecture patterns. M is for model. It stores generic logic for the model like fields and calculations based on the fields like validation and stuff. V is for view. It just renders stuff and passes user interactions (events) to its controller via the controller’s API. C is for controller that ties models …

Testing react’s dom with jest and enzyme

Install it like this:

yarn add enzyme enzyme-adapter-react-16 --registry="https://registry.npmjs.org"

1	yarn add enzyme enzyme-adapter-react-16 --registry="https://registry.npmjs.org"

Regression testing of react app with jest

Example is here — https://facebook.github.io/jest/docs/en/tutorial-react.html. The main idea is this:

// Link.react.test.js
import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';

test('Link changes the class when hovered', () => {
  const component = renderer.create(
    <Link page="http://www.facebook.com">Facebook</Link>,
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();

  // manually trigger the callback
  tree.props.onMouseEnter();
  // re-rendering
  tree = component.toJSON();
  expect(tree).toMatchSnapshot();

  // manually trigger the callback
  tree.props.onMouseLeave();
  // re-rendering
  tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

// Link.react.test.js

import React from 'react';

import Link from '../Link.react';

import renderer from 'react-test-renderer';

test('Link changes the class when hovered', () => {

const component = renderer.create(

<Link page="http://www.facebook.com">Facebook</Link>,

);

let tree = component.toJSON();

expect(tree).toMatchSnapshot();

// manually trigger the callback

tree.props.onMouseEnter();

// re-rendering

tree = component.toJSON();

expect(tree).toMatchSnapshot();

// manually trigger the callback

tree.props.onMouseLeave();

// re-rendering

tree = component.toJSON();

expect(tree).toMatchSnapshot();

});

React component lifecycle methods

Flow of lifecycle methods I checked it with react 16.2.0. On a client When component is rendered for the first time

constructor
componentWillMount
render
componentDidMount

constructor

componentWillMount

render

componentDidMount