What is a node and other basic React questions?

JavaScript
1

Challenge link:

Hi, I’ve just started the React part of a front end libraries course and I’d like to know what I’m actually doing when I render an element and also some other stuff. I will simply explain my reasoning and If anything I say here is wrong, please correct me.

Let’s take for example the following code:

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'))

If I understand correctly I’ve created a react object (not sure?) called JSX, which would look like this if I didnt use JSX, just pure React:

function HelloWorld() {
  return createElement(
    'div'
    ,{},
    createElement('h1',{},'Hello World'),
    createElement('p',{},'Lets render this to the DOM')
  );
}

ReactDOM.render(HelloWorld, document.getElementById('challenge-node'))

Unfortunately it doesn’t work and I don’t know why, I would appreciate if you could help me to rewrite this to work without JSX. The other thing I don’t understand is the render method:

ReactDOM.render(JSX, document.getElementById('challenge-node'))
ReactDOM.render(HelloWorld, document.getElementById('challenge-node'))

What I’m doing here is calling a ReactDom which is an object/function (I’m not sure?) imported from a react-dom package. I’m using a render method on it. That method has two arguments.
In my first example I’m passing a JSX component called JSX and in my second example I’m passing a function HelloWorld, which evaluates to a react component (again, I’m not sure what I’ve created).
The second argument is my node. It basically tells the compiler to look into a document container and find a child container with an ID of ‘challenge-mode’ (probably a <div id='‘challenge-mode’>) and put whatever my JSX or HelloWorld evaluates to in there

In one of earlier challenges Babel is mentioned, but I’m not sure where it comes into play. As far as I know when it comes to explaining what’s happening under the hood, because I’m implementing react and JSX code it’s all being trancribed first by Babel into ECMAScript which is then passed to ReactDOM, which is a copy of my browser’s DOM, then snippets of code that have been changed get edited into an actual browser’s DOM and finally direct changes in DOM cause changas on my screen, thus displaying Hello World.

Sorry for a lengthy post, but I hope I will gain some understanding of the fundamentals this way.

2

Hello there,

If you are comfortable with JavaScript, then I recommend this video: Deconstructing React || Tejas Kumar - YouTube

You are not calling HelloWorld. So, it is not equivalent to passing JSX into .render. Also, you will get an error about createElement not being defined, because it is not explicitly imported from React. I.e. add React.createElement (assuming you are working in the freeCodeCamp editor)

ReactDOM is a module: https://github.dev/facebook/react/blob/855b77c9bbee347735efcd626dda362db2ffae1d/packages/react-dom/index.js#L20

render is a function exported from the ReactDOM namespace.

Yes. A node in this case is just a class many Web/HTML elements extend.

Babeljs is a transpiler. It takes JavaScript, and transforms it into “other” JavaScript. See one of the links below

Useful links:

Hope this helps some

3

Thank you for help, I’m trying to rewrite my code to actually work without jsx but I’m encountering some problems.

I’m referencing: createElement • React

This is what I’ve done:

import { createElement } from 'react';

function HelloWorld() {
  return createElement(
    'div'
    ,{},
    createElement('h1',{},'Hello World'),
    createElement('p',{},'Lets render this to the DOM')
  );
}

export default function App() {
  return createElement(HelloWorld, {});
}

Unfortunately both importing the createElement,

import { createElement } from 'react';

and trying to render it

export default function App() {
  return createElement(HelloWorld, {});
}

cause the console to throw an “Uncaught ReferenceError: require is not defined”.

How should I modify my code for it to work?

4

Do you have a GitHub repo for this project? What does the rest of your code look like?

Are you using Webpack and/or create-react-app?

5

No, I’m just starting and I don’t even have a GitHub account. I’m just doing this challenge on the freeCodeCamp site:

I’ve posted the entire length of my code above.

6

You do not have an HTML file?

You will at a minimum need an HTML file that has a script element that references the file containing the code you wrote. The script element will need a type attribute with the value module or else the import and export parts will not work.

You will also need to install react locally. Have you done that already?

Why not learn React by starting with create-react-app or some other boilerplate generator to at least learn the basics?

7

I guess I’ve assumed that I will start by doing the tutorials here and try to build something for real after I’m done with front end development challenges . I didn’t really figure out how to actually create something outside of this website yet.

1 Like
8

There are a lot of things working behind the scenes on the freeCodeCamp.org site to make it easier for the user to just write JSX code. Without using the site, you would need to have several things setup locally first (which is beyond the scope of the curriculum site).

It is best to either read the React docs or watch some videos on setting up React locally. Almost all developers using React use JSX, so you need to learn how to use it first. You can always go back later and write code without it.

1 Like
9

Thanks, I guess I will leave it for now and return after I’m finished with the whole front end course.

1 Like
10

A post was split to a new topic: Need help with learning how to build projects on my own

11

A post was merged into an existing topic: Need help with learning how to build projects on my own