Render HTML Elements to the DOM id and vs problem

Tell us what’s happening:

1-How does the function work without any element having the id of “challenge-node” ??
2-when i write this code on my VS it tells me that the function is undefined even after i add the id of challenge-node to the div

Your code so far


const JSX = (
  <div>
    <h1>Hello World</h1>
    <p>Lets render this to the DOM</p>
  </div>
);
// change code below this line
ReactDOM.render(JSX,document.getElementById("challenge-node"))

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/render-html-elements-to-the-dom

FCC has already defined the code that uses this function, you don’t need to do it. The element with the correct ID is there, the file that defines it is just not visible to you to let you concentrate on the specific thing it’s trying to teach. If you just take the code in the FCC editor and dump it into VS Code as-is it won’t work, because there are other things you need imported to get it running (React, ReactDOM, a way to convert JSX to JS).

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const JSX = "Hello JSX!";
const M="BLA BLA"
const JSY = (
  <div id="challenge-node">
    <h1>Hello World</h1>
    <p>Lets render this to the DOM</p>
  </div>
);

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
        <h1>{JSX}</h1>
          <img src={logo} className="App-logo" alt="logo" />
          <NewComponent/>
          {JSY}
          ReactDOM.render(JSY,document.getElementById("challenge-node"))
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
        <p>Paragraph One</p>
        <p>Paragraph Two</p>
      <p>Paragraph Three</p>
      </div>
      
    );
  }
}

class NewComponent extends Component{
  render(){
    return(
    <h2>{M}</h2>
    )
  }
}
export default App;

You’re trying to render to dom inside the component, you need to render the entire app - if the app were just that JSY component, then you could do that, but you’re using that as part of the App component.

can u please tell me how,i’m trying to copy paste but there’s somethin wrong

if u haven’t noticed yet i am using create-react-app method

Sorry, I was trying to fix it of you at the same time you were trying to fix it :upside_down_face:

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

Same thing applies - you just include that JSY component as you have done, you don’t need to use the ReactDom.render function because that’s already defined for you - it is being used to render App

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const JSX = "Hello JSX!";
const M="BLA BLA"
const JSY = (
  <div id="challenge-node">
    <h1>Hello World</h1>
    <p>Lets render this to the DOM</p>
  </div>
);

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
        <h1>{JSX}</h1>
          <img src={logo} className="App-logo" alt="logo" />
          <NewComponent/>
          {JSY}
          ReactDOM.render(JSY,document.getElementById("challenge-node"))
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
        <p>Paragraph One</p>
        <p>Paragraph Two</p>
      <p>Paragraph Three</p>
      </div>
      
    );
  }
}

class NewComponent extends Component{
  render(){
    return(
    <h2>{M}</h2>
    )
  }
}
export default App;

OK. So while you don’t know how React quite works, I’d maybe avoid create-react-app.

But here, if you take the stuff in JSY and put it a function (which is what FCC will be doing):

function JSY() {
  return (
    <div id="challenge-node">
      <h1>Hello World</h1>
      <p>Lets render this to the DOM</p>
    </div>
  );
}

