Planning Out, But Confused on How to Organize and What To Do With index.html

Throughout the Front End Development course, I haven’t seen any way to cleanly put JSX into HTML, so I’m not really sure what to do with my HTML. Do I write my HTML as kind of a main base and then insert my React code in there or do I just write my JavaScript logic in something called the <RandomQuote /> component (which will produce a random number and then give me a random quote) then put the <RandomQuote /> component inside an <App /> component which will hold all my HTML? This is my HTML at the moment. I’ve looked on other React projects and saw that there really is not point in having an index.html file. Thank you!

Using index.html as a ‘base’:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />

    <title>React App</title>
  </head>
  <!--<App /> functionality here. This has the <RandomQuote /> component-->
    <!--<RandomQuote /> functionality here-->
 
</html>

Using only React with no index.html file:

import React from "react";
import RandomQuote from "./RandomQuote";
function App() {
  return (
    <>
      <body>
        <RandomQuote />
      </body>
    </>
  );
}

export default App;

import React from "react";
export default function RandomQuote() {
  return (
    <div id="quote-box">
      <div id="text"></div> {/*Quote goes here*/}
      <div id="author"></div>
      <button id="new-quote"></button>
      <button>
        <a href="twitter.com/intent/tweet" id="tweet-quote">
          text that will be pressed
        </a>
      </button>
    </div>
  );
}

If I’m supposed to use the second method, what do I do with the important tags in the head tag?

  <head>
    <meta charset="utf-8" />
    <script src="App.js"></script>
    <script src="RandomQuote.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />

    <title>React App</title>
  </head>

im still a novice in react and i havent seen such approach yet.
You want to include your body in the index.html and include a “root” element(just regular div would do, with some id to refer to it). Then you create your App component(you can use any name here as well), which will contain your whole app and all sub components/elements. You render(“attach”) that App component to the root element, so react will load the entire app via it(it works like an anchor). Look for ReactDOM.render(<YourApp />, document.getElementById('yourRootId')). This is the syntax used, the main method which renders your app. Your JSX and react logic goes into your react components(js files, not HTML). JSX is syntax, wrote within js files, but ultimately representing HTML, only slightly syntaxtically different to not mess with JS keywords. Its the react tool to write your html directly in the javascript code, instead of doing it oldschool in the HTML document itself.

I am still very confused on what to do. Do you recommend any video I can watch to have my components working?

Just write a normal HTML file, particularly in terms of everything you put in <head>, and it needs a <body> – it is just a single HTML page. It may well have a very complicated app living on the page, but it’s still just an HTML page that includes some JS and some CSS.

In the <body>, add a <div> with an ID (root is a common naming convention) and nothing else. That’s what your app gets rendered to.

If you want, you can put a block of text in <noscript> tags that says something like <noscript>You need to enable JS to view this page</noscript> or similar, more out of politeness than anything else – it will only show when JS is turned off.

Anyway, don’t do this:

import React from "react";
import RandomQuote from "./RandomQuote";
function App() {
  return (
    <>
      <body>
        <RandomQuote />
      </body>
    </>
  );
}

export default App;

Your React app lives within an HTML page, not the other way round.

You may want the React app to do something dynamic with stuff in the <head>. For example if you’ve got routing and want the page title to dynamically change. There are several libraries that’ll help (react-helmet for example). And it’s fairly trivial to do it yourself if you need it once you’re comfortable with React. You don’t really want to the React app in complete control of <head>, rather you want to allow it have the ability to change specific things of necessary (like the title, or make it inject CSS, or whatever)

What would my HTML look like though? From what I know, I can only put components in my JavaScript files and can’t add really anything useful in my HTML files.

You can add anything you like :man_shrugging: . ReactDOM’s render function is the thing that tells your app what element to render the app into –

ReactDOM.render(<MyApp>, document.querySelector("#root"))

But that second argument, the element you render to is whatever you want. You could have an entire fully populated static HTML page, and just render the app to a single element on that page, React doesn’t care.

But normally for a Single Page App, you want the app to be the only thing on the page, so like

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <more>
    <stuff>
    <that>
    <goes>
    <here>

    <link rel="stylesheet" href="./my-lovely-styles.css">
    <script src="./code-for-my-react-app.js" type="text/javascript" defer><script>
  </head>
  <body>
    <div id="#root">
      <noscript>Please turn on yer JS thanx</noscript>
    </div>
  </body>
