Author: Sol

This looks like a really nice UI kit to include search if you’re using React and already have Elasticsearch. Lots of useful components that you can use (or not use) such as Toggle, Select, ItemList, CheckboxItemList, ItemHistogramList, Tabs and TagCloud. The full announcement can be found here. I’m not exactly clear on how customizable the UI is as far as custom styling but it’s a pretty nice start. I also like how you can extend the results list view to basically show whatever you want. And the RangerFilter component is also pretty nice. I’m curious how it handles more than a couple hundred results. I’ll definitely play around with this and put up a quick demo when I have time. If you can’t wait and want to give it a try yourself, go check out the documentation.

I’m a little late at posting this and I usually don’t post RC announcements, but considering this is the v0 => v15 bump, I figured it was worth mentioning. To be honest, looking through the commits, there isn’t much in this release. Hopefully this means going from v0.14 to v15 will be pretty seamless. Going from v0.13 to v0.14 wasn’t too bad.

This does make me wonder how many apps I have (both personal and work ones) on different version of React right now. A great tool would be something that kept track of all my projects (hopefully active and inactive ones) and reported what versions are being used and if there are updates. Any chance this already exists and I don’t know about it? Or does someone want to build it?

I’ve got to say this is probably one of the best images to go with a new release of software. But besides the amazing image, the real new is that React Native v0.21.0 is now available. Lots of new features, but I think the big one is for anyone who is working with Android, the latest update simplified the entire process but in doing so broke some stuff and if you want to upgrade to v0.21.0 and you’re working with Android, you should run:

react-native upgrade

I would recommend running this on a copy of your code before committing anything. I won’t include the full release notes here because they’re pretty long (great work by the team). I do like how they break up the updates into 3 major sections – general new features/bug fixes, Android new features/bug fixes and iOS new features and bug fixes. One feature that caught my eye is the use of ES6 import instead of require in the documentation. This is just interesting to me because at work we’re starting to move towards using ES6 as our standard. The transition has been a bit tough for me, but I’m starting to get the hang of it and not fall back to ES5. Anyways, update your apps and give the latest version a try. I’m still trying to find time to finish my current iOS app, let alone building an Android app – yes, I know I’m so behind.

A nice free online tutorial for anyone interested in learning React. According to the comments on the Hacker News thread, Tyler is a great instructor and a cool guy to meet in-person. I liked how the first topics covered are some basic JS fundamentals like Array functions and using the “this” context – all things that can be a little tricky for someone relatively new to JS. And then the actual React topics look good as well, the basic of understanding JSX, unidirectional data flow, props vs state, lifecycle hooks, etc. – all things that will make someone who has used other JS frameworks fall in love with React. And then I see topics for React Router and Webpack which are also super useful. the only topic not covered is Flux/Redux – which I can understand not being in the first course because you really need a good understanding of React before you dive into something like Redux. React Router itself will be challenging enough with the JSX syntax and how things are “magically” passed into the components. I’ll be sharing this with some friends who have asked how they should get started with React.

I saw this over on Hacker News and thought it was really cool and interesting. I’m not exactly sure how useful it is, but as someone who spends a lot of time looking for NPM modules and then comparing multiple packages that do the same thing, anything that shows me modules by popularity is helpful. In some ways, I would rather have a list that shows me all the packages that do the same thing (which I know isn’t easy to figure out) and shows me which ones are actively maintained, has the most GitHub stars and compatibility (this last one has bitten me a couple times recently). Anyways, props to the author of NPM Discover – but I did find one weird result. Do a search for “react-router” but before looking at the results, what percentage of projects do you think should would have react? My guess would have 100% – but I was wrong, so the result may surprise you.

I was just trying to run my tests and I got this error. The strange part is that I haven’t changed anything with my tests so I was a little confused. Luckily, the first couple search results helped me figure out what was wrong. I remembered that I was doing some testing of our apps under the latest version of node and had changed my version. I also had downgraded my version of NPM to match our dev environments. So while I wasn’t sure which of the changes caused this error, I figured out the fix which was blow away my node_modules folder and do a npm install. This meant all the modules were built with the correct node bindings and any differences between npm v2 and v3 were also resolved. Problem fixed, and tests running (although now failing). Hope this helps someone.

So I was checking out some React sites, actually I was looking for good React tutorials for a friend and I came across a blog with embedded React code samples. I thought it was a really cool idea and wanted to start including some in my posts as well. The original site was using JS Bin but unfortunately, to use JS Bin over https required a pro account and I wasn’t ready to make that investment. So while I like JS Bin visually more than JSFiddle, I decided to use JSFiddle instead since they support https for free. And to be clear, JSFiddle is definitely acceptable and provides everything I need. So, here is the default “Hello World” for React. You can view the code and you can see the result by clicking on the corresponding tab. This will hopefully be the first of many code samples I’ll post.

The team over at Fabric just launched their own mobile app to help mobile app developers track and manage their apps from their mobile devices (read the blog post from the team). Since I’m using Fabric to track crashes and to distribute new builds of my app, it makes sense to have the app on my phone. Unfortunately, I still don’t have enough users to need a realtime view at how many active users I have. I’m hoping my next app will get a bit more traction. And I still need to test out some of the other Fabric features like custom analytics. I could also try deploying my React Native app to Android and test Fabric reporting on Android. In any case, if you’re already using Fabric, you should install the iOS or Android app.

So another announcement from React.js Conf was Realm for React Native. I hadn’t heard about Realm before, but apparently they’re a YCombinator startup with the following value prop:

Realm is a mobile database hundreds of millions of people rely on

And they also say:

Realm is a replacement for SQLite & Core Data

Looking through the overview, from a functionality standpoint, it provides a pretty impressive interface for defining schemas for objects, writing objects and the ability to query for objects. Definitely friendlier than the default AyncStorage that comes with React Native. And looking at the sample code they provided makes it look really easy to use:

class Person {}
Person.schema = {
  name: 'Person',
  properties: {
    name:    {type: 'string'},
    cars:    {type: 'list', objectType: 'Car'},
    picture: {type: 'data', optional: true}, // optional property
  }
};

I think I’ll try to replace AsyncStorage with this. The only downside is that Realm for React Native requires React Native v0.20 and I think I’m still on v0.14. While it’s nice how things like React and React Native move so quickly, it would be nice if they were more stable with fewer “major” versions (I put major in quotes since v0.20 is technically a minor update, but because it’s pre-1.0, it’s functionality a major version with breaking changes). Anyways, not the point of this post – the point is that Realm for React Native looks cool, I’m going to try it out and I will write my impressions once I get it integrated (after upgrading to RN v0.20).