React + Django communication - reactjs

I'm working on a data mining web app, you should be able to upload a csv file, apply an algorithm and get results in the browser and a pdf with information (graphs and models for prediction principally) this is my first time using React and Django, so my question is, how to send the csv file from react to django, handle the data and return it to react?
Thanks!!
I've seen a lot of tutorials, but every tutorial use the sqlite data base and the POST method for store data and I only want to process the data inside the csv, because the files will never be the same.

You can do the csv file upload via a HTTP POST request with the {"Content-Type": "multipart/form-data"} header. After that, you can read the file with some python library that handles datasets like pandas, process everything you want about it and then send it back to the client. After that you can delete your file.
Depending of the time of this operation this request can become really slow, though.
I also think there is probably a cleaner solution where you dont even need to utilize the filesystem, just manipulate the file in-memory that came from the request, but i never tried to do something like that in django.

Related

How to fetch text file from google drive with json contents React Native

I need to access a simple text file from my google drive in React Native.
I saw in this post about how you can use this link structure to get a photo from google drive: https://drive.google.com/uc?export=view&id=YOUR PHOTO ID. Is there a structure like this to get a text document?
People keep telling me to setup a backend using sqlite or something but it seems so overkill for the very little that I need. I don't need to set data I just need to read it from a URL. Also, I tried doing a backend but from my limited knowledge, I can't use a backend server on iOS.
Any Ideas?

what is the best practice from the following in using json data from data.json file in reactjs

what is the best practice from the following in using json data from data.json file in reactjs web application?:-
Storing json data file in the same file system and import it in react component.
run json file on local server and fetch it.
use backend server.
and which option will work fine after deploying the application? and why?
It really depends on the use case.
If the data.json is static, importing it will include the file in your bundle and will create a better user experience since you will not have to make an HTTP call and wait for its response.
fetching a file from your local server will give you a smaller bundle size (quicker initial load) and while you fetch the file (should be quicker than backend since it is local) you can show some loading animation.
If your data file is dynamic you may need to serve it from the backend.
If you are server-side-rendering your page, importing it will include the data in your HTML source which can be an SEO advantage.
For me, if it a small enough static file I would Import it (option 1)

What is the best design for a react website that will need to load large data files

I am building a react website, where many of the pages will be d3 data visualizations. I'm loading large data files (each ~5MB of csv or json) for these visualizations.
My folder structure for one of these pages is something like this:
-src/
--pages/
---vis1/
----app.js
----styles.scss
----bigdata.csv
----otherdata.json
Then, in app.js I can just import data from './bigdata.csv'; and use it in the component. This is working alright currently, but I have no idea how this design will scale in the future. I may end up needing even larger data files, and I also have plans to include hundreds of photos eventually. Should I be sticking this stuff in a database and writing server-side code? AWS cloud storage? Something else? I have no idea how any of that works, so I'm trying to figure out if it makes sense to learn.
Most of the react tutorials I've seen deal with little if any data loading. Blogs and posts specifically about design/data like this, or this, or this haven't really helped either.
My suggestion is, if you dont have to import all of them then, you should solve with backend side. Store your data in backend, then fetch when you need (lazy loading). You can do with pagination(like data tables) or scroll(like social media main pages)

How to include static json data in a React app and minimize loading time?

I'm making a React app that needs a pretty big (about 1 or 2 MB) json file and I'm trying to figure out how to include the data in a way that will minimize loading time for the user. I'm pretty new at webpack but so far I see two options:
Add the data to the React source and import it into the jsx
Put the json in the static file directory and fetch it within the jsx
One other constraint is that multiple pages will be loading the same data, so I was thinking that maybe fetching would be better since the user would have the json cached after the first load.
I'm still pretty new to this and I might be missing something big so I appreciate any info you could give.
Importing a JSON file at build time to bundle it with your code is certainly possible. However I would say keep the JSON as a separate file and fetch it with AJAX. A few reasons why:
With caching, if you bundle it with your JS file, any time you make an incremental change to your code you need to re-bundle your code and JSON, causing your users to unnecessarily re-download a 1-2 MB file just to get the code updates even if the JSON part hasn't changed. If the files are separate, the browser can cache each independently and only re-download when there's a change.
What if users don't need the JSON? Is it 100% necessary in every use-case? Keeping the JSON separate means you can load it only at the actual time it's needed for use instead of preemptively.
You mentioned needing the JSON on multiple pages - if it is cached, theoretically they will download it only once even if it's needed across multiple pages.
You may want to read up on how to leverage caching so that your server provides the proper headers for browsers to effectively utilize caching.

CGI programming in C

I have a general question about CGI programming in C.
I use an embedded web server to handle web interface. For this purpose I have a HTML file stored in the server. In this HTML file there is JavaScript and CSS code. So far so good.
When user presses the "Submit" button, I receive the form data in my CGI program. But I can't understand how to return the same data back to user's form. Do I need to read HTML file, copy it to a buffer, parse data, fill in forms with user's data, and send the buffer (not HTML file) back to the browser (using for example puts function)?
Thank you for your help!
You need to send exactly what you want the client browser to display.
That means a complete HTML page, with all the data you want where you want it. The way you describe it would work, but parsing HTML correctly is not trivial.
You should investigate using some form of templating system like libctemplate (I have no experience with this, but you'll find others by searching).
Or using AJAX to do the POST and return back only XML or JSON, letting the frontend JavaScript deal with updating the page.

Resources