React for web, react native for mobile app development - reactjs

I am looking into hybrid development. After some googling, it points to me that there are some potential in investing some time learning React and React native. Dont ask me about Angular, hated Angular due to its complexity. My question is does learning React helps in developing mobile apps with React native?
Regards,
Xing

React-native : This is Mobile Application Development(Hybrid mobile Apps)
React: This is Web Application Development.
Now in this Case those React and React-native Component life cycle Same.
but your using Some methods and components are Different then react to react-native. But mostly both are same. Except Components.
So , Finally if you are learned react and react native Definitely you will develop in this both.
But If you learned React you will Develop Only WebApps

Yes, when I started learning React Native, I had to get the concepts used in React. Basically you will take on React first, before proceeding into any offshoots. A solid foundation in the React style of programming will help a lot in React Native.
The following link is a good guideline. Read this for a start. And also the Facebook documentation for React. This may take some time, so if you have the time, you can proceed. Else try to cut it short when it comes to maybe webpack and stuff like that.
https://github.com/petehunt/react-howto
And then there are many tutorials in React Native. You can again start with the Facebook documentation for that.

Related

What is the difference between React, ReactJS, and React Native? [duplicate]

This question already has answers here:
What is the difference between React Native and React?
(45 answers)
Closed 1 year ago.
I want to study a course about React, but I don't know couple of things, like:
What is the difference between React, ReactJS, and React Native ?
Well, if there is a big difference, What is the best one of them to study ?
I am really looking forward to study it, so if you got any information on the best way to start learning this course, I would appreciate it.
Thank you so much.
React and React.Js is one and the same.
React / ReactJs
ReactJS is an open-source JavaScript library used to build the user interface for Web Applications. It is responsible only for the view layer of the application. It provides developers to compose complex UIs from a small and isolated piece of code called "components." ReactJS made of two parts first is components, that are the pieces that contain HTML code and what you want to see in the user interface, and the second one is HTML document where all your components will be rendered.
React Native
React Native is an open-source JavaScript framework used for developing a mobile application for iOS Android, and Windows. It uses only JavaScript to build a cross-platform mobile app. React Native is same as React, but it uses native components instead of using web components as building blocks. It targets mobile platforms rather than the browser.
Link for Further information
What is the best one of them to study ?
React and React native both solves different kind of problem. React is common library between react and react-native which provides supports for hooks and generate virtual dom.
react-dom will render content on web using virtual dom created by react.
However on other side react-native will create bundle for android and iOS.
Main differences between Reactjs and React Native
When it comes to a web platform, Reactjs can be defined as a base
derivative of React DOM, while React Native acts as a base
derivative by keeping workflow and syntax the same alongside
altering components.
React is a JavaScript library that can help your developers in
building a highly responsive UI Layer and React Native on the other
hand is a complete framework to develop cross-platform applications.
Virtual DOM is used to extract browser code in React; native APIs
help in rendering components in mobile in React Native.
In React Native, UI is rendered with the help of JSX but the
applications curated with Reactjs extract HTML in UI.
For styling in Reactjs, CSS is used, and React Native platform
requires a stylesheet for styling.
Using CSS, you can carry out animation in Reactjs; for animation in
React Native, you need to use an animated API.

sharing code between react js and react native expo

I want trying to figure out is it possible to share code between reactjs and react native expo. I want to build an app for production. If yes then what should be the structure of project. I tried to do alot of google search but could find any article or tutorial on using react native expo with reactjs. Any one please help me to figure this out.
Probably the easiest way is to just write React code in Expo and then use Expo web to make the website.
It is possible to share code between a React DOM project and an Expo project but there are some caveats and gotchas. There are a bunch of blog posts out there that outline some techniques to do this. Here is one example: https://codeburst.io/reusing-code-between-react-js-and-react-native-effectively-12bb4fbf7a70

I need some advice on learning path

