• Home

Recently I find some interesting library for React. This library is used to wrap your components to prevent unnecessary render in different viewports. So what does that mean. React is awesome and the whole world agrees to it. Development is a whole lot faster and easier when we look at everything as components. With React taking over the world, everything is about rendering components into the DOM. Everything is written in JavaScript and React renders only the code that is necessary based on application’s state.  If you lazy load your components, you load only what’s necessary for the user and I think that is the biggest thing in React.

Continue reading

When you build larger React Apps soon you will realize that when you build your project you will get one very large .js file. This file contains all the JavaScript our app needs. But let say for example if a user is simply loading the login page to sign in; it doesn’t make sense that we load the rest of the app with it. So how can we solve this problem In React there is something called Code Splitting that can help us if we done it right.

Create React App (from 1.0 onwards) allows us to dynamically import parts of our app using the import()proposal. You can read more about it here. While, the dynamic import() can be used for any component in React apps; it works very well with React Router. Since, React Router is figuring out which component to load based on the path; it would make sense that we dynamically import those components only when we navigate to them.

Typical scenario in our React App with React Router will look something like this.

Continue reading

React – what is HOC?

So today I will try to explain what is HOC ( Higher Order Component ) and why we use this type of components in React Apps. Explanation of HOC from React docs is:  “A higher-order component is a function that takes a component and returns a new component”. Manny beginners in React are not aware that with HOC can create better apps without repeating code. Let’s see that in example. Let say that we need authorization in our app and we need to be sure that component is not shown if user is not logged in without HOC we can write something like this:

Continue reading

  • 1
  • 2

Copyright by Kristijan Klepač 2018