Using React Fragments for the first time

  • Up until React 16 each component had to return a single element: – – With the release of React 16, you were able to return an array of elements that a component would render: – – This is OK; but it has two problems: – – Because returning arrays didn’t…
  • On a large application with a suite of components this can very quickly lead to a set of wrapping elements that can produce a big set of HTML soup.
  • The difference is that a component doesn’t end up adding any extra markup into the DOM: – – First, we import just like we import from : – – And then we use it just like any other React component: – – The key here is that the resulting DOM…
  • However, swapping out the string interpolation using ES2015 template strings for a React suddenly made the entire code easier to follow, and allowed me to use an HTML entity: – – This is now easier to follow and allows me to use HTML entities and have them work as expected….
  • Not only do they clear up a lot of component code, but the fact that they have no output into the DOM should lead to fewer superfluous and elements that a lot of React applications are littered with.

React v16 was a very exciting release for React, and included many new features. In the recent React 16.2 release, improved support for Fragments was announced, and it’s this feature that I want to talk about today.
Continue reading “Using React Fragments for the first time”

Context in ReactJS Applications

  • The short answer is that you should very rarely, if ever use context in your own React components.
  • Context acts like a portal in your application in which components can make data available to other components further down the tree without being passed through explictly as props.
  • If an interim component does this, a child component won’t update, even if a context value changes:

    In the above example, if changes, will not render, because its parent returned from .

  • Libraries like React Router use context to allow the components that they provide application developers to communicate.
  • It exposes the object on the context, and other than that it simply renders the children that it’s given:

    expects to find , and it registers itself when it’s rendered:

    Finally, we can use the and components in our own app:

    The beauty of context in this situation is that as library authors we can provide components that can work in any situation, regardless of where they are rendered.

There is a lot of confusion amongst React developers on what context is, and why it exists. It’s also a feature that’s been hidden in the React documentation in the past and, although it is now documented on the React site I thought a post on its usage and when to use it would be of use.
Continue reading “Context in ReactJS Applications”

From React to Elm

  • From React to Elm | Sebastian's Blog
  • I have noticed that with Elm my workflow has changed substantially.

  • At some point in 2015 I heard about Elm and I was intrigued.

  • This kind of safety is everywhere in Elm.

  • The Elm compiler will pick up every single problem and offer very nice error messages to help resolve the issues.

I have been working in React full time for probably two and a half years now. I work for which is large application mostly built on React for the Front end. During this time I have enjoyed working with React very much, it is a great library for building front end applications.
Continue reading “From React to Elm”

Tips For a Better Redux Architecture: Lessons for Enterprise Scale

  • The put effect instructs the runner to dispatch or “put” an action back onto the state, which in this case is created by an action creator.
  • This sort of set up does tend to yield to a lot of duplicated bootstrapping code for each Module.
  • We then structure the contents inside the Module’s files with the same format for every Module of the application, enforcing uniformity.
  • Container : The smart , top rendering class that injects all props from the module file including state and action creators.
  • Allowing Redux to handle the state of the application in a singular/global context takes the guesswork out of knowing what inner-dependencies exist within a large application.

So you’ve decided to try out Redux as your application state manager. Or perhaps you’re investigating better options. Good for you. With Redux the good new.
Continue reading “Tips For a Better Redux Architecture: Lessons for Enterprise Scale”