React-native和React

Question

I'm building a webapp 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 web and one in reactnative for mobile) ?

I've seen some library that can share react-native component for 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

Answer 1

现在做同样的事情 - 我没有共享代码库，因为网络/移动应用程序的内容不同 - 我使用网络管理和移动应用程序来查看内容。

Answer 2

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 .

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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

Answer 7

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.

Answer 8

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.

Answer 9

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.

Answer 10

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 ?

1. The event is fired from the component
2. The container (which holds the logic) dispatches the action (say BUTTON_CLICK)
3. The reducers receive the BUTTON_CLICK with the current state, only the concerned ones will update the application state (ex: increment a counter)
4. 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/

Answer 11

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.

Answer 12

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

Answer 13

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

• https://github.com/necolas/react-native-web
• https://github.com/este/este

Answer 14

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.

Answer 15

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
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


Answer 16

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.