I am using node.js with react.js as my templating library. I am able to render my components on server side by using node's res.render(..), but I want to make my components dynamic by rendering them on client side using react.js and calling the onclick handlers. I have my components defined in .jsx format. How can I interact with the browser in client side and render my react components dynamically?
You will need to have your code transpiled and bundled, then you can insert it in a script tag just like any other script. One popular option is webpack; another is the use of Browserify with babelify in a gulp task.
You can start using it with ES6 class syntax using babel js. I have created a sample component here
You can also use react-starter-kit which gives you all the setup pre-loaded. A good place to start would be Facebook's react documentation
Related
I'm still new to the world of Node frameworks. I chose Preact because it seemed to have less dependency than React.
I think I originally misunderstood what exactly this is. I thought it works like PHP: we do tasks on the server page and the client gets the result in HTML form. I understand this is a framework that does not require a Node.js server, but when I create a project using Preact-CLI I can only run it on one Node server (at least opening the generated HTML file does not work by itself, the page does not respond when buttons are pressed, even if I change the file paths from absolute to relative).
I would like to read files in the Preact app, run MySQL queries, but these require Node modules. If const fs = require('fs'); is included in the Preact component, npm start will drop this error:
Module not found: Error: Can't resolve 'fs' in '...'
How do I get Node modules to work, read files, etc.? Should I use AJAX with a separate server (with completely separate code) and communicate with Preact?
Node frameworks => You mean JS Frameworks :)
Preact is a library for the browser, not server, and as such does not have access to the filesystem and other stuff.
To read e.g. from a SQL database, you have to make a call to an API that queries the database and sends the result back to the client (browser).
Preact is a clientside framework like React, it's not a server side rendered framework.
You'll need to make api calls to an external server from your Preact app.
I was making HTML Render from Node js so that i can show things on angular side,
But their are some Directives of angular which I want to set in EJS Rendering, so that the directive magic should happens on UI when it is render.
The problem here is coming that EJS is not allowing to put angular Directives in its format. Is their any possible way for this.
Angular 5 in EJS file while rendering that Template from Node JS.
Short answer : don't do that.
Using angular isn't using a library : using Angular means your are using a whole platform.
You write your code in Typescript, which is then compiled to vanilla Javascript. This means, once your code is compiled, the syntax you're using to make Angular component changes too.
In your case, you use NodeJS to serve static pages : The very principle of Angular is to create SPA (Single Page Applications). If you create static files that you serve with a server, then what is the point of creating a SPA ?
So the answer is : don't use EJS to create templates that will contain Angular components. I don't even know if it is possible, but in any case, this is a very bad practice.
I would like to do the initial render for my React application on the server side, but am having trouble importing and using React components without using something like babel/register (which is not suitable for production).
I would rather not have to compile my server side code for production, but would like to load an node-suitable React component to send to the client via res.send(React.createElement(Html)).
When I run this I get...
Unexpected token <
I assume this is because my components render method returns <!doctype html>...</html.
Is there a way I can have Node render a React component without having to use babel/compiling code before deploying?
Is there a way I can have Node render a React component without having
to use babel/compiling code before deploying?
No. Since JSX isn't real JavaScript, you need to transpile it at some point, either ahead of time (in a build script) or at run time (using babel-register).
Personally I ignore babel's advice to not use babel-register in production. It works just fine, I always cache + prime responses so performance isn't relevant. I'm open to hearing why transpiling with babel-register is bad though.
Short answer, yes.
this is from the official docs:
ReactDOMServer
The react-dom/server package allows you to render your
components on the server.
ReactDOMServer.renderToString
string renderToString(ReactElement element)
Render a ReactElement to its initial HTML. This should only
be used on the server. React will return an HTML string. You can use
this method to generate HTML on the server and send the markup down on
the initial request for faster page loads and to allow search engines
to crawl your pages for SEO purposes.
If you call ReactDOM.render() on a node that already has this
server-rendered markup, React will preserve it and only attach event
handlers, allowing you to have a very performant first-load
experience.
ReactDOMServer.renderToStaticMarkup
string renderToStaticMarkup(ReactElement element)
Similar to renderToString,
except this doesn't create extra DOM attributes such as data-react-id,
that React uses internally. This is useful if you want to use React as
a simple static page generator, as stripping away the extra attributes
can save lots of bytes.
However, if you want to use JSX you have to use babel, otherwise, you can use Reacts JS Syntax.
Here is a link to an example:
https://github.com/mhart/react-server-example
I have been working on React.js for a month now. I have been using Webpack dev server which is a node.js Express server and enables us to render react.js on browser. I want to know whether using React.js will limit us on using only a node.js http server or is there a way we can use a simple http server as well with React.js.
I have also been wondering whether it is useful to use React.js for developing webpages that have mostly pre-fixed contents text fields, data etc. during request/response for any API operation.
Does using React.js limits us on using a node.js server
No. React is predominantly a client side library. It doesn't care how it is served to the client.
In the end you are just writing JavaScript. You can deliver the JavaScript code to the client whichever way you want.
It depends. Generally the answer is no. If you only want to use it as a client-side library, it doesn't matter what the web server is. But actually, react components can also be rendered on server side so you can develop universal/isomorphic apps. In that case you will need a node.js server.
Take a look at this universal example.
we are using php+yii2+react +redux+es6 without node.js server, but ngnix. At the end it is just javascript, so that we use gulp + babelify to translate es6 to es5 and then php yii2 application renders basic container to which react application renders himself.
Node.js is one of the options, you can use wathever server you want, just need something like gulp or webpack to compile your js and all dependencies to the ready to use standalone js.
In node.js, do I need to use jQuery twice ? once at the frontend and once on the server ? Sorry for being a noob. Or if I use it once, how will the front end get a copy of it ?
jQuery is all about manipulating the DOM. There is no DOM on the server. Why would you use it there?
Generating HTML on the server in node is typically done via a server-side templating engine like handlebars or jade, not via a DOM. They're two very different environments.
Just reference jQuery in a script tag in your generated HTML and use it on the client side.