Live database fetch using Laravel and React - javascript

I'm new to React and still learning Laravel, and I was wondering how can I live fetch data from the database using the Laravel Controllers. I want to use React too but I really don't see his utility there.
From my searches, I found an Ajax method, but I really want to use just Laravel and React to do so. Is it possible?
Like displaying the new users directly from the database without refreshing the whole page? I'm using Mysql to manage my database.

First of all, You need to set up laravel sanctum to get the authenticated data.
But if you don't want the authenticated data. You can just use a fetching library like axios to fetch data from the laravel. You need to add the cors (which is localhost:3000) in app.cors.php file of laravel root directory.
But if you are using reacjs with laravel like with intertia.js (which I prefere btw), You don't need the cors, laravel will work out of the box....

Related

How to render a Django Serializer Template with React Js?

I've set up my api for a basic model in my Django project. I've defined my post and get methods and everything is working correctly. Now, I'm wondering how I can render my Django model using react js. Essentially, I'm wondering how I can use react js to assign my django model values that were inserted using reactjs instead of django. For example, if my django model's fields are "name" and "id", how can I assign these fields using reactjs instead of the basic Django page(I've inserted my current page below)? Do we need to use axios or jquery to make these transitions? Thanks.
Instead of thinking how to render your django model in react, i think it is easier to understand when you think in the server-client model.
Basically you want to get you data from your django server and then show it in the client, using react.
To do this with Django rest framework, the best way is to make HTTP requests from the client to the server. You could use the browser built-in fetch api from javascript or a http library like axios.
You can read more about fetch here

Laravel user authentication in react-native?

I'm working on my first react-native app, coming from vue-laravel background I was wondering if it's actually possible to use laravel normal auth for my react-native, so far it seems I can succesfully login a user sending their credentials via POST request to my API, however subsequent uses of Auth helper fail, that is I can't get the logged user using Auth::user(), it returns null...
Is this possible to accomplish? I have read about firebase auth but I don't feel like adding another database system to my laravel main Mysql database, truth is I don't know for sure what laravel uses for authentication under the hood so I can't get this to work.
Any help would be appreciated.
You can use tymon/jwt-auth for backend (laravel) and use the token in frontend(react native)

How to implement a weather API in cordova

I have to create an android weather app with cordova using data from openweathermap.
The thing is I install cordova and I get to the "hello world", but I have no idea how to get data from openweather.
I create the project in cordova, then I can edit that hello world as it was a web page using html, and css.
But how do I make it to search for places and get data from openweathermap?
I have registered in openweathermap, got my own key, but don't know how to use it.
Don't even know what sohld I study to learn how to do it.
I think I should make a request to the openweather API, then openweather will reply with the weather data in json format, then I should get that data to my website/cordova app.
But how?
Thank you
Been looking for tutorials, but none I found explain what I want.
They use Ionic or react, stuff I don't know how to use.
I would like to keep it simple, just look for the city, and get the weather displayed, to know how it is done.
TL;DR - You are going to be making GET requests to the server
Ok so, what you're looking for is the ability to fetch the weather data from the API server and display it on your component template somehow. What you need is the HTTPClientModule that comes with angular (and therefore with Ionic if you are using Angular as your frontend framework, v4 works with Vue and React as well).
I know this is rough for a lot of new developers so I'll make it as simple as possible for you, import the HTTPClientModule inside your app module so you can use it globally. Then, the best practice is to place all API calls(which is how you'll fetch the weather data with your key) inside a service. Create a GET request to the URI endpoint associated with the data you require and voila, you have your data.
From there, go to your page's typescript file and import the service and declare it in the class constructor. From there, you can make a function that subscribes (since Angular ships with RxJS) to the service function that fetches your data and saves it to a variable.
If you want to pass that onto your component view, well I'm sure you have interpolation figured out. Don't forget to use the async pipe since you are fetching asynchronous data.

Calling a django api from react for sign in page

I have built a react application which has a login page. I am done with the frontend of login page using react. Now the other person from my team has build a backend api on django. I want to call that api from my react code now. How should I do it? Do I need to learn something specific? I have searched in internet and all of the sources we to make serve react and django from same project. I have a React project with me and a separate api developed by someone else. Please guide me through this. I am pretty new to this.
No, you dont have to learn something new. You need to just make an ajax call to the API endpoint from within your react application to fetch or send the data needed and handle the response.
Also keep in mind to setup the ajax to send the CSRF token as shown in the docs.

Jade #{user.username} Partial Page Refresh

I'm using https://github.com/sahat/hackathon-starter/tree/es6 which leverages Jade in an ExpressJS & MongoDB NodeJS environment. My questions is how can I update #{event.location} && #{event.city} in Front-end if they change inside MongoDB in the back-end?
I do not want to refresh the entire website in order for #{event.location} and #{event.city} to be updated in the front-end.
Could someone please explain how to do this or if there is a better way of achieving this? Maybe with Socket.IO or some other way. I'm fairly new to Node, JS, Jade etc and can't even grasp a decent way of refreshing part of the page with JADE....
Thank you in advance for your help ! Kudos
Express/Jade can only render the page once from backend when the HTTP request comes.
If you have to update the data on frontend, you will have to use different strategy depending on how your data is updated.
If your data in the backend is updated via the same frontend or at known time you can use AJAX calls to server and fetch the values intermittently.
If data is updated via a different channel then socket.io would be the way to go. You can emit events from the backend on data change and receive the events on frontend app and update the data fields only using javascript bindings.
If you have too many manipulations of data to be done I would suggest using a frontend framework from the likes of Angular or Meteor.

Categories

Resources