I'm just learning development and recently, I finished a MERN stack course.
Now I'm wanting to build my second Commercial App for the company where I am working.
At first, I was only considering responsive web platform but now, I can't deny the necessity of functionality on ios and Android.
Thus, I did my own research on which framework or method I will have to use to minimize my production time rather than using react web and react native separately.
It seems like Expo Web and React Native Web will be the closest solution I can think of.
I'm not sure if I'm trying to take things too easy, but if someone can enlighten me with suggestions on how to approach this dillema, that will be greatly appreciated.
In Short.
What is better? Expo Web or Native Web and best way to learn..
When using Expo, you're building the same app for iOS, Android, and Web at the same time.
Building an app with Expo CLI will provide a 100% code base across the 3 platforms. Because the Expo SDK covers most, if not, all the tools you need to build a simple application without touching native code.
Expo also offers you the possibility to eject from it, if by any chance you need to change native code.
I would suggest that you start with Expo CLI, because of how rich its SDK is and how easy it is to get started with it. And if later in time you wanna modify native code, you can eject from it.
I'm at the starting phase of a project that is going to use React Native and React to spit out a build for iOS, Android and web that has a consistent feel. My question is: what's the best way to do this? Should I build the app in React Native and then work on porting a web build? It seems like ReactXP kind of does this, but also includes Windows stuff that we just don't need. Or is it just easier to completely separate the native from the web.
Thank you in advance for the advice!
I am working on a project that needs to be cross platform for web and mobile. Currently the website is being developed using ReactJS and cordova is being used to make it available on mobile.
But I was wondering if it would maybe be a better choice to use ReactNative for the mobile version because cordova might be more of a hassle than ReactNative is. I dont know if this is true tho.
I know this is kind of an open question that tends to be opinionated but i'd still like to hear some thoughts on this from you guys because its bugging me and I dont have the knowledge and experience of working on both these platforms (cordova and reactnative) to have an educated opinion.
React Native is an abstraction to write native UIs for Android and iOS. Your JS code runs in a JS runtime on the OS, but the UI is rendered as native components. This makes it very different than Cordova.
With React Native, you can use the standard platform components such as UITabBar on iOS and Drawer on Android. This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using their React component counterparts, such as TabBarIOS and DrawerLayoutAndroid.
Also you can find differences here:
https://www.toptal.com/mobile/comparing-react-native-to-cordova
Phone gap vs React Native
http://noeticforce.com/mobile-app-development-cordova-vs-react-native-vs-xamarin
We have a stable version of a widget developed with reactjs. We would like to develop mobile version of the same. Is it better to develop with react native and share the code across the 2 apps or is it better we develop the widget natively.
Bare in mind that we do have expertise in both(react and android dev) but we do not want to invest to much time on developing the entire app again.
Are there any tools/resources available to get this done faster if we choose react-native?
Resources available online:
http://jkaufman.io/react-web-native-codesharing/
https://arielelkin.github.io/articles/why-im-not-a-react-native-developer.html
https://medium.com/#felipecsl/thoughts-on-react-native-from-an-android-engineers-perspective-ea2bea5aa078
Cheers!!!
Instagram, Tesla, AirBnB, Discord, Bloomberg all have production apps written in React Native. I'll let you decide for yourself whether it's production-ready in your opinion.
While React Native enables you a significant code reuse between iOS and Android (we are currently building an app for client which - appart from external libraries - reuses over 99% code between iOS and Android), it is not designed to share code with React webapps.
The Facebook's philosophy with React Native, instead of write once, run anywhere is rather learn once, write anywhere.
You can definitely use your designs and architecture, but you would need to rewrite most of the code. It might still be more efficient than developing two separate Java and Obj-C/Swift apps, though.
Update: In 2018 Airbnb decided to sunset React Native in their production apps. They wrote an insightful article about their experience and reasoning. It is very relevant for anyone thinking about using React Native. https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1c
You cannot just use your whole code into the react-native application. First and foremost, you have to follow the react-native architecture and then develop your UI using react-native components.
You’ll certainly have to write your components separately for a mobile app and web app. But you can always reuse the business logic, API Communication layer.
Create the reusable component and share it in the Shared folder and reuse Mobile/Web anywhere.
Convert react to the react-native platform is an easy process. A step by step process how to reuse code in react native explain in the image with react native web view as an introduced bride as react-hooks
Step by step guide how to do React vs React Native reusability & what percentage of reusability that we can achieve between react and react native code will explain in the below part.
Sharable code between React & React Native:
Business Logc
Communication with API
Stores, Reducers, Actions and Services
Helpers, Constants, Storage Services
HOCs (Higher-Order Components)
Mobile / Web specific:
Dedicated code (specific code) for Mobile & Web separately
Presentational components
Navigation / routing
Styles
Setting up a shared project
Make sure you are at the project root folder
$ mkdir -p packages/components/src packages/mobile packages/web
Create react native project using react-native-cli inside 'packages/mobile`
Create react app using create-react-app inside packages/web
Create package.json at the root directory to enable Yarn Workspaces
Create a shared folder
Now create a common or shared folder where the common code of react and react native will exist.
$ mkdir -p packages/common
Create package.json file in common folder
Name the package and add main(entry file)
Configure React Web application
Add react-app-rewire-yarn-workspaces and react-app-rewired in dev dependencies in your web/package.json
Change your scripts from react-scripts to react-app-rewired
"start": "react-app-rewired start"
"build": "react-app-rewired build"
"test": "react-app-rewired test --env=jsdom"
"eject": "react-app-rewired eject"
Add config-overrides.js inside web
Configure React Native Mobile application
Configuring react-native on mono repo is a little bit tricky part. We need to understand two things before making workspaces work in our react native app.
Symlinking
No Hoist
Symlinking
symlink is a term for any file that contains a reference to another file or packages. To achieve symlinking we will use wml.
And finally
Create the reusable component and share in the Shared folder and reuse Mobile/Web anywhere.
Migrating from Web (React) to Mobile(React Native) or Mobile (React Native) to the Web (React)
Depends on the following key points
Followed Coding Guideline Standard
Modularised development
Component-based development
Segregation of sharable code
and code design for both (Web or Mobile) or not like the example Image
Here I tried for a simple explanation about how to share code between React and react-native with react-native-web. I'll add a detailed process (step by step) guide for convert react native app to web as well here in the coming days.
Migration from React to React Native
Conclusion - based on my understanding and depends on the above points, I can say that you can reuse from 20-50% of React JS code to React Native platform
From Scratch Development
Conclusion - based on my understanding and depends on the above points, I can say that you can reuse from 50-70% of React JS code to React Native platform
References website - Codingular
References website - Jkaufman
You could check out ReactXP (https://microsoft.github.io/reactxp/) which uses reactjs and react native to build cross platform apps.
Rather than bloat this answer too much, I wrote a fairly in-depth guide about this at https://dev.to/kylessg/a-sensible-approach-to-cross-platform-development-with-react-and-react-native-57pk.
To summarise though, you can get great amounts of codesharing between React and React Native but don't overreach on what you're sharing. Doing so may leave your code harder to maintain where you're trying to oversimplify valid differences between mobile and web.
For myself, this is along the lines of:
Shared:
Business logic
Communication with API
Polyfill possible shared functionality into an API (e.g. communication with analytics, local storage, network detection etc)
Stores, reducers app actions
HOCs
Web/Mobile specific:
Presentational components
Navigation / routing
Styles
It can be shared among mobile app and web app. You'll certainly have to write your components again for mobile app. But you can always reuse the business logic.
If you have used React in your web application, then the work becomes even easier. One of the major hazards in React native is State Management. Now the complexity depends upon your application. Usually it is advisable to use Redux along with React Native.
The real question arises is how much code you will be able to share. Hope this helped.
Nowadays there is a tool called react-native-web which lets you share code between web and mobile.
Read more: https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
Repo: https://github.com/necolas/react-native-web
Two popular options addressing code share across web, iOS, Android & Windows are
React Native Web - https://github.com/necolas/react-native-web
ReactXP - https://github.com/microsoft/reactxp
Below is an excellent excerpt from https://microsoft.github.io/reactxp/docs/faq.html highlighting the difference.
How does ReactXP differ from React Native for Web?
React Native for Web is an open-sourced library developed by engineers at Twitter. We started implementing ReactXP before React Native for Web was available.
The goals behind these two efforts are similar, but the approaches differ. ReactXP is a layer that sits on top of React Native and React, whereas React Native for Web is a parallel implementation of React Native — a sibling to React Native for iOS and Android.
ReactXP generally exposes only those props, style attributes, and APIs that are available across all platforms. If you write to ReactXP’s abstraction, you can have high confidence that it will run on all supported platforms in the same manner. The same can be achieved with React Native for Web/iOS/Android, but you need to be more careful about which components, props, and APIs you use.
You can certainly share the storage and the network layer b/w the web and mobile react code base.
Although, in practice you would be only able to share a part of the storage layer, because you might want to fetch data differently in case of a mobile app and a web app.
As of today the philosophy still remains as learn once write everywhere. As stated very correctly in other posts, both react and react-native being JavaScript based, with an architectural design approach you can share your business logic.
On the other hand, because of the nature of the hardwares, it is completely normal to have different presentation layers for web (mostly on your desktop/laptop browsers) and mobile (native).
The question asks for a tool that can speed up the development process. For this purpose this github repo named react-spa-jwt-authentication-boilerplate (*) can be used as an example. It shares the "business logic" between web and native versions via a folder named common-logic by keeping exact copies of *.js files. On the other hand navigation and presentation layer differs. It implements a sample authentication process which itself can also be used as a baseline for new projects.
(*) Disclimer: I am the implementer of the repo. We needed to implement the repo for the exact same need of reducing development time between mobile and web applications.
Yes we can reuse the code. And it works really well.
Here is a sample application repository
https://github.com/spoman007/reactXstarter
you can do that by turning stuff like code, hooks, props and even design-tokens into shared components:
Blg post with code examples
Tutorial video on youtube
I have an app based on the create-react-app starter kit and need to switch to universal/server rendering due to SEO issues.
Is there an easy way or example of taking the create-react-app teamplate and adding or modifying it to support universal rendering?
A lot of the examples I see for universal are overly complex for my needs and I prefer to keep it very clean and simple, if possible.
Thanks.
EDIT: FYI,
I found this medium post which points at this repository.
Seems simple enough, but since I'm a newbie on all webpack/react/node related stuff, if anyone thinks it's the wrong approach, would love to know...
There was a proof of concept of adding server rendering in this PR.
I can’t speak to how good it is but it’s something you could start with.
You may also look at some of the alternatives.
A few of them provide server rendering out of the box.
I've just created react universal (server-side rendering) starter used recommendations from redux and react-router v4. Fill free for feedback
https://github.com/gzoreslav/react-redux-saga-universal-application
You can take your app (bootstrapped with Create React App) to the next level by replacing react-scripts with a slightly altered version - react-app-tools, which allows adding server-side code to your project (e.g. for server-side rendering purposes and/or implementing an API endpoint). It will allow compiling and running your app using normal Create React App pipeline, using a single instance of Webpack, on the same HTTP port.
You can find more info by visiting React App SDK.