</html>

Assuming the main component is called MyApp (and that this main component had all other component my app would need), would I put this line of code at the bottom of my MyApp file?

You can do that, or you can put it in a different file and import the MyApp into that, makes no difference. But yes, for simplicity, can just be like:

import ReactDOM from "react-dom";

const MyApp = () => (
  <h1>Hello, World!</h1>;
);

const root = document.querySelector("#root");
ReactDOM.render(<MyApp />, root);
1 Like

Thank you for that, it actually helped me quite a bit :slight_smile:

I was testing it out but nothing is popping up in the browser even though I’m exporting and importing everything correctly.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="App.js"></script>
    <script src="RandomQuote.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />

    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

App Component:

import React from "react";
import RandomQuote from "./RandomQuote";
const App = () => <RandomQuote />;

ReactDOM.render(<App />, document.querySelector("#root"));
export default App;

Random Quote:

import React from "react";

function RandomQuote() {
  return <div>I am the random quote component</div>;
}

export default RandomQuote;

You are using create-react-app, you should not add anything to the HTML to get the app to work. You might add other external resources, though most will be npm packages or other resources imported into components and not external resources using traditional linking (some external CSS might get linked in the HTML).

In development mode, i.e. npm start you won’t see the bundle files in the HTML inside the public folder, the dev process takes care of everything. But if you build the app using npm run build then inside the output build folder you will see the JS files linked to in the index.html file at the bottom. Again, the build process takes care of everything and you won’t usually touch the build files at all (they are minified and split).

If you used script elements to load React and ReactDOM you would typically only have a single entry point into the app (just like how it works for most applications).

But more commonly you will use some sort of toolchain (e.g. create-react-app)

One option the docs do not mention is Vite which I might suggest checking out as well. It is much faster to get going than create-react-app and for small learning projects that might be nice.

1 Like

ReactDOM is a separate object, with its own methods, not to be confused with React. Beside the line to import the React object, you should also import the ReactDOM, in order to access its methods, one of which is render, so you can load your app.
PS: if you scroll up to last Dan post, you will see he imports the correct object

Here’s the code, nothing seems to work. @DanCouper said that I should use HTML to add the <div id="root"></div> but then I

I’m very confused.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="App.js"></script>
    <script src="RandomQuote.js"></script>
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />

    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

I did not change any JS component files.

Here’s my App component, although nothing worked:

import React from "react";
import ReactDOM from "react-dom";
import RandomQuote from "./RandomQuote";

const App = () => <RandomQuote />;

ReactDOM.render(<App />, document.querySelector("#root"));
export default App;

I did not use import ReactDOM from "react-dom"; on my Random Quote component since I’m not rendering that onto my HTML, but just exporting it to my App component.

You have to import React before you can use it. Also, usually you have to load JavaScript after your HTML renders. Note the order of lines here (this is what it should be):

In your previous HTML, you were trying to use React before importing it, and trying to load JavaScript before the DOM was rendered. Also you should keep all of your meta tags together, and not put script tags in-between them.

Or follow lasjorg’s post below if you’re using create-react-app. You shouldn’t be modifying index.html manually if you’re using CRA.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>

    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="App.js"></script>
    <script src="RandomQuote.js"></script>
  </body>
</html>

You have this “Web site created using create-react-app” in your HTML, which tells me you are using create-react-app.

Remove all script files from the HTML and just run npm start from within the root folder of the create-react-app application. It will/should have installed all dependencies when you first ran npx create-react-app yourAppName.

It uses webpack and npm packages, not scripts loaded from CDNs, and you do not manually link to React or the entry point component inside the HTML. You just have a call to ReactDOM.render inside the index.js (or ts/jsx) file that renders the top-level parent component (usually App.js) to the DOM.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Child components are just called from within the parent. They are basically just functions. So just like you might have a main function entry point in a normal program.

If you read the two links I gave you can see it is two different things. The first link just shows how easily you can add React to any page, 99% of the time you will not be using React in that way. You will use a build process, like what create-react-app does.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.