Is it possible to change/convert a plain react app into next app?
I have a project created with create react app but things have changed and now I want to switch the project into next app
maybe there's a possible way to do that? or should i start over from scratch to build my next app project?
I've been trying to research on how to migrate the project, but didn't found the solutions.
It's difficult to answer this question without seeing the actual project and dependencies you use, but here's a few considerations:
You'll need to convert your current routing solution to the one Next.js uses. Their routing is determined by the file system structure, rather than in code (like react-router). For more information, see their docs: https://nextjs.org/docs/routing/introduction
Ensure all your components and dependencies can render on the server, this may require moving behaviour that uses browser APIs into useEffect hooks (like window or document properties).
Move your hosting and building to something that supports Next.js configurations. There are a few including Vercel, Netlify & AWS.
Also check out their own migration guides that cover how to convert configurations to Next.js: https://nextjs.org/docs/migrating/incremental-adoption
In short, it really depends on what you're currently using and will require manual conversion your code. I hope this was still helpful.
js and React experts,
Situation:
In our portal we have 2 completely different applications: CMS (PHP based with its own framework, templating engine and so on) and an Online Shop (Next.js based, React technology stack).
Now, there's one module which is already completely built in the Next.js world, but it doesn't exist in the CMS world.
Challenge:
implement the same functionality also in the CMS part of the website with minimal possible effort
Obviously, the naive way would be just to implement it once again in the CMS technology, which is possible, but not very elegant, as the implementation in Next.js will be supported by a separate team, which is going to change things over time and add features, that all would need to be implemented twice.
I'm new to React, but according to an example from the official docs there is a way to run a React app encapsulated in one div element (see https://nextjs.org/learn/foundations/from-react-to-nextjs). I tried it and this minimal example worked embedded in the CMS templating context just fine.
Now, the question is: Would that also work with a Next.js component? Can I render the complete subpage with a separate CMS engine and only one single encapsulated HTML element with Next.js? From what I understood Next.js is built to take over the rendering of the whole page completely, but maybe there's some advanced way to make it work React-like?
Thank you very much for your input.
I've created a web application using HTML, CSS and Javascript but is it possible to convert it to a react-native app with the help of any kind of wrapper for HTML, CSS and JS code which can be used within react-native. I would like to convert the web application component into react-native components though it would be a tedious process if I need to change anything in the web application which in turn lead me to change the react-native components.
You cannot use html,css,and javascript code for react native app. Beacause react native has its own tags so it wouldn't possible but still if you can follow the attached url hope it may give you ideas
https://medium.com/javascript-in-plain-english/how-to-convert-any-web-page-to-reactjs-9740f1ba15db
a method would be...
react-native-WebView? I haven't tried it out but from what it sounds like I think its like android web view where u can give it a link and it will load that webpage? that's the closest thing I can think of. of course this method has limitations obviously...
I don't think there are any good methods to turn react code to react-native code since both have different tags and even if you do somehow do it you will have to climb mountains of bugs and fixes if your app is kind of complex.
but if in the future u do take up a project that is for both web and native, and they both share a load of functionality I would recommend something like react-native-web where you can share a codebase between web and native. essentially by making a native app ur making a web app aswell. its a bit tricky when u start but if your having projects like this it will be helpful. hope this gives u some ideas
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
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.
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 .
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.
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.
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
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
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.
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.
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.
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/
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.
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
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
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.
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.
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