Is it possible to use Django template together with React? If so, how should I do that?
You have to create two separate projects:
(I would think about it as backend and frontend)
Backend = Django/Flask/FastAPI or any other framework
Frontend = React application
If you have these two services you can start thinking about communication between them (the easiest by REST). So you should provide some API available for you're frontend to ie fetch the data.
Related
I have an ASP.NET MVC Framework project. It's time to move the client part to modern React. The project is very big. How to organize all this correctly or can you share the project on the GitHub?
Foundation task. Do it together with ASP.NET MVC. What would both fronts work together on the same site. What would create the React routing and not break the current ASP.NET MVC routing?
If you want to use React or any SPA framework it means that you need to use SPA(Single Page Application) approach of building WEB application.
Please see more about this here:
https://developer.mozilla.org/en-US/docs/Glossary/SPA
Here are general advices:
Backend: Since you use ASP.NET MVC it would be flexible and easy to migrate your backend part to ASP .NET WEB API ( build REST endpoints). As contrary to MVC Razor pages approach, WEB API Controllers will return data, not a view.
Of course you need to revise you logic at backend side and transfer from Razor pages required pieces of code that related to handling data etc.
Frontend: Create a simple React application(here you can see the guide):
https://reactjs.org/docs/getting-started.html
You React application will send requests to the new WEB API Controllers not to MVC Controllers. Once you receive data from the backend side, store it and handle it at your Client-side.
For storing your data I highly recommend you to use Redux Store:
https://redux.js.org/api/store
Routing: React has router https://v5.reactrouter.com/web/guides/quick-start using this router you will render and manipulate you pages on client side without page-refreshing according to the SPA conception, hence, no need to worry about your MVC routing.
Example of application you can find at official page here:
https://reactjs.org/community/examples.html . But I think once you complete the guide, this question is going to be skipped.
We have an existing legacy laravel application and like to convert it into a react application for this kind of application we want to migrate but can't do in a big bang way. what is Ideally needed? make a react application and put laravel application in an iframe and then migrate one by one section? thinking of using httpclient and parse dom.
do we have a better way?
Well, firstly you need to actually analyze the scope of work that needs to happen.
Ideally, you migrate component of your Laravel app step by step to React app.
Guys as you may know when using Vanilla JS you can just deliver html files to Django and just code between the lines in Python language in order to create the functionalities that you need in your backend side of your web application. However this is not the case when we use React JS. Is there any similar way(as vanilla JS and html files)for integrating REACT.JS and Django(except for using rest api endpoints)?
Maybe using react and Django are two different technologies and you need APIs to interact whereas this is not the case writing vanilla js in Django HTML files.
It's called React Server-Side Rendering. If you add Django to this and search for it, you'll get a couple of hits, like this tutorial bellow:
https://medium.com/meural-product-development/setting-up-server-side-rendering-with-react-redux-and-django-4d6f4d2fd705
Looks doable as long as you are somewhat proficient in Node as well.
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 am trying to integrate Angular with Django. I have 2 approaches which one is the best way:
Build a separate angular app and serve it's static files to django to render. In this way the routing and rendering everything will be handled by Angular.
Or to build templates in django using Angular directly and use MVT architecture of Django only.
Which is the correct way from architecture point of view? If not these two please suggest any good approach.
I'm not using AngularJS (actually I'm using VueJS but it's kinda the same) but here is what is usually done :
You do your models as usual, using Django. It defines your database structure.
You build an API that exposes your datas. For that you can use DRF (Django Rest Framework) for a REST API or graphene-django to build a GraphQL API)
You code components to build pages. And you retrieve your datas to display from the API.
For my project, I personnally use :
Django
graphene-django for a GraphQL API
Apollo Client to fetch data from the GraphQL API
VueJS for the frontend components
There are lots of tutorials on how to combine all of these so I guess there are some for AngularJS too.
You should be able to do something similar with AngularJS.
Finally, it is more like the first approach that you described. You'll have some build step that will create a bundle of files with a index.html or similar. The thing to do is to tell Django : "Hey, for any URL, point to that file".
Note that the thing I'm describing is for building a SPA (Single Page Application).