Can I use reactJS library in react-native? - javascript

Well, this might be a silly question but I want to clarify the reason.
React-Native imports nodeJS libraries, so I think it is possible to use reactJS library as well though reactJS includes pure html components.
Can react native recognize reactJS components including html?

react library actually does not have anything related to Browser DOM HTML. Anything related to it separated into react-dom package. React Native does not and cannot use this library, because you don't have DOM underneath a react native application. However you can use most of the code/functionality you wrote for your mobile app in the browser, if you install necessary transpiling library. This is possible because react native defines some primitive components that can be ported to almost any platform.
If you still want to use just HTML to render inside react native, you may use WebView for it.

Usually libraries built specifically for other platforms will not work with React Native. Examples include react-select which is built for the web and specifically targets react-dom, and rimraf which is built for Node.js and interacts with your computer file system. Other libraries like lodash use only JavaScript language features and work in any environment. You will gain a sense for this over time, but until then the easiest way to find out is to try it yourself. You can remove packages using npm uninstall if it turns out that it does not work in React Native.
-- source: React native official docs

Related

How to make a library compatible with a React Native project

I imported this library https://github.com/THCLab/oca.js-form-core in my React Native project but I get an error when instantiating const ocaJs = new OcaJs({});:
Error: Automatic publicPath is not supported in this browser, js engine: hermes
The library is Node.js compatible (there is an example in the Github repository). However, it is packaged (npm) with webpack and I believe that the React Native project uses this package for import. That's the problem (i think - i'm a beginner in React Native). There are references to the DOM added by webpack. Is there any way to force the use of the Node.js build instead?
Have you tried specifying the publicPath explicitly as discussed in the answers to this question?
In general however, because React Native does not contain all the Core Node JS Modules, many libraries which are compatible with Node.js require polyfills to work in React Native. You can attempt to make a polyfill yourself by following a guide such as this. I have experienced mixed results with such methods, but I am far from an expert. From my experience, trying to create a polyfill can be a time consuming venture to pursue, and I would recommend first exploring whether or not a React Native library exists which can help you accomplish your objective.

Converting existing site to React JS (Adding ReactJS to existing webpage)

I am kinda new to front web development, but there is one interesting question for me.
I got a simple vanila html+css+js website, in which I want to integrate a few actions (profile page, custom e-commerce, checkout, etc) using React.
As I followed this tutorial (Add React in One Minute),
I had successfully "inserted" react component into the webpage. But the normal reactjs applications are able to use installed libraries, use props to pass data.
So, basically, the question is how to run this webpage the way that react will be able to handle libraries installation (common npm i example) in order to be able to import them and work like with normal react application created by npx create-react-app my-app
You could use libraries via a CDN link, the same way you added React via a script-tag to your site. Ultimately i think you're looking for the developer experience one gets while using JSX-syntax and this would require you to rewrite your exitsing app, achieved trough setting up a node project with your mentioned command npx create-react-app <app-name>.
JSX must be compiled to regular JavaScript so that browsers can interpret them correctly, much like you would compile a C++ program to a binary file.

React Native library development and usage

I develop apps in React Native, I need to build my own libraries and to reuse them in multiple React Native projects.
With React Native I couldn’t link a library from outside the project, so I can't simply link my library to all my React Native apps.
What is the right way to do that?
I need to have a development environment to develop and test my library, but I need also to import my library in all the projects I need.

How to use react native on codeanywhere.com

I was wondering how to create a project in codeanywhere.com which supports react native. It isn't included in the initial containers so you somehow have to add it later but I am confused with which container it would be better to select.
I was also wondering if it includes intelligence for JSX.
Node.js Development Stack with Node.js, nvm, npm, Redis and MySQL Server preinstalled.

React/ Flux Frontend and Meteor Backend

I have been using React and Flux for about two months now and its been great with Flux unidirectional data flow.
I have just heard of Meteor and it's great with its publish-subscribe and DDP. I have a project at hand where I have created some of my React components already and done the application logic using Flux (alt.js).
Now I just want to use Meteor for my backend and use my React components with Meteor front end. Noting that it depends on other NPM packages (I use webpack for module packaging).
So can I use NPM packages in Meteor and still use JavaScript ES6?
There is a Meteor.js React package at Atmospherejs, but it's not the same as the original Facebook React.
I'd suggest these 2 articles:
https://medium.com/#SamCorcos/meteor-webpack-from-the-ground-up-f123288c7b75
https://medium.com/#SamCorcos/meteor-webpack-react-router-a-basic-template-with-code-splitting-ac2f95d151e2
Very clear explanation of using webpack ES6 React+meteor stack.
Here couple example projects: https://github.com/thereactivestack/kickstart
Meteor's existing Blaze rendering engine is actually only loosely tied to its publish/subscribe model. In fact, there has been significant interest in the Meteor community in using React as a substitute for Blaze -- so much that there is actually an official integration in the works. (There is also an integration with Angular in progress as well.)
This integration aims to solve several issues to make using React in Meteor as painless as possible, including a ES6/JSX transpiler and the ability to use reactive Meteor data sources in React components.
Although there are some existing packages to use React with Meteor, the official integration by MDG looks great and you can look forward to using it with Meteor 1.2.
Additional links of interest:
Meteor: the missing infrastructure for building great React apps
Preview of official React support

Categories