How to return HTML in React

Question

When developing my project, I look at others for an example. When I looking at Instagram website. I see the class name of html is change when user is login. May I know how to achieve that actually? As what I know, react only live in one of the div in html structure.

// This code will render a component in the html root.
ReactDOM.render(<App />, document.getElementById('root'));

// But how to serve a whole new html file in react

How to serve a whole new html file in react? Is it violate the concept of react?

I think you should be more specif as whether you are trying to achieve with codes of what you have tried and what kind of errors you are facing — iwaduarte, Mar 03 '20 at 18:15
I want to achieve change class name of html or return a completely new html in the website. Thanks — Wesley Loh, Mar 03 '20 at 18:19
what have you tried? show codes. Also React.DOM render is not the way to go here. You have to change the App Component and put some conditional clauses. — iwaduarte, Mar 03 '20 at 18:22
You wanna serve a new index.html? You can't do that with react as to say, you would have to change it in your server side code that serves those files. — Dvid Silva, Mar 03 '20 at 18:27

score 0 · Answer 1 · answered Mar 03 '20 at 18:25

you should add a class to your html input to retrieve it. Here is an exemple :

import React from 'react';
import ReactDOM from 'react-dom';

class X extends React.Component {
  render() {
    return <h2>TEXT HERE</h2>;
  }
}

ReactDOM.render(<X/>, document.getElementById('root'));

score 0 · Answer 2 · answered Mar 03 '20 at 18:29

React works in a way that attaches itself to some DOM element. In your case, you are attaching it to some element with id of root.

TLDR; Your index.html will contain the code of your application inside the element with root id during the runtime in the browser. You can see it by inspecting it using browser developer tools.

Your <App /> is the root of your application and if you use dev tools of your browser and you inspect the DOM tree you will see components in there. They are just dynamically attached by React (ReactDOM) and React is in the control of when and how things are rendered.

If your components look something like:

import React from 'react';

function App() {
  return <h1 className="title">Hello!</h1>;
}

In Dev tools your DOM structure will looks something like this:

<div id="root">
  <h1 class="title">Hello!</h1>
</div>

Here you can see that you have element with root id that you attached your <App /> before and you can see the content of <App />, <h1 class="title" /> together with classes.

That is also how Instagram works and most of the single-page applications or SPAs in short.

There is also a possibility to render static version of your application.

score 0 · Accepted Answer · answered Mar 03 '20 at 19:17

HTML and Document body are outside the React realm of DOM handling. So you can use good old querySelector for setting the class names.

function LoginPage() {
  useEffect(() => {
    document.querySelector('html').classList.add('login-page');
  }, []);
  return (
    // stuff
  );
}

A handy package is the React ecosystem for these is React Helmet

import {Helmet} from "react-helmet";

function LoginPage() {
  return (
    <Helmet>
      <html className="loginPage" {...anyOtherStuff} />
      <body {...attributesOnBody} />
    </Helmet>
  );
}

If you would like to add nodes that are adjacent to the root node in the body or React provides you with a solution called Portals that can render anywhere.

For the abiity to change index.html itself, you would not be building yourself a SPA anymore which seems to be case to use React.

How to return HTML in React

3 Answers3