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.
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.
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.
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).
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.
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 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.
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).
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.
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)
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.
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.
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 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.
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
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.
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!
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.
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.
Or is this tutorial sufficiently stand-alone without React (web) experience?
[0] http://survivejs.com/react/introduction/
[1] https://online.reacttraining.com/p/reactjsfundamentals