Reputation: 7055

React-native and React

I'm building a web app and ios/android (same app). At first I thought Cordova may be a good choice then after reading I thought React-native may be a better choice.

My question is: Will I have to write the same app twice (one in React for the web and one in React-native for mobile)?

I've seen some libraries that can share react-native components for the web but I feel I'm gonna be limited.

What do you think?

Edit: One more question With react I would use flux (and probably now redux) what should I do to keep my react-native app clean and readable, I mean how should I manage data there? thanks for your answers already

Upvotes: 19

Answers (16)

Bruce Lee

Reputation: 4441

i'm trying to do the same thing. RN is not all the same with React, you will have to deal with native views like: Text, View, ScrollView, ListView, etc. except this, they are nearly the same.

so, you can organize your code like this:

    root
        src
        lib           // code for all other three platform
        android      // code for android only
        ios          // code for ios only
        web          // code for web only
    index.js         //for web
    index.ios.js     // for ios
    index.android.js // for android

Upvotes: 0

Mehmet Kaplan

Reputation: 2382

You can share the business logic using the same JavaScript codes (simply by copying the code). 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).

You can refer to react-spa-jwt-authentication-boilerplate (*) 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.

Upvotes: 0

Lukas

Reputation: 10380

I wonder why noone is mentioning ReactXP. ReactXP is a library maintained by Microsoft that lets you create web, ios, andoid and windows apps with React:

XP means X-Platform Share most of your code between the web, iOS, Android, and Windows.

https://microsoft.github.io/reactxp/

Other options as mentioned are

Upvotes: 1

maheshiv

Reputation: 1858

I know this may be a late answer but it will be helpful in future. Check https://github.com/este/este, it has different stacks for mobile, web and server. You could use common components in common folder. It uses firebase as a backend service, but you can change to any service.

Upvotes: 7

Max Millington

Reputation: 4473

React Native relies on Native UI code and not html, meaning that all view components will have to be rewritten. However, if you keep all you logic out of your 'dumb' functional components in your web app, you should be able to reuse a substantial portion of your web code.

For instance, you might have an outer container that handles anything you want to happen on mount with componentDidMount, handles and defines onClicks, and determines which view components to render. This code can be exactly the same in web and mobile, and then your 'dumb' function view components would differ in that one uses native view elements and the other uses HTML.

Upvotes: 4

Alireza

Reputation: 104900

The short answer is...

YES!...

You need to write 2 code-base, but read on for the longer answer.

React Native is created for coding Application using some features of React, while React is created to do Website and Web applications, so they have similarity in nature, syntaxes and library which both using, So basically you need to rewrite some parts of you application, I can say around 20% to 70% percent and it really depends.

I compare React Native and React with some code samples from both for a small component, you can check the differences, but just let you know, for a real application, the difference could much more than what you see here:

React Native

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

more info here

React

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

import React, { Component } from 'react';

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        <p>If you like React Native on the devices, you'll like React.</p>
        <p>You just use web components like 'div' and 'span',
         instead of native components like 'View' and 'Text'.</p>
      </div>
      );
   }
}

ReactDOM.render(<HelloMessage name="Jane" />, mountNode);

more info here

Upvotes: 2

guitoof

Reputation: 955

You can share most of your code between React and React Native (especially if you use react-native-web.

Try this article : http://jkaufman.io/react-web-native-codesharing/ It gives a pretty neat example of how to do it.

I highly recommend that you keep most of your domain logic (API calls, flux, and even Smart component handling the logic) and only rewrite the dumb components handling the view so that you can implement the best UX for either Desktop or Mobile.

You can name your dumb component view files like so:

MyComponent.js (for your web app) MyComponent.native.js (for your native app) or MyComponent.ios.js & MyComponent.android.js if you rather have different views according to the platform.

Upvotes: 3

tetutato

Reputation: 648

Right now you can't share code base b/w React Native / React codes since one relies on native UI code and the other html DOM. There is an interesting project to combine the two (https://github.com/necolas/react-native-web) but it's by no means production ready.

Upvotes: 7

Zacaria

Reputation: 95

I suggest you to look at Redux architecture.

You will likely get the following folder architecture :

.
└── src
    ├── actions
    ├── components
    ├── containers
    └── reducers

If you organize well your code, the react-native specific component will only be located inside the component folder.

All the logic and even the organization is reusable.

You will rewrite the components with plain html instead of native component. And also the apps entrypoints as they are different, but I don't find it is a really big deal.

More redux examples https://github.com/reactjs/redux/tree/master/examples

To answer to your second question : Redux is the state(data) manager. It flows in a unidirectionnal manner.

For example, how do you handle a user click ?

The event is fired from the component
The container (which holds the logic) dispatches the action (say BUTTON_CLICK)
The reducers receive the BUTTON_CLICK with the current state, only the concerned ones will update the application state (ex: increment a counter)
When the state is updated, the render tree runs

Here is the full explaination of redux flow https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6#.z0bcil3i0

To better understand why this mess is awesome read this http://redux.js.org/

Upvotes: 3

Mindaugas

Reputation: 1183

React Native is for apps only, it generates fully native components and React Native has specific syntax for its components. Using some package to conert React Native code base into web would be noth worth it as you would be limited, and you go against React Native flow, it would be the same as converting Swift or Java written app into web via package. It is not optimal and limited.

This is the beauty that you learn javascript and with React(or any other library/framework of your choice) you write best possible web app with web experience, while at the same time using your knowledge on JS you can deliver fully native experience into your apps.

That's about the point of getting close to doing web and native - you can use the same core language and deliver best experiences on both worlds.

Upvotes: 0

Vignesh Prasad

Reputation: 101

I definitely think you can reuse some of your code. If you're using redux which you probably will if you have some complexity - stuff like actions and reducers are easily reusable. While the UI components itself is not reusable always you can reuse some of the stuff supporting it. Like timvp mentioned you can also use WebViews to reuse the code but I would not recommend since it does not have the same kind of performance as native modules always.

Upvotes: 3

Brien Crean

Reputation: 2648

While it's true you can't use the exact same code for react native and react JS, you can architect your code base to reuse as much code as possible. Check out this project:

https://github.com/benoitvallon/react-native-nw-react-calculator

Upvotes: 6

Timvp

Reputation: 3731

The code for the web-app and the native apps can't be the same (or you might be fine with a WebView wrapper as apps). I suppose you're asking that because the functionality would be the same for both interfaces. The look and feel can be (almost) the same.

If you see your apps only as views, the backend (controllers & models) could be shared with multiple platforms. You could also try a Backend as a Service like Firebrand or Parse. Not really an answer on the redux part but it is an easy way to get kickstarted.

Upvotes: 3

Nik Christodoulakis

Reputation: 41

You actually can use the same code with the use of WebView component in React-Native.

Here is a link: https://facebook.github.io/react-native/docs/webview.html

Upvotes: 4

Piyush.kapoor

Reputation: 6803

React native uses the native views UIView, Text etc for display. You can't have the same code base for them. React native uses flex box( it has its own implementation) so that also wont work for web react projects.

The only way is to keep them seperate.Also Web and App would be having different design .

Upvotes: 9

Balkana

Reputation: 706

Doing the same thing right now - I am not sharing the code base because the content of web/mobile app is different - I am using web for administration and mobile app for viewing the content.

Upvotes: 9

React-native and React

Answers (16)

YES!...

React Native

React

Related Questions