React - Add Comments in JSX

JavaScript
1

Tell us what’s happening:

My code is supposed to be javascript and HTML but it does not look to be read by the browser at all.

Your code so far

const JSX = (
  <div>
    <h1>This is a block of JSX</h1>
    <p>Here's a subtitle</p>
  </div>
);
let bodys =document.querySelector("body");
bodys.append(JSX);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 OPR/114.0.0.0

Challenge Information:

React - Add Comments in JSX

2

is your question related to the step or are you experimenting?

3

Hi there!

The challenge step is wants to add a comment to your JSX

4

tbh I was wanting to know if this really worked or was dependent on a framework I most likely would fail to create soon or ever. I could it is true answer this question in the proposed space but saw it was not going to do it except in the controled and under the hood steered manner. React seems to need things that I have not found in all my recent searches making it impossible to use on my own.

5

Hi, thanks. It was okay but would not have worked in anything outside of this setup so I didn’t see it as proper learning if I could not make a jsx file that really works with an html one. I don’t know how to connect them and need to be aware of this to make sense of even the simplest of code. It is like saying jump with a parachute but after the training not having access to a parachute anymore.

6

there is a challenge teaching how to use the render method later on, you would need that and also importing react, for things to work. If you google how to start a React app there are many guides

7

I am told
const sommit = <element>The content</element>
in a js file is possible now but clearly it is not.

8

No, in general JSX can’t be written in JavaScript. The file extension is .jsx and it needs to be compiled to JavaScript to work in a browser (this is repeated many times in the first challenge https://www.freecodecamp.org/learn/front-end-development-libraries/react/create-a-simple-jsx-element ). That is done in real time in the freeCodeCamp editor using babel.

it is not the best production thing, but you can also set up a simple page and import react and be able to write JSX there.

Here again my suggestion to google a guide on how to start a React app.

9

Okay. It seems that it is the browser that is the issue then, but how else would I see the results of any code without a browser ? Am I meant to be using preview in an editor?
It doesn’t seem impatient to need to see results or else no beta can be written at all.

10

A guide on how to set up a react environment usually contains also how to set up for the files and the live preview to be updated in real time.

11

React seems much harder to install than every link I have followed. Each one has led to very large sized files for what is the bare bones of something that doesn’t even open yet.

12

You can use CodePen or a similar thing. In CodePen, set the compiler for JS to “Babel” and import react, and it will work irl

13

But I don’t want to use codePen. I want to get something that works outside a Pen. The most simple exercises here are completely rejected in any setup not in a sandbox etc

14

If you set up Vite it should work, there is also CRA, which works but is now outdated.
You also need the render method, which is not included in the code shown in the React steps.
The next version will include more updated React stuff.

image
image1025×413 27.9 KB

Here a fullstack Vite environment that works:

You just need to change the App.jsx file. Write in the App component whatever React you want and it will be rendered

Follow here to set it up locally: Getting Started | Vite

15

You can’t write whatever jsx. Everything is rejected that is taught. Either it does not like the import or the export or the code.

16

There are always so many dependencies and they are out of date or something, don’t actually have the version of react that does render or ReactDOM or any of the things taught. I am looking at this new one you propose now but with zero success in the past will not understand a model to go from and expect dozens of related files where I am needing to know why so many dependencies, gigs just to write hello world.

17

the version of react in the curriculum is old, true. The new version of the curriculum will be updated.

18

react is better used for big projects, but you need to start small to understand how it works

19

I put the suggested vite and React in. Wonderful flags wave. Close and reopen and the preview is dead now. I never went big, it is the dependencies that attach and when you remove them it seems they are 100,000 files.

20

It failed again. I even went really simple and did the suggested inline script so there could be no mixup and the preview is dead as a dodo. It depended upon live process from the install but then all the associations don’t do any of the same things. Open preview again and there are no logos except in the code. A comment suggested I go small to start with. Am I hacked that the links you send get swapped into being actually massive numbers of files when I remove them?