Essential React Libraries in 2018

  • But in the end, when implementing a larger application, you need a couple of more libraries to have a sophisticated web application with React as its core.
  • The following article will give you an opinionated approach to select from these libraries to build a sophisticated React application.
  • In plain JavaScript, it would be possible to create a React class attribute with conditionals: – – But it is so much easier with the classnames library: – – It works perfectly with CSS modules too.
  • The library is for many people almost mandatory in applications when it comes to conditional stylings in React.
  • Basically a fetch looks like the following, for instance in a React lifecycle method when a component mounts: – – Basically you wouldn’t have to add any other library to do the job.

Often it is difficult to find all the relevant libraries to complement your React application, because React’s ecosystem is a flexible yet large framework. The article gives you an opinionated React setup by choosing essential libraries: Redux, MobX, React Router, Flow, Styled Components, Lodash, Ramda, Prettier, Axios, …
Continue reading “Essential React Libraries in 2018”

Advanced React Component Patterns – kentcdodds

Advanced #ReactJS Component Patterns:  by @kentcdodds #JavaScript

  • Two of my courses will be (have now been) released as part of Egghead’s annual Christmas course release celebration 🎉 One is The Beginner’s Guide to ReactJS and the other is Advanced React Component Patterns.
  • 👀The course starts with a single lesson where I implement a simple toggle component that manages its own state.
  • My hope is that by doing things this way you can quickly identify the trade-offs of the different patterns and know when each pattern would be most appropriate.The course wraps up by refactoring the toggle component to a redux component affectionately called “Rendux.” I think that you’ll be blown away…
  • This way we can easily create custom components which have access to the toggle component’s on state and the toggle helper function.There are actually six lessons dedicated to Higher Order Components in this course.
  • Hopefully with this refactor you’ll see both the power and the simplicity of the render prop pattern.The basic idea of the pattern is that rather than have the toggle component be responsible for doing anything special in the render method, we delegate that responsibility over to the user and we…

An overview of some of the patterns covered in my recently released Egghead.io course (free until Friday). NOTE: This is a cross-post from my newsletter. I publish each email two weeks after it’s…
Continue reading “Advanced React Component Patterns – kentcdodds”

8 things to learn in React before using Redux

8 things to learn in #ReactJS before using #Redux:

  • A component can manage a whole lot of state, pass it down as props to its child components and pass a couple of functions along the way to enable child components to alter the state in the parent component again.
  • Component A is the only component that manages local state but passes it down to its child components as props.
  • In addition, it passes down the necessary functions to enable B and C to alter its own state in A.

    Now, half of the local state of component A is consumed as props by component C but not by component B.

  • When you lift the local state management down to component C, all the necessary props don’t need to traverse down the whole component tree.
  • When a library such as Redux “connects” its state managements layer with React’s view layer, you will often run into a higher order component that takes care of it (connect HOC in react-redux).

Facts about React that should be known before using Redux (or MobX). Most important: Learn React first, then opt-in Redux…
Continue reading “8 things to learn in React before using Redux”

React’s Ecosystem as a flexible Framework

React's Ecosystem as a flexible Framework - RWieruch  #reactjs #javascript

  • But in the end, when implementing a larger application, you need a couple of more libraries to have a sophisticated web application with React as its core.
  • The following article will give you an opinionated approach to select from these libraries to build a sophisticated React application.
  • In plain JavaScript, it would be possible to create a React class attribute with conditionals:

    But it is so much easier with the classnames library:

    It works perfectly with CSS modules too.

  • Basically a fetch looks like the following, for instance in a React lifecycle method when a component mounts:

    Basically you wouldn’t have to add any other library to do the job.

  • However, there are common use cases for React’s higher order components that are already solved in a library called recompose.

React’s ecosystem is a flexible framework. The article gives you an opinionated ideal React setup choosing essential libraries…
Continue reading “React’s Ecosystem as a flexible Framework”

8 things to learn in React before using Redux

  • A component can manage a whole lot of state, pass it down as props to its child components and pass a couple of functions along the way to enable child components to alter the state in the parent component again.
  • Component A is the only component that manages local state but passes it down to its child components as props.
  • In addition, it passes down the necessary functions to enable B and C to alter its own state in A.

    Now, half of the local state of component A is consumed as props by component C but not by component B.

  • When you lift the local state management down to component C, all the necessary props don’t need to traverse down the whole component tree.
  • When a library such as Redux “connects” its state managements layer with React’s view layer, you will often run into a higher order component that takes care of it (connect HOC in react-redux).

Facts about React that should be known before using Redux (or MobX). Most important: Learn React first, then opt-in Redux…
Continue reading “8 things to learn in React before using Redux”

How to Lazy Load features using React and Webpack – codeburst

How to Lazy Load features using #ReactJS and #Webpack:  by @notgiorgi

  • We don’t want to load our app’s whole component library when user enters our site.
  • We need to load components on demand, and after initial load, cache them in the memory for further use.Also we want lazy loading logic to be separated from the component implementations.We can solve this problem using Webpack import functions and Higher order components.Our HOC takes two arguments, second is the component which will be shown while component is loading, because we don’t want our users to be looking at the blank screen.First argument is the getComponent function, this is where we call Webpack import:One might ask why we don’t pass the path directly to the HOC.
  • E.g. if we do something like this: Webpack will bundle all the files in the .
  • If we pass the whole string directly import(‘.
  • But we cannot do this: path = import(path), because Webpack won’t know which files to consider, it won’t have any pattern to match files against.So our HOC, calls import before it mounts and displays the spinner while component is being downloaded.This way we can easily convert any statically imported component into lazy-loadable one.

In the modern web, every kilobyte matters. We don’t want to load our app’s whole component library when user enters our site. We need to load components on demand, and after initial load, cache them…
Continue reading “How to Lazy Load features using React and Webpack – codeburst”

React’s Ecosystem as a flexible Framework

  • But in the end, when implementing a larger application, you need a couple of more libraries to have a sophisticated web application with React as its core.
  • The following article will give you an opinionated approach to select from these libraries to build a sophisticated React application.
  • In plain JavaScript, it would be possible to create a React class attribute with conditionals:

    But it is so much easier with the classnames library:

    It works perfectly with CSS modules too.

  • Basically a fetch looks like the following, for instance in a React lifecycle method when a component mounts:

    Basically you wouldn’t have to add any other library to do the job.

  • However, there are common use cases for React’s higher order components that are already solved in a library called recompose.

React’s ecosystem is a flexible framework. The article gives you an opinionated ideal React setup choosing essential libraries…
Continue reading “React’s Ecosystem as a flexible Framework”