Then change to:

    return (
      <div className="App">
        <header className="App-header">
        <h1>{JSX}</h1>
          <img src={logo} className="App-logo" alt="logo" />
          <NewComponent/>
          <JSY />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>

i removed everything and added what’s on code camp but it didnt work

You now don’t have React or ReactDOM available, and the app no longer exists - again, I would maybe avoid CRA for now until you know how a React app fits together, it’s not likely to be helpful until you know that

i need somethin to try what codecamp is teaching me ,i don’t want to be just a chimp memorizing a bunch of code,i need to manipulate,try for myself what the code i’m learning does ?..u get what i’m trying to say ?..i need a platform for me to practice more and write my own notes of explanation

I totally understand - I think what you need to do is learn how Create React App is structured at first if you want to use that. But understanding how a React app it put together is extremely important, and CRA complicates things a bit by assuming you already know this.

You don’t need to use it straightaway though - it gives you loads of stuff that you won’t need at first.

For the absolute simplest setup, which is maybe ideal at first, you can just have an HTML page with a single JS file:

This is just going to give you a template of an HTML file, which has a script tag for each of React, ReactDOM and Babel (so that the JSX will work), then you just write your app in you script file.

I would seriously suggest doing this at first - it will get restrictive (things like import/export won’t work), but it will work perfectly well.

i have a couple questions and an idea, my first question is does the CRA already renders or gets all the react code from the App and converts my code into a readable formate for the compiler so i don’t really need to render anything while i’m working ?,i tried to search on the .render() but i don’t think i understand it properly. To sum what i’ve learnt so far .render() is what makes the compiler see the element or component that i put in it as a react code or it converts the react code into html and JS which are the only readable formats in any browser (correct me if i’m wrong).and as for my ideas i’m thinking of just finishing half or all the react tasks then have another look on the CRA and try all what i’ve learnt and check out the vids of the guy who showed me how to do the CRA method to see how what i learn here can apply on CRA

So what ReactDOM.render does is you give it a component (in the default CRA arr, it’s called App) and an element on an HTML page, and it does the work of converting what is defined in the JS to HTML:

function Example() {
  return (
    <h1>Hello, world!</h1>
  )
}

ReactDOM.render(<Example>, document.getElementById('example'))

That would render the component “Example” to the page, in an element with the ID example. You can have as many render functions as you want, but generally there will only be one, and that one will render the very top component. React works by having a tree of components, eg

App
  Header
    Title
  Main
    Timeline
      TimeLineItem
        ItemTitle
        ItemDescription
      TimeLineItem
        ItemTitle
        ItemDescription
      TimeLineItem
        ItemTitle
        ItemDescription

And the App.js file would look a little bit like this - note that each React component has a render function (works basically the same as ReactDOM.render, but in this case it’s just saying what HTML that particular component should render):

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: 'My App',
      timelineItems: [
        { title: 'Item 1', description: 'The first item' }
        { title: 'Item 2', description: 'The second item' }
      ]
    };
  }
  render() {
    return (
      <div>
        <Header title={this.state.title} />
        <Timeline timelineItems={this.state.timelineItems} />
      </div>
    );
  }
}

function Header({title}) {
  return (
    <header>
      <h1>{title}</h1>
    </header>
  );
}

function Timeline({timelineItems}) {
  return (
    <ul>{ timelineItems.map(TimelineItem) }</ul>
  );
}

function TimelineItem({title, description}) {
  return (
    <li>
      <h1>{title}</h1>
      <p>{description}</p>
    </li>
  );
}

So you’re describing App as a div with some children. And those children is described as a header and an unordered list, and that unordered list has some list item children.

And you would just send App to the render function, it would then take care of rendering all the children underneath it.

CRA puts that rendering function in another file: at the bottom of your file, it says export App. In the file that has the render function, it will import App, then later in the file, ReactDOM.render(<App>, document.getElementById('app')).

The reason it does that is just to separate things out - so you write all your code in the App file (and as you go on you write separate files for separate components, then import them into the app file), and then that main file deals with the rendering. It’s so that each file (each module) just has one job to do, but it’s a bit confusing when you first encounter it.

It’s definitely very very useful to know - once you’re comfortable with it, it makes the initial development much easier, but it does do quite a bit of magic that can make it difficult when you’re just starting out. For example, it’s built on top of a tool called WebPack, which has been configured to watch the files in specific directories - when you make changes and save, it automatically compiles everything. And it’s set up to deal with a lot of things that otherwise you’d have to configure manually - loading CSS, compiling JSX and JS modules, loading SVG images and so on.

Thaaaaaaaaaaaaaaaaaaank u sooooooooooooooooooooo much ,one last thing how can i operate SASS with the method of CRA ?