React Native or React JS, can you please tell me which one I should learn, and yes I know absolutely nothing aside from Colt Steele's web dev Bootcamp(we did have jQuery in that course, is it the same thing). If someone could explain to me the difference between React Native and React-Redux, that would be awesome, and please don't laugh if my question makes no sense. You can ignore it quietly. Thanks
I was asked to edit my question so here it goes, which tutorial will make more sense for a new learner,this one https://www.udemy.com/course/the-complete-react-native-and-redux-course/?ranMID=39197&ranEAID=OyDCFDQTmY&ranSiteID=O.yDCFDQTmY-pbBV5G_YA1uxwpEcfTPfUg&LSNPUBID=OyDCFDQTmY or this one https://www.udemy.com/course/react-redux/?ranMID=39197&ranEAID=OyDCFDQTmY&ranSiteID=O.yDCFDQTmY-pbBV5G_YA1uxwpEcfTPfUg&LSNPUBID=OyDCFDQTmY
React.js is:
A JavaScript library for building user interfaces
React Native is:
A framework for building native apps using React.
Which field of software development to you want to be involved in?
Web development or mobile app development?
Redux is:
A State Container for JS Apps
So basically you use Redux to manage state in your React app.

Porting a full blown react web app to react native

I have a full blown mobile web app using the following:
React
Redux
Redux-React
React Router
Firebase
I eventually want to convert this mobile web app to a mobile app and I am looking into using React Native. There is a lot of literature on how to build React Native apps from scratch or to convert a native app in Objective-C to react native but I am struggling a bit to find some prior-art of how to approach taking a mobile web app towards native.
More specifically, what are the things that wont work out of the box? I am looking at React-Router.
Some thoughts around how to start transitioning, what to touch and what to not worry would be very helpful.
UPDATE:
Imagine the following app structure. Its already a lot of code. So, I am wondering if there are approaches to do this incrementally?
Many folks are porting their React applications to React Native incrementally by using Web View as an initial 'foot in the door', and then using React Native views on a flow-by-flow basis. With the recent availability of react-native-webview-bridge ( https://github.com/alinz/react-native-webview-bridge ), two-way communication between those web views and the react native components is now very easy.
There can be performance issues when using Web Views on iOS versus the regular Safari app, so that may force certain UI flows to be converted to React Native before you can ship.
I'd highly recommend translating any Selenium tests to Appium to keep your automated test coverage up. React Native is still a bit volatile, and being able to upgrade quickly and safely will be highly dependent on having an automated test suite.
Be sure to have your API (is you have one), your reducer and your action outside of your web folder, because you'll be able to use them in your mobile app.Most of your app structure will be the same, except for the react-router. Like Jan Fanz Palngipang, you could use react-native-router-flux (which is the one i'm using)
I would recommend you to check starter kit like nativebase, rReact Starter Pro to see how their drawer is working.(see how they change container)

React + React Native starter kit

I am going to develop a web + mobile application using React and React Native. I'd like to share as much code as possible between React and React Native. I was looking for some starter kits, but found only este. However, for me, it seems to be an overkill as it has too many dependencies (also I wasn't able to make it work for Android - when I fix some error, I run into another one).
I'd like to have just React + React Native + Redux + web bundling etc. Are there any other alternatives? Or at least very simple example apps that I could use?
Did you check the awesome React-native list ?
As I said in this thread, as long as you follow the component / container pattern with Redux; you are able to reuse a lot of code.
The pattern encourages you to separate every presentational code into the comopnent. The container holds all the logic.
Then when you want to reuse the code, you just have to rewrite the component.
Here is a great explanation on how to implement it.
Also, you may want to check React-native-web. It allows you to code in react-native for the .... browser.
Update: I now know why there aren't almost any starter kits that would combine React + React Native. The reason is that it is not a good idea to combine web React and React Native. Just create two separate apps, you'll save yourself a lot of headaches. For those still interested in combining the two platforms, have a look at React Native for Web instead.
So in the end, I've created my own started kit. You can find it here: https://github.com/gina-system/react-starter
why do not you check out https://github.com/teallabs/react-native-init
pretty amazing react-native starter kit with codepush, google signin, sentry, react-navigations and all setup steps.

Resources