I wish to use this "https://www.npmjs.com/package/#vitalets/google-translate-api" library in React but the the instructions say I need to "const translate = require('#vitalets/google-translate-api');". This doesn't work in React.
If I try import {translate} from "#vitalets/google-translate-api/index"; I get "Critical dependency: require function is used in a way in which dependencies cannot be statically
extracted"
How can one use a library like this in React?
Google translate API is for node.js, meaning your backend
You're looking for Google Translate Open API or Translate Google Api probably ? But the first package seems to be broken and they both seem to not be used/downloaded often
When you're downloading, make sure it can be used with ReactJS/js in general on the frontend
Related
I have external api hosted in the cloud and I would like to write desktop app for management. Last version of electronjs I worked with was version 8 and over that time a lot of changed especially from security perspective. The concept of preload was introduced and I would like to know is it fine to write renderer as react app with redux toolkit and make api calls that way or should I use preload script to get data on the server side.
I would like to know what is a proper way of writing such app.
Yes, it is totally fine to use react and redux toolkit in your renderer.
To quickly get started, you could use something like electron react boilerplate or one of the several other boilerplates available online.
I don't understand why you would want to use preload to fetch from the server.
You can treat the renderer as just another browser instance and make requests to the server directly from your react app using fetch or xhr.
Preload is generally used to run code before the renderer has loaded. I generally use it as a bypass to turning on nodejsintegrations for my electron apps, but you can read more about it in the official docs
I'm using React and AWS CDK (nodejs) by typescript for my application.
Because some parts take graphql, there are so many duplicated type definitions.
(ex. To make 'Post' feature, I have to define the related types on front and back individually now: Post, createPost, postInput... etc)
Can I share the type definition by npm private account between of them?
or Is there any method to share it?
or maybe this question can be "How React frontend developer and CDK developer communicate about their type definition?"
I want to define the types once for consistency and effectiveness.
Thanks.
(Added informations)
I'm developing an application by React frontend and AWS CDK backend.
React frontend and CDK are using typescript.
and for data fetching & subscription, I'm adding some features by graphql instead of REST API. (There is another existing backend service which is not CDK and those parts are using REST API)
(I have another plan to convert this project to use AWS Amplify after sometimes because it supports autogenerated type definition, but it seems better to start with partial area without it now... not sure. I'm exploring)
Because the React frontend and CDK also use typescript, I have to define same type definitions on both of them. For example, if I want to provide 'post' feature, I need to define 'Post', 'PostInput', 'UpdatePost', 'CreatePost'... etc on the React and also on the CDK.
If there are some inconsistency which are not intended, it occurs error.
So I've guessed that maybe there are some way to share the type definition because React and my CDK project are using javascript.
That's why I mentioned the npm. I wonder if it is possible to use npm private package for sharing the type definition.
or.. is it better to use constant instead of the type definition? but it's not proper to take the typescript advantage.. right?
You can use GraphQL codegen to generate types from the schema definition.
I have a request from a client to implement deep linking in our React application whereby clicking a link will take them directly into the installed app (potentially to a certain point but not sure on that yet).
To my understanding react-native and react-navigation both handle this as part of a feature set within "Linking" that they offer. However it seems excessive to import a framework just for deep linking (perhaps not though).
After googling I can only really find references to deep linking on react-native or react-navigation.
What is my best course of action?
Let's get to some basics first, then it will be clear.
In modern SPA's, say with React, it's common for the SPA to handle navigation itself. You need to use browser's history API. It's because your SPA is just a single index.html with bunch of js code, so it sort of virtual, every page is constructed by your app. In order to not reinvent a wheel, its easier to use some library for that, say react-router-dom.
But then everything works as expected, and you have deployed your app. When user wants to get some deep page, say, https://my-awesome-app.com/deep/page/1, browser will just send a request to a server, asking: "Please, server, give me a page 1.html, in folder page, in folder deep". But server doesn't have that file, because it has literally one index.html, because its a SPA application. Then we need to tell the server to re-write all deep routes to index html, here is an example for my app hosted on Netlify:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
When user will ask for that page, server will 'redirect' that request to the index.html and my react-router-dom will figure out which 'PageComponent' to render based on that path.
So, you can implement routing in your app yourself, probably using browser's History API, but I guess it might be easier to use library. But it's your call.
On the other hand if your app is not an SPA, the story might be different, because say in NextJS routing is implemented in framework itself, and if used deep linking would require different setup depending on how app is deployed.
Deep-linking is handled largely by Apple and Google server-side
https://www.adjust.com/blog/dive-into-deeplinking/
React-native provides extended functionality for deep-linking within mobile apps but normal web-applications there is no need to implement it there. Use universal links or Google specific links as standard linking within your web app to enable deep linking
I am new to web development I want to create an application using React and Django but all tutorials show that by using REST API.
is there a way to use Django and react without REST API and perform CURD.
I recommend also reading this blog post https://www.valentinog.com/blog/drf/, where Django and React are integrated via mini React apps inside Django templates.
I am not sure if it is the best approach, but may be useful.
React JS is a frontend JavaScript library. Whatever data is received by React from the backend, it's supposed be in JSON format and Django, if used without REST FRAMEWORK, doesn't pass JSON objects. It passes Query sets instead which are not acceptable and iterable in React. So, you have to use Django REST Framework, which makes use of serialisation and deserialisation for CRUD operations and hence creating REST APIs.
No, it's not possible.
Because even ReactJS is supposed to be on client side(Frontend). npm run build generates HTML/CSS/JS bundle for your app.
For backend, you might need node-express/Django rest... etc
HERE is complete guide to integrate your app.
Yes, you can do that with Django but in the end you need a API, no matter if it is REST or GraphQL because Django take care about the backend and React do all the stuff in the front end and you will need a way to connect both (and you do that by using an API)
I recommend you to use Django Rest Framework if you want to use a REST API or Graphene if you want to use a GraphQL API, here is a very cool tutorial to start with graphql.
I'm learning react. W3schools says (in this link):
The quickest way start learning React is to write React directly in your HTML files.
This way of using React can be OK for testing purposes, but for production you will need to set up a React environment.
So my question is : Why?
To avoid runtime react code compilation into Javascript which may consume lot of memory.
Your Browser do not understand React but JavaScript and when you are providing the babel to transpile your code, its not efficient and memory performant. So to make your app performant its advisable to create a bundle first and then deploy it to your webapp.
For learning purposes you can try developing an app by passing babel/react links and after sometimes you will surely feel that your browser starts hanging etc.