5 ms·
Show HN: React Native Express – Learn React Native Through Interactive Examples
- brentvatne 10y agoThis is the best way to get started learning React Native, really amazing work Devin!
- dabbott 10y agoThanks Brent! Means a lot coming from a core contributor / mr. exponent :)
- hsavit1 10y agoAgreed - 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
- pbrb 10y agoThe sections with ES6 vs output compiled with babel is amazing. Javascript really has come a long way.
- RubenSandwich 10y agoAmazing 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 10y agoTotally 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 10y agoStill 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.
- weaksauce 10y agoperhaps add the compiled option as a toggle button instead of an always on thing and have the log output be the main attraction.
- misiti3780 10y agoThis 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)?
- dabbott 10y agoI 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.
- udfalkso 10y agoI'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 10y agoany chance you open-sourced it ?
- udfalkso 10y agoLet 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 10y agothanks!
- udfalkso 10y agoHere you go: https://github.com/udfalkso/react-native-example-ios-keyboard https://github.com/udfalkso/react-native-example-ios-keyboar... Hope it saves you some time!
- 10y ago
- RubenSandwich 10y agoSmall 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.
- dabbott 10y agoAh, 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 :)
- RubenSandwich 10y agoNo worries. Just glad to help, thanks for putting this tutorial together. :)
- dabbott 10y agoFixed! Man, deploying while on HN is scary.
- hackcrafter 10y agoHow 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/
- dabbott 10y agoI 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.
- 10y ago
- phaed 10y agoFYI Array Spread section is missing the example.
- dabbott 10y agoHah. You are right :P I will fix.
- dabbott 10y agoFixed :)
- phaed 10y agoAwesome. 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 10y agoAmazing work!
- hackcrafter 10y agoQ: 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
- dabbott 10y agoI'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.
- drieddust 10y agoThanks 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.
- dabbott 10y agoThe "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 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.
- spicyj 10y agoReact 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.
- danpalmer 10y agoQuick 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 10y agoAh! Nice catch. Will fix.
- WhitneyLand 10y agoCan 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.
- 18nleung 10y agoIIRC 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)
- cobar 10y agoDevelopment 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.
- jblz 10y agoThis 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 10y ago:D That's what I like to hear!
- HodGreeley 10y agoHod @ 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 10y agoFor sure! There was definitely demand to know more about Couchbase Mobile at my class, so I know it's relevant for people using RN.
- disposablename 10y agoDoesn'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 10y ago:( I will fix. Thanks for the error message. I only use findIndex once, fortunately.
- chownation 10y agoKeep up the great work! Upvoted ;)
- KeatonDunsford 10y agoOmg perfect timing. I was just looking for something like this. Y'all are the best.
- primitivesuave 10y agoThis 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.
- p0larboy 10y agoI 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
- nikhilsimha 10y agoThis 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!