How to use react with material ui along with python-django - javascript

I need help to use react with material ui components in web application.
The following key technologies i worked on for several projects:
Materialize CSS, Javascript, Jquery.
The following key technologies that i want to work with for new projects:
Material UI, React
Is it good idea to work with react or to have Angular ?
How to start making a project having both django and react with material UI components?
References :
https://medium.com/codingthesmartway-com-blog/getting-started-with-material-ui-for-react-material-design-for-react-364b2688b555
https://medium.com/#TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d

Front-end and backend are two separated things.
You can use whatever database, because your backend will work with that.
You can use whatever as backend.
React/vue/angular don't care how you will be communicating with server or what backend you use.
You can start with set up frontend development for react using for instance facebook-create-react-app which would set up basic development boilerplate. You will also need to take care of client-side routing (you can use react-router and you will need some way to comunicate with your backend for example with ajax calls to get your data using ES6 fetch() or some js library like axios.
It is up to you how you will handle backend but i would recommend you to use RESTfull API with django which would be communicating with your front-end

I'm doing this on a project right now. The project was set up for me with Docker however, which I'd recommend, it's very well contained. But if you don't want to use Docker you could use create-react-app. I'd make sure this is in a separate directory from your Django project, but in the same git repo.
create-react-app will create a development server for you to develop the front end with.
You'll need a few other libraries in your React code besides Material UI to fill a couple other needs:
client-side routing, I recommend react-router (for use with MUI see this docs page)
communication with the backend Django server, I recommend GraphQL.
Traditionally you'd use a RESTful API but these are very difficult to design well and have limitations in traversability and ability to change over time. I think that GraphQL is the future of web APIs and everyone should check it out.
To implement a GraphQL API in Django you can use graphene-django which integrates well with Django's ORM (models). It's documentation is thin, but I've found it works very well.
On the client side there's a few React libraries for connecting to servers with a GraphQL API. I'm using Relay which is from the same developers as React and GraphQL, but Apollo could also be a good option depending on the state of its development.
Eventually, when you deploy the project you'll need to compile production static files out of create-react-app or Webpack or whatever you're using to compile your React code. Then put the static files in a place that can serve them on your site. If you're using a production web sever like nginx the static files can be served directly without reaching Django.

The following key technologies i worked on for several projects:
Backend : Python-Django (MySQL)
Frontend : Materialize CSS, Javascript, Jquery.
The following key technologies that i want to work with for new projects:
What does work mean? If you can write api's in the backend.Go ahead and write some api's using django framework.
Backend : Python-Django (MySQL)
Frontend : Material UI, React
So can you guys help me out to implement this.
What do u mean by implement? Go ahead and find a nice react + material ui + webpack boilerplate and start the application. Try to Consume
your backend api's through it.
Is it good idea to work with react or to have Angular ?
Long discussion,You would have got this answer if you read the article that you posted
Do i need to switch to other database ?
It depends on your project

Take a look at this https://github.com/owais/django-webpack-loader which is a good strategy for launch react build with django (i use django rest) and you can use an html in jinja template where you inject the react JS code
You can eject or use config override top override the default native webpack configuration present in react JS https://www.npmjs.com/package/config-override

I think you should see Preact, which is react integrated in any MVC templating, with that you can override some places of templates by their ids.
By this solution you can inject material ui code inside your templates form or others has you need.
For the injection you need to use custom element,
https://preactjs.com/guide/v10/web-components/#creating-a-web-component

Related

Different ways of connecting frontend and backend in a MERN application and when to use which

I've created the frontend of various apps by using React where I was fetching data from some REST API someone else had created.
Regarding Node I've only used it once, in that occasion I did not use any frontend framework just vanilla JS and jQuery, and I was doing server-side rendering of the pages.
Now I want to create a simple MERN application and I am not completely sure that I'm aware of all the choices regarding the combination of frontend and backend and which one should be used when.
It would be really helpful if I could see a complete list of all the possible ways React and Node can be combined to create a full app.
If you are using front-end frameworks you use backend servers as an API. Like if you use React framework you use axios to handle http requests to your node js (express) server. But if you are using vanilla js, ejs and using server side rendering you can directly render views from your server. In case of react you can use next.js.

Using Gatsby.js for dynamic and static web apps

I am building a web app for a startup from scratch and have decided to use react and graphQl to query mongodb with nodejs as my backend.
Gatsby.js seems to bundle react, graphql, and even redux with their framework, which is supported with many helpful plugins. So it seems like it could dynamically render content on the client side, and its also built for fast static rendering of the site on the client side. Seems perfect for my use case where...
Some features of this site would require dynamic AND static rendering of content on the client side...
Before investing my time in Gatsby.js I want to know if its possible, or practice to use Gatsby.js for a mix of static and dynamic web rendering.
are their better frameworks or solutions? or will this work?
Gatsby.js seems to bundle react, graphql, and even redux with their framework, which is supported with many helpful plugins
Gatsby is a framework for React and uses GraphQL/Redux among other things under the hood - you can't use e.g. Redux out of the box and GraphQL is the data layer to query Gatsby's content, not external APIs. Hope that clears things up.
Before investing my time in Gatsby.js I want to know if its possible, or practice to use Gatsby.js for a mix of static and dynamic web rendering.
Of course :) That's why Gatsby re-hydrates into a fully functional React app on the client - so that you can fetch additional APIs or do dynamic stuff on top of the rendered HTML.
Might be an interesting read for you: https://www.gatsbyjs.org/blog/2018-11-07-gatsby-for-apps/

