Best Practice: How I structure my React/ Redux projects

  • But when developing larger projects one have to think about a good structure of components and code artifacts.
  • When it comes to sharing components and (redux-)logic between several project a good composition is keen.
  • The initial project structure created by React Create App looks as follows: – – When you start introducing Redux you also need places for the typical redux artifacts: the store, reducers, epics and actions.
  • contains the reducers which may change the store’s state based on the actions of this component: { } ; { } ; ({ value , output Enter your name and press submit! })
  • For this reason my components always also include a set of actions, epics and reducers: – – includes a plain react component which is wrapped by within : – – These component redux structures may also be with multiple levels, just like the usual ones mentioned above.

When developing frontends I personally love to work with React and Redux due to its functional paradigms: You can easily develop, compose and test web components – Wondeful. But when developing larger projects one have to think about a good structure of components and code artifacts. When it comes to sharing components and (redux-)logic between several project a good composition is keen.
Continue reading “Best Practice: How I structure my React/ Redux projects”

Server-side rendering a D3 chart with React 16

  • You load the page, then you load the data, then you render your chart.
  • You can see my server-side code that reads a CSV file and renders the chart into a string on Github.
  • Adjusting to server-side rendering required a small mind shift in the way I built my chart.
  • Until data loads, the app renders a ; after that, it returns a chart component.
  • With the approach, you’re loading the fully rendered chart, replacing it with an empty component, then re-rendering it once data loads on the client.

Over the years I’ve helped over 10,000 engineers hone their craft. Engineers have used my books, articles, and talks to improve their technical skills, get promotions, change jobs, and ship their products faster.
Continue reading “Server-side rendering a D3 chart with React 16”

Extracting Logic from React Components

Extracting Logic from #ReactJS Components:  by @Jack_Franklin #Javascript

  • Right now to test formatting of amounts I have to create and mount a React component, but I should be able to just call that function and check the result.
  • Let’s create which will house the function that is currently in our component.
  • To test this, we can replace the body of ’s so that it just calls the new function from our module:

    Notice that I’ve still left the function defined on ; when pulling code apart like this you should do it in small steps; doing it like this decreases the chance of inadvertently breaking the code and also makes it easier to retrace your steps if something does go wrong.

  • Sure, the function is very straightforward for now, but as it grows we can now test it very easily without any need to fire up a React component to do so.
  • By looking through our components and finding standalone functions that we can pull out, we’ve greatly simplified our component whilst increasing our test coverage and clarity of our application greatly.

In the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I’d recommend watching that video first, you don’t need to have watched it to read this blog post. You can find all the code on GitHub if you’d like to run it locally.
Continue reading “Extracting Logic from React Components”

Extracting Logic from React Components

  • Right now to test formatting of amounts I have to create and mount a React component, but I should be able to just call that function and check the result.
  • Let’s create which will house the function that is currently in our component.
  • To test this, we can replace the body of ’s so that it just calls the new function from our module:

    Notice that I’ve still left the function defined on ; when pulling code apart like this you should do it in small steps; doing it like this decreases the chance of inadvertently breaking the code and also makes it easier to retrace your steps if something does go wrong.

  • Sure, the function is very straightforward for now, but as it grows we can now test it very easily without any need to fire up a React component to do so.
  • By looking through our components and finding standalone functions that we can pull out, we’ve greatly simplified our component whilst increasing our test coverage and clarity of our application greatly.

In the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I’d recommend watching that video first, you don’t need to have watched it to read this blog post. You can find all the code on GitHub if you’d like to run it locally.
Continue reading “Extracting Logic from React Components”

Building a Sort Algorithm Visualizer with React and RxJS

Build a sort algorithm visualizer with #ReactJS and #RxJS:  #JavaScript

  • Before trying out the library, I wanted to see how I would approach using RxJS with React myself.See how “easy-to-reason” RxJS code is: I was under the impression that stream libraries (and functional programming in general) are rather challenging to learn at first, but becomes intuitive once it sinks in.So the plan was to write a functioning app, then not touch it for an extended period of time, only to return to it later to refactor it.
  • I used the CustomEvent web API (aptly name-spaced as “action”) to dispatch events ,this.goToNextStep = () = { const action = { origin: ‘USER’, request: ‘GO_TO_NEXT_STEP’ } document.dispatchEvent(new CustomEvent(‘action’, {detail: action}))}and create an observable of “action” events, in a React Component StreamProvider /, with a subscription that will trigger state updates that gets passed down to the child component SortVisualizer /.
  • Can my code, relying only on good naming practices and organization, be easy to read?It’s hard to say anything about the high-level organization of the application code, because even after 4+ months of inactivity, it was easy to recall the whats and whys of my design decisions after a few minutes of digging in.However, it was really cool to experience how easy it was to follow the parts written in RxJS.Implementing “Undo” is Easy with RxJSCreating the “go back one step” button was a breeze using RxJS.
  • First, I tracked the current state of sort progress as a prop inSortVisualizer / as the following:const currentSortState = { bars: [{bar}, …] // data that we’re sorting nextStep: {targetIndex: 0, type: ‘COMPARE’} // describes what the next sorting step is}This prop is coming from the observable in StreamVisualizer / .
  • acc : acc.slice(0, acc.length -1) // just remove latest step } else { // other stuff } })Handling Async Declaratively with RxJSAnother aspect that I was focusing on was how easy it is to handle async operations with RxJS.

About 4 months ago, I set out to do a little experiment. The plan was to build a sort algorithm visualizer, but the main point wasn’t about algorithms themselves. My goal was to: So the plan was to…
Continue reading “Building a Sort Algorithm Visualizer with React and RxJS”