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.
Related
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
I am working on a react app with mapbox that gets data from a JSON file and adds the data on the app.. I have successfully built the app. But what I want now is that I want to be able to use my react-app as a web component. In a way that it will be usable in websites and web apps.
Think of it this way:
Your React application is the U-Haul truck that delivers everything from the Web Server (Back-End) to the Browser (Front-End)
Now you say you want everything wrapped in a (native) Web Component:
<move-house></move-house>
It is do-able, but you as the Developer have to develop all dependencies
It starts by fully understanding what React is and does, so you can wrap all its behaviour.
Unlike other Frameworks (Angular, Vue, Svelte) React has no "Make-it-a-Web-Component" option,
because React, with its virtual DOM, is a totally different (and rather outdated) beast that doesn't comply with modern Web Standards. (today [Dec2020] React only scores 71% on the Custom Elements Everywhere test)
See: https://custom-elements-everywhere.com/libraries/react/results/results.html
for what you as the developer have to fix, because React does not do that for you
Some say React compared to modern JavaScript technologies, Frameworks, Web Component libraries like Lit and Stencil or Svelte, is more like:
It is possible in react using direflow. https://direflow.io/
I am currently studying RN by myself, without prior knowledge in React. A lot of things seem to exist in both such as Redux and hooks. Many of the resources I find refer to React in the title (e.g "Redux Crash Course With React").
My question is: where does the line cross between React and React Native? Would I be fine studyig form these resources that refer to React, or would that just confuse me?
I'm trying to understand a go to approach to understand which resource I'd be fine with and which would be irrelevant.
React Native contains React library to use it as front-end library.
Most of usages of React are the same for React-Native. And it is same for Redux too.
React-Native must have other libraries to build applications that can run on both of Android and iOS.
Also it has middleware libraries that allow us to use most of native libraries' functionalities. As an example you can check Alert directory out. It is used for to show native Android alert dialogs.
Good luck..
Both react and react native use javascript to create the user interface we need but the difference is in the rendering, style and bundling and you should know that react native is a framework itself but react.js is a library. the main difference:
---React-Native doesn’t use HTML to render the app, but provides alternative components that work in a similar way. Those React-Native components map the actual real native iOS or Android UI components that get rendered on the app.
---With React-Native, you’ll have to learn a completely new way to animate the different components of your app with Javascript.
--- navigating between pages are totally different!!!
so we conclude that it's better to study references based on RN not react.js . but some functionalities such as redux or hooks or a lot of it's components are exactly the same and you can study react.js references for them. only the 3 differents that i said above are important.
I heard "grommet with reactjs" has good UI. So I want to try "grommet" on my environment. But I couldn't understand how to use "grommet". Because I expected this module can work on usual internet browser only. But sometime some websites explained "to use node.js" for grommet. Is this serverside module? Can't use "grommet" internet browser only?
https://v2.grommet.io/
I already read component's page but I wasn't able to understand.
https://v2.grommet.io/components
React is a framework for creating UI components.
Grommet is a set of components built with React. If you need a calendar in your application, you can use the calendar provided by Grommet instead of building your own.
Another example of a component library similar to Grommet is Blueprint.
You can use Grommet wherever you use React. React is meant to be displayed in a browser. React can also be rendered server-side (into static HTML) and then made 'dynamic' again on the client (browser side).
React is javascript, and if you want to see React in a browser, the browser needs to fetch the javascript and HTML from the website from a server/website. You can, but do not have to, use Node.js to serve your React/Grommet website.
We are currently moving an application from asp.Net to React/Redux and .Net core. The application is really complex so we are trying to make so that each page its is own module. But there certain components (Modals, PDF viewers, and other specialized viewers) we need to access throughout the application. Is there a way to add these components from other React projects in a specific application without having to load the entire application. Or maybe create a core React/Redux library that goes in the entire application?
Thanks
Note: we are currently using Webpack, ES6, React and Redux
As a sibling to your modules directory, you may have a shared directory. Inside here, usually, you'll have directories like styles/, fonts/, images/, and ... components/. The components here may be thought of as the atomic structures that create your "molecular" modules. For example, any custom UI components (e.g., buttons, dropdowns, tooltips) go here--assuming you're opting out of MaterialUI.
Then from within your larger "feature" components, you import these components and use them.
As a further step, you can build all your shared components as a private npm module and bring it in that way.
Since Redux is in the discussion, aim to make your routed components be container components. In other words, in <Route path='/something' component={ThisComponent} />, ThisComponent ought to be a generated container component, via the connect()() method.
I would advise against using a Router as your application could easily break should the .net application change urls.
Another option would be to use something like React Habitat