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/
Related
js and React experts,
Situation:
In our portal we have 2 completely different applications: CMS (PHP based with its own framework, templating engine and so on) and an Online Shop (Next.js based, React technology stack).
Now, there's one module which is already completely built in the Next.js world, but it doesn't exist in the CMS world.
Challenge:
implement the same functionality also in the CMS part of the website with minimal possible effort
Obviously, the naive way would be just to implement it once again in the CMS technology, which is possible, but not very elegant, as the implementation in Next.js will be supported by a separate team, which is going to change things over time and add features, that all would need to be implemented twice.
I'm new to React, but according to an example from the official docs there is a way to run a React app encapsulated in one div element (see https://nextjs.org/learn/foundations/from-react-to-nextjs). I tried it and this minimal example worked embedded in the CMS templating context just fine.
Now, the question is: Would that also work with a Next.js component? Can I render the complete subpage with a separate CMS engine and only one single encapsulated HTML element with Next.js? From what I understood Next.js is built to take over the rendering of the whole page completely, but maybe there's some advanced way to make it work React-like?
Thank you very much for your input.
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
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
I have application with logic similar to google's app switcher, let me call it Wrapper. This application take place across all google services and has consistent UI everywhere.
I am looking for solution to inject into my Wrapper application several finished different apps with their own styles, views and JS. They are written with different technologies like React and Angular.
How can I implement such architecture? Are Web-components a solution for this, if yes - please provide me some examples. (The aim is to deploy wrapper separately and all content applications too, so they will have consistent UI and logic from wrapper).
Please do not mention the iframe!
We have done similar model called UI shell, where any developer can develop a microapp in any tech stack like angular, react, vue etc but the main app will consume them as part of its application and display them as part of the main app. Are you looking for similar approach.
Almost all guides available online talk about working with JSON that is fetched from the server. We are taking an alternative approach to this.
We are generating HTML markup with the data server side, at least on initial page request (mostly for SEO reasons), and then trying to get Backbone.js to takeover from there (for infinite scrolling, or making future POST requests, as an example), a la Twitter.
I have searched online for some guidance on this for over two days now but have not found anything besides this:
SEO And Accessibility With HTML5 PushState, Part 2: Progressive Enhancement With Backbone.js
Am I missing something very obvious or is there a truly clean way of doing this with Backbone and/or Reactjs?
If you're using React, I recommend react-quickstart.
The tools it comes with make server-side rendering very simple, and the client picks up the DOM and makes it interactive.
A minimal React project template which combines:
react-router-component to provide HTML5 History routing and navigation
react-async to create "asynchronous" React components
express to serve pre-rendered React components, assets and provide API
browserify to provide module system for a browser
npm to install and manage server-side and client-side dependencies