Show HN: React Native Express – Learn React Native Through Interactive Examples | Hacker News Reader

Show HN: React Native Express – Learn React Native Through Interactive Examples

reactnativeexpress.com

496 pointsdabbott53 comments

Open articleView on HN

Q: Should one get familiar/experienced with React[0][1] first before jumping into React Native dev?

Or is this tutorial sufficiently stand-alone without React (web) experience?

[0] http://survivejs.com/react/introduction/

[1] https://online.reacttraining.com/p/reactjsfundamentals

I'd be interested in hearing from people who have learned through this site, but my aim is:

One should be able to learn React Native directly through this tutorial, without starting with React for web. The main prerequisite is ES5 JavaScript. The tutorial makes analogies to HTML/CSS/React and other web technologies, but these aren't crucial to understanding the material.

Thanks for putting the effort. Though my knowledge is limited but I don't get this. Why React is different from React Native? Ideally web should be another target just like iOS or Android.

The "React" part is the same regardless of web or native. But there are a lot of other concerns for web (css, DOM stuff, and integrating libraries that use those two).

Ideally web is just another taraget :) https://github.com/necolas/react-native-web

That said, while writing a website with react-native-web is potentially interesting for new sites, it can be less worthwhile for an existing site to just embed a little bit (which is one of the huge values of React). It's also still very experimental. But I suspect it will be supported in a huge way soon.

React DOM is a sibling of React Native that integrates directly with web APIs and allows you to use <div /> and <span /> directly instead of RN APIs like <View />.

You're correct that there's no theoretical reason that RN apps can't run on the web; as dabbott mentions, react-native-web is one third-party attempt at this. We'd like to support this officially one day but don't currently have a high-quality solution we can recommend.

As someone who dove headfirst into RN without JS/React experience (~5 years of iOS), you don't need to know any of that stuff beforehand.

I haven't gone through (or really looked in-depth) this tutorial, but I can say that the ES{x} features are pretty easy to grok once you've seen and written them a few times. Most of the syntax specifics are easy to pick up just by reading code. The biggest things I'd focus on for starting into RN is:

- React lifecycle (componentDidMount, willUnmount, shouldComponentUpdate, etc) - Add render counts into your debug builds so you know if components are re-rendering way more than they should (shouldComponentUpdate is your friend here).

Other than that, learn by building. Keep an open mind to frustrations since RN changes rapidly, and the documentation/examples/libraries online are not the most up-to-date.

Nice, I'm going to jump strait into this then. Thanks!

I did find the You Don't Know JS[0] book series extreamly helpful as a C++/Python coder who has only done enough JS to get by. But that is the extent of my prep for learning React Native.

Interestingly, the YDKJS author (Kyle Simpson) is very down on the adoption and heavy usage of ES6 class notation and the over-reliance of the syntactic appearance of a OO-language class systems in JS.

His argument is the abstraction will leak the in-its-own-right powerful delegation system of JS prototypes, so why not just learn/use raw objects or his OLOO (objects-linked-to-other-objects) pattern.

I find it hard to mentally map the ES6 class to the equivalent object+prototype structure it is syntax sugar for, so just throw my hands up and for the most part pretend they are Python style open-objects.

[0] https://github.com/getify/You-Dont-Know-JS

I tried survivejs but whole complexity and explanations started falling apart when flux and whole concept of provider was introduced.

[1] http://survivejs.com/react/implementing-kanban/react-and-flu...

This is the gold standard for online tutorials - concise explanations, interactive code, and a well-thought-out flow. Really appreciate you taking the time to produce such a high quality resource.

This is the best way to get started learning React Native, really amazing work Devin!

Thanks Brent! Means a lot coming from a core contributor / mr. exponent :)

Agreed - so far I think it is the best introduction to learning React Native. And I've reviewed a lot of them - see https://github.com/hsavit1/Awesome-React-Native-Education

This is really well done. I'm fairly familiar with React & was able to pick this up around Section 3 "Core Components" [0] & feel like I could be decently productive with React Native.

Thanks for sharing your work!

[0] http://www.reactnativeexpress.com/core_components

:D That's what I like to hear!

Hod @ Couchbase. Looks like an excellent tutorial. I understand you have limited time, and this is providing a great resource to the community. I'd ask, if you have the chance, to take a look at Couchbase Mobile. I'm of course biased, but I think I can legitimately claim that Couchbase is on par with Realm (as evidenced by business critical apps using it in large scale deployments). Happy to chat about it (hod@couchbase).

For sure! There was definitely demand to know more about Couchbase Mobile at my class, so I know it's relevant for people using RN.

Can anyone give pros/cons of RN vs Native in a nutshell?

I'm already familiar with native coding, but not sure how much better RN is than say PhoneGap.

