Skip to main content

Posts

JavaScript: Porting from React Router v2 to v4 (with tips for Enzyme and MobX)

I recently ported a large app from React Router v2 to v4. It was hard. I jotted down some notes in case you have to do the same thing.First of all, start with the video, and look around in the Quick Start. The video will explain why v4 is better, and the Quick Start has a bunch of examples that you may find useful. I'm not going to duplicate all that knowledge. I'm just going to touch on some details.Here's a little utility to configure the default routing configuration:import $ from 'jquery'; /** * This is the default configuration for React Router v4. * * Usage: * *     <Router { ...getDefaultReactRouterConfig() }> */ export default function getDefaultReactRouterConfig() { const args = {}, href = $('base').attr('href'); // Make sure to strip the trailing slash from the base href; otherwise, it causes     // a double slash issue on route changes to the root route. It is also not     // possible to not have the trailing slash at the end of the base href,   …

JavaScript: Some Tips for Using MobX's Provider with Enzyme, etc.

Recently, we decided to move from using React's context functionality directly, to using MobX's Provider feature. Updating the code was a little painful, but not nearly as hard as trying to move from React Router v2 to v4! There were a few things that were hard in particular, such as updating all of the Enzyme-based tests. If you need to do the same thing, here are some tips:First of all, start by reading all the documentation on Provider and inject. I'm not going to duplicate that here.Let's suppose you have a component named MyComponent, and you have a MobX store named myStore.If you're using a function-based component like:const MyComponent = inject('myStore')(observer(cssModules( ({ myStore }) => <div>hi!</div>,     styles, ))); export default MyComponent; Then to set the propTypes, you'll need to write:MyComponent.wrappedComponent.propsTypes = { myStore: PropTypes.object.isRequired }; Thankfully, you'll get a warning if you get this on…

JavaScript: React Conf 2017

I went to REACTCONF17. Here's the schedule. Here are the videos. Here are my notes:KeynoteTom Occhino, Jing Chen, and Sebastian Markbage547,000 users have React DevTools installed.Facebook has 100s of React Native screens in production.Facebook uses React for many screens in the Facebook app. You can't tell the difference between what is and isn't using React Native.He said they're not done with React. They're going to "Innovate in place." There's always going to be an incremental path. You'll never have to rewrite from scratch.React Native at FacebookBenefits:Fast iterationDeclarative viewsCross-platform (and cross application)They couldn't rewrite the entire Facebook mobile app. Instead, they're incrementally adopting React Native.Things they focused on:PerformanceParity (between iOS and Android)Developer experienceThe bundle size of their React Native app is 11MB, uncompressed.They do API fetches really early, even before all the code h…