React Tools and Libraries

In this talk, Carl Crawford (@StickyCarl) gives a whirlwind tour of the more popular and useful libraries available to React developers.

This talk was filmed at JS Monthly London on July 25 2016.

[00:00:05] I’m Carl. I’m a full-time developer at Sticky World. I like cats. Before that I was researching optimisation for dynamic initialisation. Yes, good luck with that. I’ve mainly been working with web development for two years. Only one of which may have been React and less than that for Redux. You have to bear with me if I don’t explain things for you because I have no idea myself. It’s all just rolling with it. First up, well, I guess I should introduce the talk. This is just a talk about the tools and the libraries I have used whilst working on React and Redux. They have been somewhat useful to me in the past, yes. First up we have React router. It’s just really a tool to sync your UI with your URL. As you can see here, you have multiple routes, you will fit it to your browsers and loads components that you have associated with it. Pretty straight forward, can’t really go wrong. Next up we have React Bootstrap because it’s really easy and no one likes to put passes everywhere. This is just a general slide. You do have multiple framework bindings, so you’ve got material, you’ve got components, you’ve got all sorts. Basically, just search React and whatever you write in it will come up in the library and you can just use all of the components and it will just lay it out for you. Quite easy, you don’t have to worry about the passes everywhere, but overriding it can be a bit of a problem. Whatever you want.

[00:01:44] Dan Abramov who created Redux. He also introduced React hot-loader. This is a nice tool that allows you to modify your components, your code in real-time and it will update in the browser. This error may be from that, we don’t actually know because we couldn’t figure out what was hot-loader and what was just React. If you do use it, you might see this error a lot because it just froze any time you had an error in one of your components, which is not fun. It wouldn’t be any kind of framework if there wasn’t any kind of testing to support it. Enzyme does that quite nicely for us. Enzyme includes shadow renderer; it allows you to shadow render your components so you can just test the logic of your application to make sure the right components are loading at the right time. Which, again, may never work. Moving on, Redux. Who uses Redux? Wow, less than the React. Shame on the rest of you. It allows you to create one store for everything, one store to rule them all. You can modify that store by dispatching actions which turns to reducers, which will then modify your store into a new store. It’s a generally much nicer way to use than massive components at the top of your hierarchy.

[00:03:09] React router Redux, moving on from React router, the React Router Redux allows you to store the URL at the same time as your save, which gives you the option to go backwards and forwards through time. For example, if you have a client that can give you the source and you can go back in time to see what changes they make, or who knows what. Redux’s dev tools. Who uses this? Wow, the same people that did Redux. Never mind. This is just a nice way of looking at the action that’s been dispatcher since loading our application. It’s quite a nice way to debug any Redux actions to make sure that the payload is what you expect it to be and if not, you can see what the errors are and what’s broken. Reselect is one of the nicer tools that I’ve used, it generally just gives you some information. That’s a bad way of explaining it, really. Every time you startup your app, you load a whole load of data, you might load a load of users, you might load a load of comments. Say, for example, you needed comments of the users integrated into that, you could use the user selector to merge the two or you could use the selector to just pluck information from some of your store. It’s quite a nice way to load data and just get stuff from it. It’s cool, check it out.

[00:04:37] Redux Saga. I roughly mentioned Redux Thunk, which is used for async actions. Saga takes a nice step forward and uses generators so that you can write synchronous code as asynchronous code as synchronous code. As you may see in the example, you will fetch data, you will put the action, so you fire another action saying this data should go into the store and then you might have another effect of that. It will show a system message and you can write it in a nice pattern which is easier to read. Instead of having thousands upon thousands of call backs. Redux-Act is a wrapper for creating actions, well, action creators, as it suggests. It allows you to writer functions which will dispatch your actions for you instead of using streams for your Redux actions, it allows you to just use the functions themselves, so you have less typos and less strings everywhere because that’s annoying. That’s it. Hopefully I didn’t bore you and hopefully I can go now.