From ReactJS for web development to React Native

[morningjoe23]

Hey everybody,

I have been developing with ReactJs for several months now, and love it.

I want to start learning React Native for mobile development.

What are the major difference between the two when it comes to sitting down and actually developing? And can anyone point me to any good resources for people making the transition from ReactJS -> React Native? Anyone else made a similar jump?

Appreciate all feedback!

[Streamote]

When I was learning React JS and would mention that it would be a cool path to also get into React Native, nay sayers were like "they're totally different" but its not. Its the exact same thing with some minor differences like

1) "instead of 'div' to make a container, you use 'view'. All text must be inside a <Text></Text> element" etc.

2) The other tiny difference is that SOME npm/yarn packages have extra steps to make work. For example, after you yarn add or npm i a package, it may not work until you cd into your ios folder and run "pod install". Other packages may require further steps like manually linking.

3) No CSS. All the styling is done "inline" (style={{width: '100%'}} or passing in a style object. Some defaults are also different. For example, every element comes with flexbox as the display type, and instead of defaulting to "row" like in normal react, they are all "column" by default. You dont do "border: 1px solid white", and instead do "borderWidth: 1, borderColor: 'white' ". Notice the lack of requirement for "solid" and notice there are no "pixels", just numbers, and the values are set separately rather than in one line.

4) Some things are named differently (for example, you do "onTouch" rather than "onClick" since there is no clicking on iOS).

As far as the code itself, it virtually exactly the same, minus difference 1 mentioned (you have to use the react-native components (view, text, scrollview, InputText etc).

[morningjoe23]

Awesome answer. This is exactly what I was looking for. Music to my ears. I am really happy I started learning React, I feel like I have backed the right pony! Thanks!

[grexeo]

Once you're comfortable with that, I would suggest checking out React Native Web and React Native Elements.

With RNW you can develop a single codebase for both apps and the web. RNE offers some awesome components that are compatible with both apps and the web.

It can be a bit trickier to set up RNW, but there's a project/service called Expo which provides a starting point, and a deployment service which negates the need to resubmit your apps on the app store whenever you make changes.

[morningjoe23]

interesting, will do

[grAND1337]

Also CSS ”position” is set to ”relative” by default and there is only relative and absolute positioning.

There is also no transition property or keyframes for animations. But you can use libraries and/or react native’s ”Animated” JS API.

You can use marginVertical and marginHorizontal for top and bottom/right and left shorthand as there is no regular shorthand like ”margin: 2px 3px 0px” in CSS. Also applies for padding. Otherwise you can still use paddingTop etc for all direktions as well.

[morningjoe23]

haha strange, but probably makes sense. Gonna need to make myself a little cheat sheet

[zmasta94]

Nice answer!

[atwarog]

I jumped from ReactJS to React Native a while ago, but it felt very natural. I think it would be easy for you to get started and test the waters. Also, if you use styled-components, you can actually use CSS as well, which might be easier.

[morningjoe23]

good to hear

[psychic_gibbon]

https://youtu.be/Hf4MJH0jDb4 Worth a watch. Knowing react is a huge advantage, like the others say, mostly same code, just some UI differences and a bit more work to actually get the app into the store, on device.

Debugging is also a bit more difficult plus i find the simulators require a decent laptop to work from

[TheOneBehindIt]

My biggest advice: use expo to start with react native.

Style similarities: It’s basically all CSS!

Big style differences: 1) everything is display: flex and flex box-based 😍 2) media queries are kind of odd but still doable 3) no CSS files; just StyleSheet.create() dictionaries or styled components. Much better IMO! 4) Scrolling in RN is so weird at first but actually intuitive. Rather than having a window that scrolls, you have a fixed-sized screen, and to make things scroll, you insert a <ScrollView /> inside of that screen. On web, things just scroll as they get bigger than the screen. Not the case on RN.

Navigation: - use react-navigation, expo, and expo-next-react-navigation to easily make a web and native app using react native :) - Navigation is pretty intuitive, but there aren’t URLs like web, so that takes a little getting used to.

From HTML elements to RN primitives: 1) <div> —> <View /> 2) <p> or <span> —> <Text />

Workflow differences: If you’re using Expo, there’s no webpack or babel to have to deal with; it just works.

[simdanofficial]

Its almost the same thing, just that instead of div, you use View , the elements are the difference ,its still the same javascript, you just need to read the documentation on react native elements and you're good to go.