Category: Code Monkeys

So one of the things to come out of React.js Conf was Facebook announcing it had released Draft.js to the community. I know a lot of people were underwhelmed because there wasn’t much announced and this seems pretty minor, but I’m perfectly content with the announcement. I will personally say that the demo on the homepage is extremely underwhelming, but it’s actually a really useful component. I can’t tell you how many times I’ve started a project and add a textarea and think to myself “it would be so nice if this was actually a rich text editor instead of just plain text“.  I really like the fact that all you need in the following to add a rich text editor:

render() {
  const {editorState} = this.state;
  return <Editor editorState={editorState} onChange={this.onChange} />;
}

I’ll definitely play around with Draft.js and include it in one of my projects to see what it can do. At the very least, it will make my boring textarea boxes feel more interactive.

The React Native team has been busy lately getting v0.20 out and getting the v0.21 pre-release candidate out. The release notes are pretty long and there’s plenty of good updates. The v0.20 has the following new features:

• Added an optional options parameter for WebSockets – 9b87e6c
• Generalized image decoding and resizing logic – 21fcbbc
• Make CameraRoll work with Promises – 9baff8f
• Change the js signature to be Promise based and dynamically detect it used as a callback –747be0b
• Use numeric identifiers when building a bundle – cb4fca3
• Adding ETag handling to packager improves local development – 528e309
• Added support for auto-resizing text fields – 481f560
• Open source Android date and time pickers – 9a0539d
• Add cross-platform Linking module – e33e6ab
• Reimplement color processing – c8a0a3e
• Cross platform status bar API – b979128
• Use “babel-preset-react-native” – e6cb02d
• Support non-image assets in packager – 81fb985
• Added accessibility props for Touchables – c715302
• Added accessibility props for Touchables #5346 33d8db5
• Versioned documentation deployment 6f1417c, 7d7508e

And the v0.21 pre-release has the following new features:

• Added NavigationExperimental a308546
• Enable Hot Module Replacement e018aa3
• Added ability to switch React Native version in documentation website 6c7991c 6c7991c
• Replace String.prototype.contains with String.prototype.includes polyfill 2f73ad0 577206f
• Make Chrome debugger faster 64d56f3
• Added accessibility props for Touchables 33d8db5
• Better warnings when running packager on Node < 4 e1f04bf
• Expose option for distance filtering on location updates 109036b
• Don’t automatically render more rows when dataSource updates d2ab6ca
• Allows RefreshControl to be mounted with refreshing = true 3e1f1ea
• Add support for number as colors 1c11276
• Re-render the whole navigation bar while calling immediatelyResetRouteStack 7b57b5c
• Support for back button in NavigationExperimental 7b2b0c3
• Stop warning about using onWillFocus and onDidFocus 5ca9245
• Let the module cache depend on transform options 727a2a9
• Added deprecatedCallback helper 8eddead
• Don’t show underlay if no press handlers e93afad
• Return remover function when adding NetInfo listener 1c507e6
• Added guide for getting started on Linux 2260d90
• Use ES6 import instead of require in docs 3ae99d0
• Packager: Remove unused support for asynchronous dependencies 7c03b16
• Added two new apps to showcase (Choke and MyPED) 0f850b4 272096c

Lots of good stuff here – since I’m in the middle of a new app, I’m considering updating to v0.20 but I might just wait until it’s done and create a branch that I’ll upgrade.

So you thought you were using the latest version of React with v0.14.7 – boy, were you wrong. Just kidding. Looks like the React team just announced that they will be skipping to v15.0.0 as part of the next release. While I’m confused by jumping to 15, I’m happy that they’re making it a major release version. At this point, I’m sure React is being used on quite a few sites, so it’s nice to see React move past the v0 build. I was also surprised by the poll they ran where it shows that almost 80% of people are on v0.14 – shows that JS devs love to be on the latest and greatest (which can sometimes be a bad thing). Anyways, the full blog post (which is light on details of what will be in v15) can be found here. As for me, I’m back to wrestling with the habits of writing ES5 but trying to train my brain to write ES6. Any advice or help on ways to do that, let me know.

Okay, this was a real head-scratcher and even when I figured out the cause, I didn’t fully understand it but the problem was solved so I wanted to try to help someone else. So I got this error when I checked in my package.json which kicked off a new build in jenkins. The change I made to my package.json (which was not the direct cause of the error) was to update my version of react to 0.14.7. I also updated redux and react-router. So when I get the following error, I was very confused:

npm ERR! peerinvalid The package react does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer react-disqus-thread@0.2.2 wants react@^0.13.3
npm ERR! peerinvalid Peer react-dom@0.14.7 wants react@^0.14.7
npm ERR! peerinvalid Peer react-redux@4.4.0 wants react@^0.14.0