IIRC PhoneGap is just your app in a WebView while RN uses native components. (e.g. RN <Text> maps to UITextView, while in PhoneGap it's rendered by the WebView)

Development time is a lot quicker with RN. Not only are you targeting a single code base instead of maintaining two apps, but the React environment helps you to be productive.

The React way of managing views makes a lot of sense - change a variable and the whole UI updates accordingly. Also, rather than going through the typical debug, modify code, recompile cycle, there is a Hot Reload mode in RN where your code updates are immediately applied when you save. Laying the UI out with RN's CSS-style syntax is a lot easier than doing it by hand or mucking with Interface Builder / Android XML files. There is a lot that RN wraps around that gives easier management of than the native approach to, e.g. a BackButton component vs. dealing with a stack of Android fragments.

I haven't done any PhoneGap programming, the lack of native UI always scared me off. Without that, I never felt like I could hit a level of polish that was acceptable. The nice thing with RN is you can build you own native components and access native functionality as needed. It's not super well documented, but powerful when you need it.

The sections with ES6 vs output compiled with babel is amazing. Javascript really has come a long way.

Amazing yes. But I think that on certain sections they should output the console value instead. I'm specific talking about the Array Spread example as the Babel output in that case is a very roundabout and verbose way of showing me what the Array Spread Operator actually does. I think it would be better to allow the user to play with the operator and see the output of it right next to the code.

Totally agree with you on that. When I have a little more time I'm gonna add that.

The compiled output starts out awesome with the first few sections, and then just gets tedious and weird.

Still useful, but yeah, adding the console output would be even better for said sections. Either way, I'm loving this write up. I saved it to run through the entire tutorial, starting tonight.

perhaps add the compiled option as a toggle button instead of an always on thing and have the log output be the main attraction.

Small nit pick. Realm does not use the "underlying SQLite database" as listed here: http://www.reactnativeexpress.com/persistence. Realm is built from scratch as an append only database, see here: https://realm.io/products/realm-mobile-database/ and here: https://github.com/realm/realm-core.

Ah, thanks. I will change. I was going off my own memory from talking to a few Realm guys months ago, but clearly I should've just rtfm :)

No worries. Just glad to help, thanks for putting this tutorial together. :)

Fixed! Man, deploying while on HN is scary.

How would you compare Realm vs Couchbase Mobile in terms of a syncing mobile store?

Maybe a more fair comparison is to IBM's CloudantSync[0] which is the managed service version of Couchbase compliant Cloudant.

[0] https://developer.ibm.com/clouddataservices/offline-first/

I honestly haven't tried Couchbase mobile or CloudantSync. I got a few questions about Couchbase when I was teaching my last class on RN, and I've been meaning to try it. It sounds powerful and popular.

Hod @ Couchbase. Couchbase Mobile has had sync for a long time. It's used in serious, large scale deployments. (Check out the video from Ryan Air if you want to see a really cool example of how they were able to improve their app with it.) Couchbase is a document oriented database storing JSON and blobs. (I'm not a Realm expert, so I won't attempt to compare sync solutions.)

(Adam from Realm) Realm is an ACID compliant object database. Compared to Couchbase it is much more performant and memory efficient. In terms of data sync, Realm works by transferring the compressed changes from the transaction log (so just the diffs and capturing the semantic intent of the action) and automatically resolving conflicts using operational transformation. This approaches leads to extremely low latency enabling realtime collaboration functionality. This is quite different than Couchbase which is sending the entire object, requiring the developer to manually resolve conflicts.

I built a personal finance app using RN - https://www.titmiceapp.com/. I had some prior React.js knowledge but rest assured as long as you have javascript experience, you can do without it.

The biggest pain point so far is adding analytics but otherwise, everything is pretty smooth sailing.

Also I come from a web developer background, so structuring layout isn't too unfamiliar. AMA if you have any qns. I'm looking to pour all these experiences into a blog post before my next distraction comes and terrorizes my short-term memories

Doesn't work at all on IE11/Win7, blank page, errors

    SCRIPT438: Object doesn't support property or method 'findIndex'
    File: bundle.js, Line: 2, Column: 26381

:( I will fix. Thanks for the error message. I only use findIndex once, fortunately.

Quick feedback: the first code example on http://www.reactnativeexpress.com/redux defines the action types in an object, but then never uses the definitions, instead just hard-coding strings. Would be good to fix.

Ah! Nice catch. Will fix.

Omg perfect timing. I was just looking for something like this. Y'all are the best.

This is an excellent tutorial. I have been looking for something like this forever: "One should be able to learn React Native directly through this tutorial, without starting with React" Thank you!

This looks pretty useful!

Question - is it possible to make a third-party keyboard in react native currently (the kind you download an install from the app store)?

I have seen it done, so it's definitely possible, but haven't tried myself. My guess would be you probably need to know the native side on iOS/Android decently well for this, but I'm just speculating here.

I've built one. It worked nicely once loaded but I found it took too long to initialize when switching between keyboards so I ended up going purely native. For your use case this may not be an issue however.

any chance you open-sourced it ?

Let me see if I can get it working again, it was a while ago. If so I'll try get it up on github for you.

thanks!

Here you go: https://github.com/udfalkso/react-native-example-ios-keyboar...

Hope it saves you some time!

thanks so much!

FYI Array Spread section is missing the example.

Hah. You are right :P I will fix.

Fixed :)

Awesome. Going through this as I've been meaning to pick React back up (after previous failed ramp up attempt) and I'm finding it really effective easy to follow.

Another fix: In Redux Minimal example types.INCREMENT is defined at the top but then never used.

Amazing work!

Keep up the great work! Upvoted ;)

Reply on news.ycombinator.com