Creating an Accessible React Website

Creating an Accessible #ReactJS Website:  via @dagda1 #JavaScript

  • The problem is that a newly server rendered page works great with a screen reader but when you change routes in an SPA, the screen reader does not know that there is new content.
  • With this higher order component in place, I can now add the correct labelling to any component such as the component previously described: – – The higher order component above takes care of displaying an error below each invalid field but a screen reader will not automatically pick this up…
  • Below is an exmple of such a validaion summary from gov.uk that I based our validation summary on: – – At first glance this is complete overkill for 2 fields but in the context of a screen reader, this is a great practice.
  • In the event of an error, focus is placed on the element in the component and a link is created for each validation error.
  • Below is a help container that expands and contracts when a link is clicked: – – A combination of , and are used to correctly instruct the screen reader that new content is toggled between visible and invisible states.

I’ve recently been working on an online application form in the form of a multistep wizard that had strict accessibility requirements. I’ …
Continue reading “Creating an Accessible React Website”

Creating an Accessible React Website

  • The problem is that a newly server rendered page works great with a screen reader but when you change routes in an SPA, the screen reader does not know that there is new content.
  • With this higher order component in place, I can now add the correct labelling to any component such as the component previously described: – – The higher order component above takes care of displaying an error below each invalid field but a screen reader will not automatically pick this up…
  • Below is an exmple of such a validaion summary from gov.uk that I based our validation summary on: – – At first glance this is complete overkill for 2 fields but in the context of a screen reader, this is a great practice.
  • In the event of an error, focus is placed on the element in the component and a link is created for each validation error.
  • Below is a help container that expands and contracts when a link is clicked: – – A combination of , and are used to correctly instruct the screen reader that new content is toggled between visible and invisible states.

I’ve recently been working on an online application form in the form of a multistep wizard that had strict accessibility requirements. I’ …
Continue reading “Creating an Accessible React Website”

Catching exceptions using Higher Order Components in React 16

Catching exceptions using Higher Order Components in #ReactJS 16:  by @notgiorgi #JavaScript

  • So it would be impractical to rewrite the whole component libraries to provide error handling, others may prefer having their views to be “dumb” and represent the UI solely without extra logic.
  • So the better way to go would be wrapping components, reusing wrappers and avoiding modifying the component definitions.So we need to implement this new error handling feature so that:We can display fallback components (views) when the errors happenWe avoid coupling of normal and fallback componentsWe can easily report errors to some serviceWe have ability to reuse reporting or fallback logicNaive, less practical approach would be to do it like this:We could make this slightly better if we parameterize ErrorHandler and instead of calling reportErrorToService directly pass error reporter function as a prop and instead of returning inline fallback view (line 12) we pass a component.
  • But as we already discussed, we don’t want to modify our component libraries, we want to just decorate them.To accomplish this, we could use Higher Order Components:We have this withErrorHandler HOC (We’ll talk about the implementation later), which takes error reporter as callback and fallback component and in case of error, calls the callback and renders the fallback component.
  • We can wrap any component using it and the component will get the error handling, without changing it’s definition, without touching the JSX views.We can make it even prettier, we will probably have one service for error reporting and display mostly the same views as fallback components.
  • So we can export partially applied withErrorHandler HOC like this:and then use it to export wrapped components, instead of just components:This way we can easily add error handling logic to our components and what is also important, we can also easily remove it!So how does the withErrorHandler HOC work?

As you might already know, React 16 beta is out and it ships with a full internal rewrite of the React core (a.k.a Fiber), providing several new features. Though in this post we will only talk about…
Continue reading “Catching exceptions using Higher Order Components in React 16”

Using Higher Order Components in a React Application

  • If you have started using ReactJS recently often you might have felt that you are performing repeated logic in many components.
  • Well Higher Order Component (HOC) provides solution to such a kind of problems.
  • A function (Functional component in React) which takes a component and gives back another component.
  • So the exact benefits are:

    Functional components started from React V15.

  • But apart from that if we are careful enough we can have an architecture which can abstract logic that can be shared across other presentational components using HOC has great benefits.

If you have started using ReactJS recently often you might have felt that you are performing repeated logic in many components. For example consider an app having:
Continue reading “Using Higher Order Components in a React Application”

Lazy Loading

  • Component { render ( ) { const { Highlight } = this .
  • A component can lazily load dependencies without its consumer knowing using higher order functions, or a consumer can lazily load its children without its children knowing using a component that takes a function and collection of modules, or some combination of both.
  • Component { render ( ) { return ( < div > { this .
  • As a component, you can also make sure your own dependencies are lazily loaded.
  • Source code of the LazilyLoad component module which exports both the Component interface and the higher order component interface, as well as the importLazy function to make ES2015 defaults feel a bit more natural.

A component can lazily load dependencies without its consumer knowing using higher order functions, or a consumer can lazily load its children without its children knowing using a component that takes a function and collection of modules, or some combination of both.
Continue reading “Lazy Loading”

Higher Order Components: A React Application Design Pattern

Higher order components: A #ReactJS app design pattern

  • Because higher order components often wrap an existing component you’ll often find you can define them as a functional component.
  • You need some of your React components to be able to access this information, but rather than blindly making it accessible for every component you want to be more strict about which components receive the information.
  • We’ll discuss how pure functions keep code clean and how these same principles can be applied to React components.
  • In the React ecosystem these components are known as higher order components because they take an existing component and manipulate it slightly without changing the existing component .
  • A higher order function is a function that when called, returns another function.

Read the full article, click here.


@ReactiveConf: “Higher order components: A #ReactJS app design pattern”


Jack Franklin takes a look at Higher Order Components, a design pattern that helps keep your React applications tidy, well structured and easy to maintain.


Higher Order Components: A React Application Design Pattern

Redux, Immutability, and Higher Order Components

Redux, immutability, and higher order components:  #ReactJS

  • A higher order component is exactly what it sounds like — it is the React component equivalent of a higher order function.
  • In React, a higher order component is a function that accepts a component and returns an enhanced component with superhero abilities.
  • A simple example of a higher order function in Haskell that takes a function and applies it twice to something.
  • , connect() is, through mapDispatchToProps() , subscribing the TodoList component to a change handler that will toggle a todo when the todo is clicked.
  • Well, arguably, one of the key concepts when using Redux with React lies in a higher order component: connect() .

Read the full article, click here.


@ReactiveConf: “Redux, immutability, and higher order components: #ReactJS”


As I wrote in a previous blog post, immutability is an important concept that can bring many benefits to development. In fact, it’s been embraced by javascript land, most notably by the ultra-popular framework, Redux.


Redux, Immutability, and Higher Order Components