How to pass a POST request in ReactJS? - reactjs

How can I POST and DELETE requests using ReactJS?
My REST application is built in ASP.Net and Core 1.0.1 (API handling data).

React was designed for MVC Views, and as such is AJAX/data agnostic.
I recommend a library made for simplifying ajax requests, like axios or fetch.js
https://github.github.io/fetch/
Flux might also interest you, as it's an architecture by facebook for implementing data in your frontend:
https://facebook.github.io/flux/

You could use a promise based library like 'axios' to make async requests and chain the state change inside the promise then method

Related

Do I need Inertia to use Laravel + React

I want to move app and I am looking to new technologies. I have no experience with Laravel, but I wonder if I want to create a Laravel + React web app do I also need to look at Inertia, or I can do Laravel + React without Inertia?
NO. You can build an app with Laravel and React as your front-end without Inertia.
HOWEVER, if you're looking into building an SPA, I'd recommend looking into Inertia, since it makes the process of integrating the back-end and front-end a lot easier and you won't need to write an API to get them talking to each other.
Backing up a bit #Matheus 's answer.
The purpose of Inertia is to be able to create an SPA application using the laravel routing system.
You can create your routes in your web.php, that would point to a Controller's function and that function would return a React component with your data as props.
This takes away a lot of work on both sides. Without inertia you would need a frontend application made in this case with React, then useEffect would be responsible for calling an api in your laravel application to then retrieve just the data so you can use it on your frontend application.
Either way is possible, although if you are a fullstack taking care of both, the frontend and backend I recommend Inertia to save yourself some time and CSRF token pain :)

How to do back-end in ReactJS- (Is it possible)

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.

How To make a 3rd Party Api call using React Relay

I am quite new to relay , My idea is to make a 3rd party API call , which returns a JSON object. for example you can consider this URL as an API call which returns a simple JSON. "http://ip.jsontest.com/". How Do I go about with the react Relay design
It depends..
From server?
Just write a graphQL schema as usual but instead of a database request, make an 3rd party API call and use schema resolvers if data structure requires it. You might want to add a caching layer if data isn't extremely dynamic because 3rd party API calls might be slow (not a rule of thumb).
Now you can get the data via Relay Containers as usual. Relay also handles client-side caching!
From client?
There really isn't Relay design for that because Relay is currently only a glue between graphQL and React. It might change with v2. Do as you wish, for example, use a regular function or React method:
getMyData() {
// ajax call or fetch()
}
Downside to this is that if you need to reuse that data, client-side caching is your job. Use either Flux / Redux, store it in global variable (not a good practice) or in storages (indexedDB, localStorage etc).

How to best encapsulate Google JS API on AngularJS app

I want to use the Google JS API on my AngularJS web app. As I'm a newbie using Angular I'm a bit confused on how to encapsulate the gAPI calls. Basically I want to authenticate users and call some Google APIs (eg: spreadsheets, calendar, email, etc).
Considering a basic AngularJS app structure (main module, controllers, services, providers, etc), I decided to create a provider in order to encapsulate the Google oAuth authentication flow. And then I created some services to make the services' API call (calendar, docs, etc). Here I stated to get lost... :-\
Some questions:
How can I control (verify if the user is already authenticated) the access to my views? In each service or view controller? Or maybe on $routeProvider config?
In terms of Angular service/provider design... Is better to expose all the gAPI functionality I want to use in a Angular Service/Provider or simply access the gapi object directly in each angular controller/service?
Maybe consider using a library like https://github.com/maximepvrt/angular-google-gapi. These types of questions are hard to answer without knowing the scope of your application.
In general, I'd consider how much of the GAPI you are using and how much abstraction of the GAPI you will need. If you are doing fairly light weight things, then it may be fine to call the GAPI directly.
If you think you will be reusing the GAPI throughout the application, consider using the linked library or even wrapping the GAPI with your own services and providers.

Building a firebase app without angular

I'd like to build a firebase web app. Most examples seem to recommend using angular with firebase, and the angular-fire bindings in particular.
I don't use Angular and it seems like unnecessary overhead. My understanding of firebase is that it provides a simple JS API, where you setup callbacks and handle the events to update the dom, which could presumably be jquery. Since firebase is using a broadcast/web socket approach to send changes to my app, I'm not sure if I would need angular's 2 way binding all that much.
So, do i or should i use Angular with firebase or not? Will I run into issues with $scope and angular's lifecycle of events? I'm also concerned about the major changes coming with Angular 2.

Resources