Basically I have a project in Django, in all it has 7 apps. I want to shift one of them in react.
Say app 'Student' is the one which I want in React. I want to know if its possible to do so, if yes then how?
Here is what I tried, I created a react project and using npm run build command I got a build of that react project.
Now for base url of Student i rendered template which was in react build folder.
Something like this.
urls.py
urlpatterns = [
...
...
path('student/', views.Student, name='student'),
....
]
views.py
def Student(request):
return render(request, 'build/index.html')
Where index.html is the file present in build folder.
Using this approach i was able to render the react template but the other url routes were not working.
Please let me know what's wrong in this approach, if this approach is wrong then do suggest another approach.
It's possible to do that. It has been explained extensively in this tutorial.
Related
I setup react project by create-react-app and I found that the subfolder of react won't able to autoload when I create a new file, eg
<!-- file: /public/subfolder/index.html -->
<p>subfolder content here</p>
anyone knows how? According to the official react doc, it looks like react doesn't allow this kind pattern? Anyone knows more content?
This is not actually a restriction from React itself. That was how Webpack has configured in create-react-app. Please look at the below code snippet of a typical Webpack config file in a React application. If we need more custom configuration, we have to manually configure Webpack and Babel as per our requirements.
Link for the documentation: The best webpack configurations for React applications
I'm creating a react application. The default create-react-app puts the react app in the root folder. However, what I want is something like this:
/index.html --This is a static page
/tandcs/index.html --This is a static terms and conditions page
/react-app/ --This should be the react application
How do I create a site where all the pages are static, but within/react-app/ is the react app, so that when the browser goes to http://localhost:3000/react-app the react application starts?
Like I said, I am new to react so I might have missed something obvious, so apologies for being really stupid, but please help.
Thanks,
A
When you are using react what you see on localhost is the react app you are working on in "dev-mode". If you want to add the app to a webserver you should deploy it to a directory named react-app
So I am new to React and I can currently create different functional components when I use npx create-react-app appname but if I want to "package" these files and send them to my Django's view page, what is the best way to do this? I am having some trouble with webpack configuring everything in the methods I've attempted. I am trying to create a web app. Thank you.
Basically to "deploy" Django + React app, you need to use webpack on your react project, then you store react webpacked scripts in your staticfiles directory in django. Then, you define a view that returns index.html with attached scripts {% static 'reactscripts.js' %}. Thats basically all if you want to combine theese two on simple project.
I hope thats the answer you're looking for.
[edit] Also if you would like to deploy your project (after you've figured everything out), this article may help you to do so
https://mattsegal.dev/django-spa-infrastructure.html
I'm missing up information about deployment. After running npm run build to my react project - i do get a build folder.
Unlike the example in React.org "like button" here: https://reactjs.org/docs/add-react-to-a-website.html, My component now is bigger,with many sub-components, with fetch calls... etc - it's a whole project.
In my other project, i would like to use this app, as a another part in a bigger app, to share this project between other of my projects.
is this possible?
if yes? how? if no? why? any other way?
Thank you !
--- Edit ---
Some of the other projects are not written in React. some are single page applications with jQuery. some with Backbonejs. which also does not use npm.
The option for submodule is applying only to the other react projects
It's certainly possible.
I think what you're looking for is to publish package to a private npm registry.
However if your project is small enough it might be easier to use github submodules.
For the most part it depends on the size and the scope for re-usability of your project. If your project is just meant to be exporting some Components/utilities that you want to use in other projects you might want to use the private npm registry but if you want access to the source code of the project and want it as a subset of your bigger project's repository, you might want to make use of github submodules.
I figured out a way to do this. for the whole project.
Many pages such as React add to a website, reffer only to a single component. not to the whole project.
Now i know.
While developing, on the index.js we have something like this:
ReactDOM.render(
<MyMainComponent
someParam="something"
/>
, document.getElementById('root'));
This code, made it running on my page. Now, to have it General, that i could use it everywhere i wrap it in a global function:
window.reactMyMainComponent = (params, elm) => {
ReactDOM.render(
<MyMainComponent
{...params}
/>
, elm);
}
Then, i run yarn build
Then copy the js folder from /build/static/
Then take it to any other project, adding the 3 javascript files that are inside
Then i can call my new function reactMyMainComponent Anywhere, and use it when i want wherever i want :)
such as :
var statsBox = $(".someComp")
reactWordCloud({
width:statsBox.width(),
height: statsBox.height(),
infoId:9260
}, statsBox[0])
Tada, now everywhere can use this :) All projects.
So i had this thought about making a Jekyll SPA blog
and somehow make use of something like React.js / React Router or Vue.js / Vue Router to achieve that SPA routing feel.
Is it possible to achieve this, and if so where would i import and use the router ?
I don't think it's possible with Jekyll (I assume that you want to show in router-view component pages generated by Jekyll).
A better way would be creating a blog entirely in Vue (or React). When you push changes to Github repository, you should have configured Travis that will build the whole project and push to gh-pages branch.