
Show HN: React Native Express – Learn React Native Through Interactive Examples - dabbott
http://www.reactnativeexpress.com/
======
hackcrafter
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/](http://survivejs.com/react/introduction/)

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

~~~
bennyg
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.

~~~
hackcrafter
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](https://github.com/getify/You-Dont-Know-JS)

------
primitivesuave
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.

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

~~~
hsavit1
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](https://github.com/hsavit1/Awesome-React-Native-
Education)

------
jblz
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](http://www.reactnativeexpress.com/core_components)

~~~
dabbott
:D That's what I like to hear!

------
HodGreeley
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).

~~~
dabbott
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.

------
WhitneyLand
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.

~~~
cobar
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.

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

~~~
RubenSandwich
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.

~~~
dabbott
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.

~~~
pbrb
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.

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

~~~
hackcrafter
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/](https://developer.ibm.com/clouddataservices/offline-first/)

~~~
HodGreeley
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.)

------
p0larboy
I built a personal finance app using RN -
[https://www.titmiceapp.com/](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

------
disposablename
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

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

------
danpalmer
Quick feedback: the first code example on
[http://www.reactnativeexpress.com/redux](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.

~~~
dabbott
Ah! Nice catch. Will fix.

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

------
nikhilsimha
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!

------
misiti3780
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)?

~~~
udfalkso
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.

~~~
misiti3780
any chance you open-sourced it ?

~~~
udfalkso
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.

~~~
misiti3780
thanks!

------
phaed
FYI Array Spread section is missing the example.

~~~
dabbott
Fixed :)

~~~
phaed
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.

------
therealmatt
Amazing work!

------
chownation
Keep up the great work! Upvoted ;)

