I decided to give a shot at just using React only for server side rendering of my components written in JSX.
I decided to eliminate React on the client side as there is not much client side interaction and I thought of adding it later only if needed.
I have couple of questions on this approach though:
How to use plain simple vanilla JavaScript at the client side? I'm still using JSX for my components. Any simple example, like handling a button click via event listener?
Bringing the entire hot module replacement experience with this approach. Right now i am using webpack --watch and then restarting node server on any files changes as also stated in this comment. Also, where it's just pure SSR, how to refresh the screen? Right now I don't have to restart my server, but I have to still refresh my screen to reflect my changes.
Has anyone been successfully able to use webpack-hot-middleware in this approach, where it's just pure SSR?
Related
I'm using Express as the server and nodemon to reload that server on file changes. Works perfectly. But when I make a frontend change (i.e changing an html page or css, javascript, anything basically) I have to reload the browser manually. If you're like me, that isn't ok. I know of the vscode extension "Live Server", but I want it all to be in that one express server. I tried using the live-reload npm package, the app and the browser extension, but that didn't work out for me. I really don't want to have to start to use something like webpack just so I'm saved the effort of pressing Ctrl+R a couple times. Any recommendations? I still haven't learned React but I've heard that if you use React, then you'll have that live reloading feature. I'm actually currently developing a typescript website template, so that's what I want to use it for.
From what you've said and after a little searching maybe samuelgjabel/nodejs-hot-reload is what you're looking for?
It supports typescript and where you don't want to roll your own / learn webpack at the moment, this seems like it would keep things simple.
*disclaimer - I haven't used the library myself and cannot attest to it's security or quality.
update:
Regarding your comment response, My mistake I misunderstood.
This library works on the front-end providing the auto (CTRL-R) you're looking for. try this guide for connect-livereload
It seems to hook into express' connection event to signal the browser for a reload after nodemon has respawned the server instace. The guide shows how to implement it without a build tool like gulp/grunt.
The project is using EJS, Express/NodeJs, MongoDB and I have added ReactJs to it.
Now I want to implement Webpack for bundling EJS and ReactJs files together.
The project eventually has to be converted to ReactJs but for now we need to Bundle EJS as well.
Is there a way I can do that? I need help.
EJS can run client-side and React can run server-side but a typical Express/EJS set up runs the EJS server side and delivers plain HTML to the client, while a typical React setup runs the React code client-side (and might add server-side rendering as a bonus).
Assuming you aren't doing anything highly atypical (in which case you really need to explain your setup in much more detail) then the short answer is: No.
You need your EJS to run server-side, so putting it in a bundle and sending it to the client is pointless.
If you want to transition from a classical server-side rendering of HTML to a React system then a typical way to do that is on a page-by-page basis. \
You can either serve up a basic static bootstrap HTML document for the pages you replace, or get creative with a SSR system for those pages (and either do some clever mixing of routing rules or just put a reverse proxy that diverts different URLs to a Next.js server or an Express server depending on if they have migrated or not).
Another approach is is to write a series of small React components that replace individual components of pages (e.g. a navbar application) and have the entry point include multiple ReactDOM.render calls for each component.
That latter approach is less suited to involving SSR at all though.
Either way: You wouldn't be sending the server-side EJS code to the client so it wouldn't be bundled with the React code.
Is there a way to download React components and also have full javascript functionality? For example, a table component that still can be sorted without a network connection. Offline-first seems to be a possible solution but doesn't exactly specify how to deal with individual meeting. Another possibility is converting the React application to pure javascript that can be run on the client side. But, essentially isn't that what the React compiling does anyway?
I have thoroughly searched the web about creating a website using React as a front end and PHP as a backend for like a week now. I have found many solutions about configuring webpacks and stuffs. But most of them only aim for index.html. So, I decided to create one LARGE react app and used CDNs of React, ReactDOM, and Babel to run it on index.php which is running on XAMPP. The main reason for creating one large app is because I cannot use full functionality of creating components and importing them.
But now, I want to use MDBootstrap, and its React components. But I cannot use them since importing is not available. I have watched tutorials and read articles about webpack and configured it. But all those were for index.html. And lastly, I have also found tutorials using PHP, XAMP(MySQL), and React. However, most of them run on Node server rather than XAMP server.
So I want to create something like
Website
react_app
index.php
where react_app is created by create-react-app or does have a same functionality as it like imports and stuffs. I do know that NPM server runs index.html from /build/, but I do want to run it on XAMP server using index.php.
Here is a link you can follow to do what you are asking for https://medium.com/#MartinMouritzen/how-to-run-php-in-node-js-and-why-you-probably-shouldnt-do-that-fb12abe955b0
and a possible other answer here Execute PHP scripts within Node.js web server
Only thing is, it is not really advisable to do this. It carries a number of security risks. I would advice you learn to seperate concerns and follow the Model-View-Controller (MVC) design attached to React.
You can still have React as your view while PHP is in the back. requests are sent and received through an api call. Check out this simple tutorial on achieving this https://blog.bitsrc.io/how-to-build-a-contact-form-with-react-js-and-php-d5977c17fec0
I hope this helps you with what you need. If it doesn't, let me know. glad to help!
I am using Reactjs, webpack along with page.js (routing) to build a webapp. Webpack gives me a bundle.js which is loaded on the client side.
I found out the og Meta tags can't be crawled if I am loading them on the client so, I have to implement it on the server side (server side rendering). Is there any way to implement it ?
(I didn't find proper documentation about this on net).
A lot of people are rendering the "shell" of the html with another template language on the server (since only the server needs to render it). You shouldn't use React to render stuff outside the body using normal APIs (there are known issues with that). However you can use renderToStaticMarkup, which I think is a nicer way as you are not introducing another template language on the server just to render the shell.
Of course this means that you can't update something like the meta description or document.title in a normal React way, you would have to just do it with plain old JavaScript. Alternatively I recommend react-helmet (which can modify the meta and title when the server renders too).
I made an example here which may be helpful - https://github.com/DominicTobias/universal-react/