React Grimoire
  • ⁉️Introduction
  • 🧑‍🎓🧑🎓 React Fundamentals
    • The Basic javascript "Hello world"
    • Basic view on React core API's
    • JSX
    • React Props and styling
    • Components
    • Handling Events With React
    • Form
    • Array and Lists
    • Class Component State
    • Class Component Life Cycle
    • PropTypes
  • 🪝React Hooks
    • Intro to hooks
    • useState
    • useEffect
    • useRef
    • useContext
    • useMemo
    • useCallback
    • useReducer
    • useLayoutEffect
    • useImperativeHandle
    • Hook flow
    • Custom hooks
      • useDebugValue
    • React 18 hooks
  • 📓React Guidelines
    • React Components Composition Guidelines
    • React hooks guidelines
    • The use of Memoization
    • Lifting State Up
  • 🔭Concepts
    • Advanced Patterns
      • Compound Components Pattern
      • Control Props Pattern
      • Props Getters Pattern
      • Custom hook pattern
      • Context Module
      • State Reducer
    • React Under the hood
      • 🏁What is "Rendering"?
      • 🏁React Lifecycle
      • 🏁Reconciliation & Virtual DOM in React
      • 🏁Fiber
    • ⏰Concepts to always have in mind
  • 🧩React ecosystem
    • Forms Tools
      • React Hook Form VS Formik
    • TypeScript
      • 🏁Conditional React props with TypeScript
    • 🏁Build tool choice for MVP projects
    • A CSS methodology comparison
      • 🏁Post CSS processor :Sass
      • 🏁CSS in js :Styled-components
      • 🏁Utility Classes: Tailwind
  • ⁉️Testing
    • In Progress
  • 🎭Performance
    • in Progress
  • 🚀Deployment
    • In Progress
  • 🖼️Design system
    • 🏁What's a design system anyway ?​?
  • 🔗Us-full links
    • Typescript and React basic tutorial
    • React-philosophies
    • React new doc
Powered by GitBook
On this page
  • JSX rewrites your JavaScript files
  • Why use JSX?
  • References and articles :

Was this helpful?

Edit on GitHub
  1. 🧑🎓 React Fundamentals

JSX

The Elegant React way

Writing our code with React.createElement() and reactDOM.render(), it's a little bit verbose; not that readable.

The good thing the react team thought about that too and create a HTML-like syntactic suger on top of the raw React Api's called JSX

JSX rewrites your JavaScript files

JSX is just a tool that converts files like this:

const element =
  <div id="container">
    Hello, world!
  </div>

into files like this:

const element =
  React.createElement(
    'div',
    {id:'container'},
    "Hello, world!"
  )

Why use JSX?

To use JSX with reasonable performance, you'd need a build process, which would entail (at a minimum) understanding and installing node.js and create-react-app or babel. While this is usually acceptable, there are times when you'd rather avoid the overhead.

Learning all of this just to avoid typing createElement() a few times doesn't make much sense if you're just getting started. However, there will come a point when your apps will be large enough that tooling will be a worthwhile investment. And once you've arrived at this point, JSX is a fantastic tool to have:

  • Large element definitions are simplified.

  • It provides visual cues and assists editors with syntax highlighting.

  • It assists React in producing more useful error and warning messages

If you can train your brain to look at JSX and see the compiled version of that code, you'll be MUCH more effective at reading and using it! I strongly recommend you give this some intentional practice.

Because JSX is not actually JavaScript, it must be converted using a code compiler. One such tool is Babel.

You'll be MUCH more effective at reading and using JSX if you can train your brain to look at it and see the compiled version of the code! I strongly advise you to put this into practice on a regular basis.

So let's convert our code to JSX. First of all, like react and reactDOM, we will add babel script from unpkg

 ...
   <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
    <script type="module">
    
    const element = React.createElement('div', {
      className: 'container',
      children: 'Hello World',
    })

    ReactDOM.render(element, document.getElementById('root'));
    </script>
  </body>
...

Then let's try to change our React.createElement() to JSX

...
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
  <script type="text/babel">
    // 🔥 "type="text/bable" to indicate that this code need to be compiled by babel
    
    // const element = React.createElement('div', { className = 'container' }); 
    
                                          👇
    
    const element = <div className="container"></div>
    ReactDOM.render(element, document.getElementById('root'))
  </script>
</body>
...

You may have noticed that I changed the type of our JavaScript from module to text/babel and that's to indicate to the browser not to evaluate the script . However, babel will control the compiling for that script

Easy right? How about children?

...
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
  <script type="text/babel">
  // 🔥  "type="text/bable" to indicate that this code need to be compiled by babel
  
    // const element = React.createElement('div', { className = 'container' }, [
    //  React.createElement('div', { className = 'container' }, "I'm the first child"),
    //  React.createElement('div', { className = 'container' }, "I'm the first child"),
    // ]); 
                                    👇 

    const element = (
      <div className="container">
        <div className="firstChild">I'm the first child</div>
        <div className="secondChild">I'm the second child</div>
      </div>
      );
    ReactDOM.render(element, document.getElementById('root'));
  </script>
</body>
...

JSX appears to be HTML, but it is transformed into plain JavaScript objects under the hood by babel.

You can't return two objects from a function unless they're wrapped in an array. This explains why you can't return two JSX tags without first wrapping them in another tag or fragment.

References and articles :

PreviousBasic view on React core API'sNextReact Props and styling

Last updated 3 years ago

Was this helpful?

Because JSX is not actually JavaScript, you have to convert it using something called a code compiler. is one such tool.

Pro tip: If you'd like to see how JSX gets compiled to JavaScript, .

If you want to see how JSX is compiled to JavaScript, use the

🧑‍🎓
Babel
check out the online babel REPL here
online babel REPL.
Writing Markup with JSXreactjs
Logo
JavaScript in JSX with Curly Bracesreactjs
Logo
Introducing JSX – React
JSX In Depth – React
Introducing the New JSX Transform – React Blog
Coding Workshops for Women
Logo
Logo
Logo
Logo