Here’s a useful link: https://reactjs.org/docs/introducing-jsx.html
I think it’s better to follow the fcc curriculum in a linear way from top to bottom, at least for the first three certificates, as it gradually introduces new ideas.
As @xyxb23 pointed out, JSX is a syntactic sugar for calling React.createElement(component, props, ...children)
The idea is to have a syntax that look and feel similar to HTML, but in JS.
For example the following React snippet
const JSX = (
<p className="red-text">Hello World!</p>
// change code below this line
Is conceptually similar in JS as:
// select root node
let root = document.getElementById('test');
// create html elements
let parent = document.createElement("div");
let p = document.createElement("p");
p.innerHTML = "Hello World!";
// populate the nodes
Hope this helps
And no worries, with time and practice it will click and all will make sense!
Is boiler plate and once it’s set up you won’t have to worry about it. The first param is the root component of your React app (in this case “JSX”) and the second is the element in your HTML file where you will be putting your React rendering - again, something you usually don’t have to touch.
const JSX = (
<p>Lets render this to the DOM</p>
is standing in for your root React component. Normally it will be a function that returns JSX or a JS class with a method called “render” that returns JSX. But that will come later.
For now, just do the exercises. React is weird and confusing at first, but becomes cool and powerful. Don’t worry too much about every detail - it will all sink in later.
Thank you so much all and very sorry for the late response, this is in a different area to the learning!
A lot of that makes sense and some is still going over my head, but I really appreciate that! Taking the advice of going from the beginning that Freecodecamp have laid out. Hopefully I’ll be back in a short while to say ahhhh yes, it all seems so simple now!