How to combine different react components? - reactjs

I have made a project for mobile UI and one for desktop UI for website. How can I combine both by using something like
react-responsive is there any way to do this.

Related

Reuse common components between a ReactJS and a React Native application via a design system

I have two separate applications: one React web application and one React Native application (currently targeting iOS and Android). Both applications serve different purposes but they should both adhere to the same style and design.
Is there a way to extract a library of common React components (form fields, buttons, icons, labels, widgets, etc.) and import these in the two applications?
Yes you can, look yarn workspace this is what you need.
This is also called a Monorepo (https://medium.com/#ratebseirawan/react-native-0-63-monorepo-walkthrough-36ea27d95e26)
Hope this can help you!

How to combine react and react-native projects?

I have created a website with react.js, Material-UI, and node.js. Now I want to create a mobile app for that website with React-native. I have used redux,react-redux, and saga on the website. I am new to react-native.
I want to know, Is it possible to create a mobile app and website in a single project structure, If possible then how? Because I don't want to repeat the same state and API calling procedure two times.
React.js uses HTML to render pages and React native doesn't support HTML so you can't use direct HTML.
You can buy react native theme that suits your need and you can re-use services and api call logic from react code.
Theme: https://codecanyon.net/search/react%20native
You can't just use your whole code into the react native app.
First and foremost, you must adhere to the react native architecture before creating your UI with react native components.
https://reactnative.dev/docs/getting-started
The most of the assistance will be found here.
There is also the option of creating a new react-native project and using webview to show your entire website there.
https://github.com/react-native-webview/react-native-webview

Use of material design components in codename one

Is there a way to intergrate material design components in my application? I find them very nice and would like to add them to my application.

Using react-native components for react web

How can we use share components between react-native and react web projects. I have read react native can be derived from react. How is it possible to use same js code between two projects (fully or partially) ?
Take a look at the react-native-web library. It's pretty good:
https://github.com/necolas/react-native-web
As long as you only use react native components, e.g. View instead of div, and Text instead of p etc, you'll be able to share view components between your app and website. Then you can pass down all the data from API calls etc as props from within the individual mobile app/website code.
In my projects I have a common folder that contains all these shared view components, and only put the platform specific code inside mobile or web-app. It works pretty well that way.

Can React Native app (means same codebase) be turned into mobile web app?

Whether the same REACT codebase can be shared across mobile web and mobile app?
Unfortunately, you cannot. React Native uses a bunch of pre-built components that are really just native iOS components wrapped in Javascript. For example, you could use <div> or <span> in React but in React Native you'd have to use <Text>, images can only be displayed in <Image> components, etc. There are also stricter limitations on what styles, data, or nested components each React Native component can have.
On a side note, trying to do this goes against the React philosphy -> 'Learn once, write anywhere'. You can try taking a look at Ionic if you're interested in something that ports easily over to mobile apps.

Resources