In a webapp with javascript minified, is there a way to tell if a webapp uses reactjs using developer console?
You can check by just using typeof:
typeof React
But this will only verify on the page you're currently on. Nowadays, app consists of multiple environments, frameworks, etc. You may use some extension that will tell you what framework is being used in the application. For eg. check builtWith.
Related
I have recently been learning Next.js for React and I like the routing system a lot more than react navigation. Now I am about to start a react native frontend and I was wondering if you can utilise Next.js's routing system in react native as well as it's other benefits. I know that you can use it with expo but I am a little confused as to how it all works and I am starting to wonder if the Next only works on the web side of things..
Does anyone have any experience with this? Any information would be much appreciated.
Thanks!
Unfortunately you can't do such thing, due to the fact that the views of react native are Equivalent to native views in Java or Objective C. When you get build version of react native , you are receiving Java or Objective C native views thank to react native's RN bridge. Meanwhile, when you get build version of your Next.js project, you are going to receive HTML, CSS, JS and these codes are not familiar to native platforms.
However, you can use your Next.js backend as your endpoints and fetch data in react native via calling this endpoints.
UPDATE Oct_2022:
there seem to be a new tool created for this purpose , called solito. I haven't used it personally but it might meet your needs.
UPDATE Jan_2023:
It looks like there are more Tools being created for Both web and native platforms , check react-native-web
You can check out Tauri. With that you can create from Next.js, React, Svelte etc. cross-platform native Apps. Currently, Windows, Mac and Linux are supported stable. Android & iOS is currently in Alpha
The magic behind Tauri is, that they provide around your Frontend library/framework a Rust layer with that you can interact with platform native APIs. They call it Commands.
You can find the guide for Next.js here.
Also, if it's not exactly answering the question - "Is it possible to use Next.js in React native?" - I hope that it's helping everyone who is searching for a solution to use Next.js as Cross-Platform Frontend Framework
I read a thread on ycombinator on this where Solito was mentioned and tried it out. In the comments I found this, which suited my needs best :
https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter
Solito looks nice but the all in one repo was using Expo, which I did not like because it installs an extra app. I would check it out for yourself and look at the repo above too, which is using Capacitor and is aimed at having one codebase for the two apps.
Both examples worked well. For Tauri I could not find the mobile support so I didn't try it. I would be interested to read more about people's experience with running a minimum stack for cross platform development.
Note : Solito uses React Native, the repo uses Capacitor instead, which may also suite your needs because it works on both iOS and Android.
There's a lot of support now for this tech stack. Besides solito, which is already mentioned, there is also https://tamagui.dev/ which tries to solve all the issues with react-native-web and Next.js along with Solito.
While they currently recommend a monorepo (which adds a lot of complexity in my opinion), I'm playing around with a vanilla React Native + Next.js here: https://github.com/criszz77/luna
This command should get you started to play around:
npx react-native init MyAppName --template #criszz77/luna
I would like to generate Typescript React pages or components by using an API and not a CLI tool (like Plop.js) offers for example. The idea is to generate those components from templates based after a tool is run and it should happen behind the scenes without user interacting with the default CLI tools that they usually come in.
Thank you.
You can use http://json2ts.com/ for this issue.
Or also there is package
https://www.npmjs.com/package/json-to-ts
I have come across Hygen and used their setup that was noted down in the Readme to setup an API for generating custom components without interacting with any default CLI tools.
My question is, can I use the react framework with #spartacus storefront? this is because our frontend application is developed in React and we want to use #Spartacus storefront to leverage advantages like decoupling front-end and Hybris build ..etc. but as it is developed on angular I am not sure whether it supports other frameworks like React within it.
There is some effort in making possible using web components as cms components, so you could use any technology to author them (including React), but it's still in the experimental phase (but works already).
More info is available in the docs:
https://sap.github.io/cloud-commerce-spartacus-storefront-docs/customizing-cms-components/#using-web-components-as-cms-components-experimental-support
And here you can find some example POCs for React, Vue, and Svelte:
https://github.com/dunqan/react-cms-web-component
https://github.com/dunqan/vue-cms-web-component
https://github.com/dunqan/svelte-cms-web-component
Spartacus needs Angular. So, I would say "NO", unless you want the complexity of integrating Angular with React.
I would like to build a complicated web component that:
I Can use in my legacy web site (or any other site)
It can be used weather my web site is built with Angular/Angular2/React/Jquery etc...
I can use any technology to build it Angular/Angular2/React etc...
Avoid dependencies & versioning collisions (i.e my component is built with Angular 1.5.6 and the implementing website has Angular 1.4.7)
Would using NPM module could solve this issue (versioning, depenencies etc..) ?
Edit: (example)
For example i would require my component via npm
which has the dependency (requires) the framework i chose (i.e angular 1.5.6)
in this scenario wouldn't my component code use my dependency from NPM (regardless what the site uses)?
You may use a component built with angular on a legacy site but you must load angular before. You should be aware of name collision you might have with other directories.
If the site is already built with angular 1.x you may just blend your component in, considering that your component is compatible to the angular version the site is using.If it is not, I think react can be possible because it may blend in.
In case the site is built with angular 1.4.7, as you have said, you might need to downgrade your component to be used by 1.4.7. This means that if you're using angular.module(...).component you will need to switch it to directive. Alternatively you may switch the site to work with 1.5 if it is possible. If not, you may go back to react.
If you want to use angular 2.0, you may do so side by side with angular 1.x, however, the legacy application needs to be bootstraped with angular upgrade module, using upgradeAdapter. This means you need to interfere with the application, which you don't want to, if I understand you correctly.
Key mirror is a simple package which is used to create an object with values equal to its key names. It is first used in facebook react project.
From a comment here, it seems to me that this package only makes sense when being applied to react web project, as it can survive google closure advanced mode to make web load faster. I am wondering if anyone use it in a react native project, as I tend to think there's no point using it in app development.
thanks :)