To the point, I'm working a React app that has "levels" where users have to completely some tasks before then can move on to the next one. And for obvious reasons I can't use client-side js to verify and advance the user to the next level.
I believe that a server should handle this, but I'm stuck on how to go implementing this. I've tried Googling for this but I'm not sure if I can accurately put this into keywords. Some of my current thoughts:
Render React components of each levels to static html then serve this page when the correct request is made to the server (https://reactjs.org/docs/react-dom-server.html). As my whole app is running client-side now, I'm worried that this will complex things a lot more.
Keep all the components client-side but only return the link (route) to the page if a request is made to the server. This way someone extremely motivated can still see all the pages without completing the tasks.
I believe there should be an obvious answer to this question but since I'm relatively new to React, I'm not sure what it is.
Thanks.
React is a client-side framework. Meaning it is run and rendered in the browser.
When you talk about "the server" you are needing to implement a backend framework (i.e. RoR or Express), this is something you will have to learn independently. There are many tutorials online that are free.
Related
Update: When I first started with this question I was basically struggling to understand what I needed to do in order to make my frontend interact with the backend.
To answer my own question in case new guys come in:
If you use ejs, you are using server side rendering, meanwhile if you work your frontend separated your backend, you'll mostly be working with APIs.
First learn Node. Than work your way through on how APIs work. After feeling comfortable, start learning React.
Yes its normal. Just start building a project or else you'll stay in that tutorial hell.
So I have basic knowledge about React, intermediate level on javascript... and now I have taken a node with mongodb course. So I know that, i'll be feeding my tutorial hell if I do not put all those together and start building something from scratch. But till now, I have only rendered the EJS files and know how to setup everything from the ejs view point.
So now I feel quite lost as if someone gave me a puzzle with missing pieces.
I know some of you guys have taken this road so I have a couple of questions, even though some sound quite stupid:
How can node code be affected introducing reactJs, because I am currently using res.render('ejsViewFile')?
When you guys first learned this approach for using the MERN Stack, how did you learn to connect both of them? I find a lot of tutorials... but they confuse me even more.
Is this normal... me feeling like I have learned absolutely NOTHING?
It's great to see such type of questions.
I have also developed web application in which I have to just use the node JS and react with multiple microservices.
so I am also going through from such tutorials on udemy and other tutorials that are available on the website.
I found out that you can use react JS as a front UI and you can use node JS for backend if you don't want to use spring boot for your microservices it is just fine.
So basically I have developed rest API in node JS and using axios and promise I am calling that API from my react applications so I think in that way you can connect both of the applications.
in most of the applications I have seen that node JS is used for security purposes in the following purposes and then node JS is connected to a microservice it is just kind of adding another layer over your application.
I prefer lead can tell you that you can go through the udemy courses of react JS and it will show you how you can create a rest API on the node JS.
React for UI
Nodejs: api gateway or backend. You wish
Java : microservices, rest apis
I would like to learn Server side rendering and while searching in google,i've seen many topics about a framwork called nextjs,and after trying it,i found it pretty good.SO now i would take a serious course on SSR,but after a search on Udemy I've found a course which is rated 4.7/5 of Stephen Grider,but in the course content i've not seen next.js.Here is the course link : Server Side Rendering with React and Redux.
I don't have much experience with SSR,but it seems that there are two ways to make it:With React,redux,node/express or Next.js.
When i've tried next.js,i've not used react-router but in the description of the courses of udemy,the instructor talks about using react router.
I really need your advices before i learn it seriously,and i need to know the best solution between the 2 approches.
I guess you have done a very good research, the two options you have stated in your post are mainly the best available ones out there.
To me, if I am starting a new project, I would love to do it with React, Redux and Express.js instead of using Next.js
It will remove the complixity of learning a new thing, which is the first plus of picking that up.
I had to migrate a living 2y'o project to Next.js, the structure was a little bit not-expected for me, the routing system kinda sucked at the beginning of it, persisting layouts around the app was tiresome, forgetting about react-router was painful too.
In the course, I guess Stephen is welling to do client-side routing via react-router and implement something like express at the server-side to do SSR, I don't believe that will make it any easier.
While am saying that, it was very a interesting experience that I have gained doing the Next.js migration, I've learned a lot about SEO and SSR because of the troubles I had to run through.
I learnt to be careful about what should I use building my components and where should I use them, what packages can harm my app and what buggy bugs can prevent it from doing a correct SSR.
The smartest pick you can choose is sticking with React, Redux and Node/Express stack, instead of shifting -away- to Next.js
I have seen the contributors there doing a very great work, but, maybe am not yet sure how long they can survive!
Sorry for not being obvious on anything, just wanted to share what I thought.
Can you tell me more about the relationship between the two? I want to (for example) write a little tool which plays audio files on my raspberry pi. Would I then do the player and the players interface completely in React, and then just connect to node in order to get the actual files?
Or, more generally but the same thing, if I would want to write an application that does certain things (writes files, records audio, changes system settings etc.) that would all be done in nodejs, but if I want to have an interface I would use something like React?
I am a bit confused, but I hope this question is valid!
Node and React can be used together.
There is even the MERN stack that helps with that:
MERN is a scaffolding tool which makes it easy to build universal apps using Mongo, Express, React and NodeJS. It minimises the setup time and gets you up to speed using proven technologies.
See: http://mernjs.org/
But you can use React with any other Node framework, not only with Express. React can work with any REST API so whatever you use to build a REST API can be consumed by the frontend written in React.
Some other options include: Hapi, Restify, LoopBack. For more see:
http://nodeframework.com/
from the official React Documentation React is "a JavaScript library for build user interfaces". In very watered down terms (and I mean watered down) React could be thought of as a templating library (please don't shoot me for that).
What I've learned about React is it is more like the "V"iew in MVC. It provides you a way to present the user interface using JavaScript and JSX. With the little I know about from various tutorials, I really like working with React.
Yes, this two thinks can work together, I am currently working at such project. I will point out main think here. That is where you put your routing. Does it goes to Node.js server or to React Router. This is important because it defines where you application logic should be.
ReactTS is a scaffolding engine for React on ASP.NET Core. Very powerful, and very fast - will generate your entire application with a single button click. You can also customize the templates. Check it out here... http://bssdev.biz/DevTools/React-Turbo-Scaffolding-Free-Download
As a newbie to meteor, I found lacking security is one of the first impressions people usually have due to meteor's historic debut and that meteor has taken measurements to address the concern. Therefore I pay more attention to this subject as I am learning it. When following the to-do list tutorial, I noticed, to my surprise, the if (Meteor.isServer) {} block is visible in browser. The tutorial dedicated 2 steps out of 12 to move client-side code to server-side to make it secure. But if server-side code is also visible in browser, isn't that defeated the whole purpose? How could meteor be a secure platform in that regard?
The tutorial is using this simple technique to start things quickly, but hopefully there is a built-in way to prevent server code being sent to the browser.
Every code that you put in the server directory won't be shipped to the client.
Likewise, source code living under the client directory only lives in the browser environment.
This is detailed in the docs section relative to "Structuring your app" :
http://docs.meteor.com/#/full/structuringyourapp
Express JS uses templates for generating HTML and then server sends them to client in response. There may be several other templates from which HTML can be generated. The ones I was able to discover are:
Jade (http://jade-lang.com/)
EJS (http://embeddedjs.com/)
In my app, I need to use both ExpressJS and AngularJs. I am new to both technologies. While learning angular, I had to use it in pure HTML. After learning ExpressJs, I realized, in order to use angularjs, I need to use them in any of the above templates which will be converted to HTML while sending to client.
Now, I want to use expressjs as my server and angularjs as my client side app. For this, I think I have two options.
Option 1
I can stop using templates altogether and use our NodeJS server to respond by sending simple HTML files. These HTML files will then contain AngularJS coding within them. AngularJS then, on client side, will act as our application. It will demand other HTML documents from the server. Or it can also be used like AJAX, where we can only request the piece of information to update just part of the page rather refreshing the whole page for a minor change.
Option 2
I can use angularjs inside expressjs templates (jade or ejs).
Kindly, help me in understanding the pros and cons of both options. Which one will be your choice in such case.
This is very much an opinion question and Stack Overflow admins hate anything that smacks of opinion, but here's my experience and opinion nevertheless.
I've done a couple of apps now using purely static files (HTML, CSS, and JavaScript) with those calling a service on the back-end to deliver the data. It reduces the back-end, whatever it is (I've used both Java and Node.js), to just being a set of service URLs but it works very very well.
You've got a fantastic hard line between the responsibilities of the
two systems
It's very easy to work on and test each one independently
Bugs are usually very clearly in the front-end or the back-end (all
you have to do is look at the data transferred to know)
The back-end services are ready to be reused to support alternative UIs from the
command line or something mobile specific if you want
You can use one technology for the back-end to start with (say Node.js or Ruby on Rails) and then switch to something else later if you need to. As long as the API stays the same the front-end never knows.
I personally use AngularJS with Express/Jade. The setup is actually pretty simple and I find writing Jade much more enjoyable than writing HTML. I've also adopted writing my Angular code in CoffeeScript as, again, it makes for quicker development. If you are looking to save keystrokes then Jade is a great solution and its integration with Express makes it a no brainer. If you aren't worried about producing code more quickly then there is absolutely no problem with using HTML.
I will point out that one of the greatest benefits I have found to using Jade over HTML is the ability to develop a single page in multiple files, then use include to have them concated before compiling into HTML. This allows you to take larger pages and break them into more manageable chunks. Together with Angular's templating, this can relieve much frustration.
Really it is all a matter of opinion, but since I decided to give Jade a shot, I have not regretted it and I have never ran into a situation where my HTML was rendered incorrectly when using Angular.
I went with option 1 because I didn't want to deal with any potential issues with jade or ejs converting the template incorrectly and interfering with Angular. My app essentially has the index page (which is really just the basic page template with my css and js includes) come out of Express as jade and then angular takes it come there and all my angular templates are in a separate location than my jade template.