ReactJS vs NodeJS - Why do I need to create both?

I understand that React is frontend, and NodeJS is the backend that allows Javascript code to function outside of a browser. What I don't understand (and this is after following tutorials online on setting up a React project and a NodeJS project) is why I have to create an instance of each.
For example, in my React project, I managed to create a website. But because I needed a backend, I decided to use NodeJS. But I'm doing NodeJS tutorials, and I can create a website using NodeJS too. I'm confused because right now, it's appearing to be that React and NodeJS do the SAME THING.
I have never worked with NodeJS before so I am a bit confused. I was under the impression that I would just use NodeJS to host the backend, but after seeing that I'm literally having to create an entire website with NodeJS, I don't understand how I'm supposed to use React and NodeJS together.
How do the two, React and NodeJS, integrate together to create a fully-functioning web app? I have yet to see something online that clearly breaks down how the two interact.
React is front-end library. It provides great tooling for creatiing user interfaces. And it creates a single page application. Which means when you open a react app. It does not reload and its really fast.
While you could also use nodejs and something like handlebars to create a website. But that website would be rendered on server and then served to the user. But its alot more than that. There are a lot of things that you want to do on the server. Like authentication. You want that part to be secure. So you keep it on the server.
Now the answer to the final part of your question.
For a fully functional app. You would use react to create user interfaces. And nodejs for creating an API which your react app will call.
NodeJS is not just regular javascript, it is a javascript runtime that sits on top of a C++ engine called V8, provided by Google. Node executes outside the browser, whereas React / Vue / Angular / etc are in-browser javascript frameworks.
React is a whole separate animal; it is a framework that renders its own DOM in the browser. It is a javascript engine that is configured to optimize DOM manipulation.
While the development pattern of frontend and backend appear similar, they are doing different things. React is handling component lifecycles, applying dynamic style rules, processing in-browser data, and making API calls. Node is handling requests from the browser, coordinating access to the server's file system, managing network I-O, performing cryptographic evaluation, etc. Because of these different responsibilities, Node makes use of different dependencies (read: node modules) than a frontend framework.
Ultimately, Node and React communicate through HTTP calls (or, less frequently, through a WebSocket or SOAP protocol).
It would behoove you to read about how node works under the hood.
NodeJS is just a runtime that allows you to run javascript code outside of the browser.
In order to compile and transpile the react JS app, they use webpack and other tools which runs over NodeJS.
NodeJS will serve as your backend, whereas ReactJS will create the interface/UI where you can actually manipulate your server (nodeJS). So first you'll write your NodeJS server or API. You don't need to use ReactJS to create a frontend that would interact with your node server, like you said you can use NodeJS to create your views as well through a different library. ReactJS is just one choice of many for the front end of your NodeJS app.
The point is that react and any other SPA library is working on a client-side (browser).
React fetch and consume the data from the server API.
You don't need to use Node.js for building API. You can use various frameworks based on the technology you prefer.
If you are not familiar with the Back End, you can use https://www.npmjs.com/package/http-server to have a fake API service and can build the Front End part with it.
NodeJS is a javascript framework that allows you to create a server to serve up websites using Express or the built in libraries. It also is capable of building a website with just NodeJS.
You can take advantage of the ability to do server side rendering with a NodeJS server.
https://reactjs.org/docs/react-dom-server.html
There is a ReactJS framework called NextJS tha has server side rendering of ReactJS component.
https://nextjs.org/#features
You could potentially have some areas of your website that are built solely with NodeJS and other pages that use ReactJS and a NodeJS backend. But it is cleaner to use ReactJS for the front-end and NodeJS for the backend.

Can we combined express with react.js?

I am wondering if we are able to combine express.js with React.js, specifically with templating.
I have tried several packages like express-react, either it is giving up react and it's webpack features, or it is giving up templating that allows me to customize rendering based on user's information.
Do we have a easier method to render react on an express server? And supporting templating in an express fashion?
React is a library for build views in a Single Page Application (SPA). A SPA, by definition only has one page served from the server. You can think of this page as the page you build in express with templates.
Express is only used as an API server for a React SPA.
What you may be looking for, though, might be server side rendering a React App, but this is an advance topic even after you are familiar with React:
https://github.com/reactjs/redux/blob/master/docs/recipes/ServerRendering.md

Deploy Angular2 demo app within rails or as standalone app?

I'm currently learning Angular2 and went through the quickstart and heroes tutorial. I'm always starting these apps with "npm start".
I've created a backend application in ruby on rails, and also have a frontend angular2 app. I do not know how I can integrate the angular2 app within the rails app. Theoretically, I can just put it into the public/ directory to make the JS accessible, but I probably need to convert it somehow so that the links are setup right.
Can anyone tell me how this is done normally?
Thanks a lot
You can do this in two ways as I can see
1 - Add your angular project folder to app/assets/javascripts or in the root in you app and set rails asset pipeline to use it. read more here (for angular1) https://thinkster.io/angular-rails
2 - Running as a separate project and use rails as only as an API. (this is my preferred method) due to following reasons.
this will give a separation between your rails app and angular app. Basically you are forced to implement things in standard api way, like authentication etc. hence overtime you will have a more solid rails api and angular fronted
once you have the separation, you can run these two in different app servers if you wish to. gives better load balancing etc..
You can always replace both frontend and backend with different technologies later, like amber and node since they communicate only via an http api.
So this option will need more time and effort, but, if possible its defiantly worth it :)

Categories