I would like to to use React with Django non Single Page App way - Django will take care of routing, and rendering HTML templates and serving data.
React should be used just on some specific components inside HTML page for eg. (dropdowns, autocomplete, modals), ideally being able to just drop for eg. div element with a class inside HTML and pass props for React component.
What’s the best - maintainable, scalable solution to go about this ?
See django-jsx package and also server side rendering paper. I'm not a frontend specialist but when I've faced such problem, my friends offered me to google isomorphic app with django and react.
I found this add React to an HTML page in one minute page/example to be absolutely painless in rendering a React component inside of a Django template!
This probably isn't what you want to do, given that React has a pretty robust ecosystem around it for building performant single page applications (SPA's). You should be able to decouple your React site from your Django app. Then you'd be able to throw up your React app on a performant CDN, rather than having your Django server hosting every visitor.
But if you insist, the most straightforward way to proceed would probably be to create an index.js & index.html at each Django route. In other words, make a separate "React app" at each route, which Django will serve as users go to each endpoint. I've seen this done before. It's laggy and inefficient (relative to an SPA), but can be done.
If you really intend to go so far as to write raw HTML/CSS/JS and just use React for bits and pieces in between, you'll probably be looking to invoke ReactDOM.render using a variety of second arguments (called container) rather than the standard React-y way of doing a single ReactDOM.render(<App />, document.getElementById('root')); for the whole app to inject into a barebones HTML template.
I notice you tagged your question with server side rendering. If that is a hard requirement for you for some reason, I'd look into using next.js, a Node framework optimized for exactly that.
Related
hi I'm completely new to the MERN stack and am completely comfortable with html and CSS. however when I look at MERN tutorials online I see no html. is there a way I can still write up my websites I want to create using html and CSS then dealing with back end using MERN?
The "R" in MERN stands for React, which means writing JavaScript (or TypeScript) using the React ecosystem, usually including JSX (which is an XML/HTML-like syntax for representing UI) React is what you'd use instead of writing HTML and vanilla JS or jQuery. Anything you can do with React, you can do with plain HTML, CSS, and JS, though it might take a lot more work. If you use Mongo, Express, and Node, without React, that would work perfectly fine, but it wouldn't be the MERN stack.
Yes, you can use your normal HTML CSS & JAVASCRIPT for the frontend.
But before that lets understand what is MERN.
MERN --> stands from MongoDB , Express , React , Node js
Let's breakdown more:-
Mongo DB --> This is a database
Express --> This is a package to make our server (just like http package)
React --> This is a frontend framework for creating React apps.
Node js-->This is the environment for running your javascript code (Basically your javascript code runs on a browser environment but when you deploy your javascript codes on the server for making the backend there is no browser that's why we use node to provide a javascript environment to run the javascript files )
Collectively we make a whole website using all these.
But as you said can we use HTML , Yes you can use HTML to make your frontend only but you can't use HTML to program your backend because it's not possible.
In MERN you can replace "R" With (HTML , CSS , JAVASCRIPT) But MEN will be going to remain the same because these are used only to make your backend.
And combining it all We call FullStack web development.
I hope you will get it all. :)
I haven't touched React in over 2 years, and a bit confused looking back at my old code. For example, if I were to build an instagram clone, would I utilize html templates and inject javascript as such as
<div id="reactEntry">
Loading ...
</div>
for the login page, profile page, etc.
and use react components for main logic? for example, dynamically rendering posts and comments?
Or would it be smarter to make everything a react component-- login page, profile page, etc.
would it be smarter to make everything a react component-- login page, profile page, etc. - yes. As you don't need to rely much on other libraries and can use routing between pages. Also, there is performance benefit for a fully react app.
Having other components along with react component would not cause any harm as long as you don't dom manipulate the react component.
Or would it be smarter to make everything a react component-- login
page, profile page, etc.
There are benefits of using react components over the traditional multi-page web apps.
Since most react apps are Single Page Applications(SPA), hence they are fetched once, and then virtual dom handles the rendering of various components. This is faster than the tree-based document rendering.
Components are re-usable. Say you need a Document upload form - consisting of a drag and drop file field and an upload button. You could simply create a component, and keep using it at multiple places. All components have their internal logic, which makes it easier to manipulate and define them. Such an approach ensures a consistent app look and facilitates codebase maintenance and growth.
Plugins like react-router can handle page transitions, by using its navigational components. You could do partial renders too, giving you a faster UI/UX experience than rendering the entire pages.
I have a pug template index.pug for my project. I have also made navbar.pug, footer.pug, sidenav.pug. These files are included in the index.pug.
For server side I am using node.js, express.js and socket.io. Now I want to update only the navbar.pug file according to server response. But when I tried to do that I found some solution. But all of them refresh the full index page.
Is there any method that can help to update an specific portion of the webpage(in PUG) without refreshing the whole page?
Thanks in advance...
No, pug is a server-side only HTML processor. As such there is no way to do what you describe here - to get pug to process more means another round trip to the server to re-render the page.
Although technically you could do this with plain JavaScript, you should look into a client-side library like jquery, React, Angular, or Vue to do what you want. A lot of us use pug in combination with those toolsets to build modern web apps, but with those frameworks pug becomes a quicker way to write HTML and is no longer a server-side pre-processor.
I am working among a team on a large web projet.
These are the technologies involved:
Meteor: Full-stack JavaScript framework
MongoDB: DBMS
React: included in Meteor as the following 2 main packages react v15.6.1 and react-router-dom v4.1.2
My question concerns the front-end part of the website and its integration with already developed early versions. The specifications of the front-end section were translated to hand drawn wireframes first, then digital ones using Balsamiq.
While developing the first versions of the website, I used React and now I am in love with it (and kind of stuck with it too to be honest :D).
I am not normally in charge of the front-end section of the project, but I will be responsible or integrating it with my already done work.
Knowing that the digital wireframes will be coded in HTML, CSS and JavaScript, my question is: Is there a way of integrating/translating/rewriting an HTML, CSS and JavaScript template to fit React?
My question basically boils down to; how to integrate an HTML, CSS and JS template into a React project?
If there is no way to do so, what would be the best approach: rewrite my code, or the template should be written in React?
What I usually do, is copy the HTML tags/elements from the file into React's return(){} and then add React components and modify some css to make it look like you want it to. Remember, React's return(){} is basically rendering HTML plus your own React components and Javascript to make them work the way you want them to.
However, if you just want to display a page, you can always
import React, { Component, PropTypes } from 'react';
static contextTypes = {
router: PropTypes.object
}
this.context.router.push('/page');
and set the path to direct to the HTML page in your route.js file.
Been working on building a huge app using angular js. Have seen too many questions on the same topic on how best we can design an app, but still am lil confused.
A basic app usually has a
1) Login page/Index page
2) Home page - with headers and footers. Body being the partial/composite which keeps on changing.
since we don't have handle to load multiple ng-views, which is best way to structure the Home page such a way that we have one single HomePage container with headers and footers and Body is loaded dynamically via $route.
Right now I have designed it using a single LoginContainerPage which loads Login page and home pages via $routers, but since only a single ng-view is allowed i cant use another ng-view within the Home page to laod the body dynamically again. i am not keen to use ng-include as well.
Another way to go is keep LoginPage outside the $route and start routing from HomePage such that the Body is loaded dynamically.
Wanted to check if there are any better ideas around.
Thanks in advance!!
well in the project i'm working on with angularjs i took this approach:
i had a header that was the main navigation system i made a controller for that that handled the navigation system and knew about where i am right now. i had an ngView which loaded my main content based on routes but sometimes i needed different templates to be loaded and compiled base on some event for instance ajax loaded tabs. i implemented these types of things using ngInclude that the main controller on the view had the responsibility to choose the template and include it, i believe there is no need for multiple ngViews you can simply use scopes to implement different things and handle different parts of your app with different controllers and data. i guess the best idea for you is to make your login page separate.
i did this in my project. my login page was the only non-Ajax page that i had.
edit:
for authetication part if you wish to implement the authentication through angular you migh want to check this.