So I didn’t understand what could be causing the problem since react was updated to 0.14.7 which should meet all the peerDependencies. And of course, when I run npm install after deleting my node_modules folder, everything works fine. I was stumped. So the first thing I realize after looking through the stacktrace is that jenkins is running npm v2 and I have npm v3 locally. So I at least understood why things were working locally, but I couldn’t easily resolve it since I wasn’t going to ask devops to upgrade npm just to get this fixed (we have plans to upgrade node and npm). So the real fix is still out there. Next I look at react-dom and react-redux to figure out why their dependencies are failing. I’ll skip to the end and say that the problem wasn’t due to react-dom and react-redux. Luckily someone pointed me in the right direction (okay, I’ll be honest, they figured out the solution and told me). Drum roll please… react-disqus-thread was a super old package that was used and because it depended on react 0.13.3 and because we were using npm v2 – it raised an error because it installed react 0.13.3 and threw an error because there were conflicting versions of react. So, to solve the original problem and get jenkins to build my app, I updated react-disqus-thread and my build was working again. So there you have it folks, upgrade to npm v3 or you could deal with fun issues like this.

I got the above error while trying to follow the async example in the documentation. Luckily, a little searching and GitHub led me to GitHub Issue #5869. The fix suggested by the original poster was to fix the original syntax by declaring the function as a function like this:

async function getUsersFromApi()

But further down, there is a PR to fix the documentation by making sure the function is wrapped in a createClass method like this:

var MyComponent = React.createClass({
  ...
  async getUsersFromApi() {
    try {
      let response = await fetch('https://mywebsite.com/endpoint/');
      let responseJson = await response.json();
      return responseJson.users;
    } catch(error) {
      throw error;
    }
  }
  ...
})

Both solutions make sense to me and both get the job done. I ended up going with the second solution. I hope this helps save someone a little time (but I’m guessing they’ll update the documentation soon enough).

 

Just saw this on Hacker News – this is really promising and gives me hope that React Native will actually stick around and not be “fad” that’s gone within a year. I’m curious to try out Deco since I’ve been pretty content with just using Atom. I’m not sure if the other features are really worth it to me – the registry is a nice idea, but unless it’s more comprehensive (which isn’t really possible) than NPM or significantly easier to use/discover components, the current Google/GitHub workflow is fine for me. I will say that after deploying a React Native app to the App Store, the real help I would like is how to easily sign/build the APK and then generate all the necessary assets (splash scree, home screen, etc.) for the different screen sizes. There are probably libraries/scripts that do this, but it would be nice if it was all bundled into a single solution. But back to Deco, I signed up for the beta and will give it a try.

Hope to help save someone some time by posting this error and solution. I got this error when upgrading React Native, specifically to React Native v0.19.0. It looks like I wasn’t the only one having this problem according to this GitHub issue #5684. So the solution is to use the React Native CLI and run:

react-native upgrade

I have been manually updating the version of React Native so I didn’t even realize this was a thing. I ran the command and it fixed everything. I definitely need to remember and take advantage of this next time I need to upgrade my version of React Native (I should mention that there’s a new v0.20.0-rc release).

So there are plenty of boilerplates and starter kits out there for React (and the plethora of add-on libraries). So I could have gone through one of the many lists to try out each boilerplate and see if I could get it deployed to my dokku server. That probably would have taken me a week or a month to get through all of them. So instead, I started putting together my own boilerplate. And while I wish I could say that I made this for others to use, I built it because I wanted something that I completely understood (since I made it) and it would be an easy starting point for future projects where I wouldn’t have to worry about breaking changes or new syntax/libraries that I would have to figure out. But if others did use this boilerplate, I would be super happy about it.

So, what kind of boilerplate did I make – it has the usual… react, webpack, hot-reload, react-router and universal rendering (aka isomorphic/server-side rendering). It has some other nice features like static routes for APIs and support for multiple environments. And I can also say that it deploys to dokku seamlessly. You can this boilerplate running live on www.setsocial.com.

So if you’re still reading this and really want to go check out the project, go to react-webpack-sample.

So it’s been a busy couple of days for the Redux team. They recently released v3.1.6 with the following updates:

• subscribe() now throws a descriptive error when the listener argument is not a function
• bindActionCreators() now ignores anything but functions on the input object

And then they fast-followed with patch v3.1.7 with the following updates:

• Fix an issue with setInterval unavailable in certain environments
• Performance and memory usage optimizations
• Slightly more aggressive minification

And just today, they released v.3.2.0 bumping the minor version with the following updates:

• isPlainObject that we use internally is now outsourced to Lodash 4.1. Note that this does not mean we depend on Lodash itself. We only use a tiny module from it. We will be able to reuse the same module in React Redux.

Again, I’ve said it before, but I’m really impressed and glad to see how active the Redux project is. Kudos to the team for being so active and constantly making updates.

 

New version of Redux has been released – Redux v3.1.5 is a minor update with the following changes:

• replaceReducer() now throws a meaningful error rather than crashes if argument is not a function

It’s always nice when an error is handled correctly rather than just crashing. I am pretty impressed by the frequent updates for Redux. It’s really amazing to see something that originated from a presentation turn into a popular open source project that is actively maintained.