Create a User Interface with React’s JSX syntax
- React community uses JSX (XML syntox for writing React elements)
- Convert the demo to JSX
- This doesn’t work because this is non-standard syntax.
- We need to convert it
- Check out the playground to see what it does for our JSX
- with the exception of a few annotations, this definition is the same as what we wrote by hand.
Let’s get babel processing this script
- Add a
scripttag to include
- and make sure it’s
- and make sure it’s
- Change the
- (Telling babel that this is should be processed like a module)
- Then make the type
- Ensuring that everything gets processed as Babel
- Now change the children to
Hello <em>React with JSX</em>(so we can see the change)
When we save this and refresh, we see:
- The updated text,
- (When we inspect) A script tag that was dynamically created, with our babel-compiled code,
- And a warning…
You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
Which is a good reminder. What we’re doing here is just learning how React works. We’re not building a production grade app.
To do that, I recommend the Start a New React Project page on the React docs. This will lay out all of the recommended options and trade-offs for starting a new project with a production-grade framework.
In this lesson, we’re switching gears to JSX, the syntactic sugar that makes writing React elements a breeze.
Add the Babel script tag to your HTML to enable JSX processing in the browser. Change the existing script tag’s type attribute from “module” to “text/babel” to cue Babel’s processing. Inside the script tag, replace the React.createElement call with JSX syntax. Update the content within the JSX to “Hello React with JSX” to see JSX in action. Once saved, upon refresh, you’ll witness the magic:
Your browser displays the updated text, “Hello React with JSX”. Inspect the page to see the new script tag with the transpiled code. Remember, this setup is for educational purposes. For production, you’ll want to precompile your JSX. The React documentation offers guidance for setting up production-grade applications.