Posted in
2
12:10 am, October 12, 2021
How do Self-Closing JSX Tags Work?
So in JSX all the tags must be closed, other wise it can break the element.
for example: <div> must have a closing </div> and also for elements like <br> and <hr> must include the /.
So make sure you do your single elements with a / at the end, like <br /> and <hr /> rather than the normal html versions of them.
HTML
<div id="root"></div>Scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0-alpha-5fa4d79b0-20211008/umd/react.production.min.js" integrity="sha512-5PVmWGoNJocWPdQJmJd1aRbz3cFcFgXctWKLWcitqtgX64jF+ttfg9g2oLltmeQ1HUo3gT6QchaMK3h+S+JG4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0-alpha-5fa4d79b0-20211008/umd/react-dom.production.min.js" integrity="sha512-pUsjUv+9XgkTn+UbLyNIT4YNZPF2p0E45FBKmDL7Ti8iovYwp2CUkQs6Q7J9y5scLxWaOM+T5jJc0ls+WHUcmQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const JSX = (
<div>
<h2>Welcome to React!</h2> <br />
<p>Be sure to close all tags!</p>
<hr />
</div>
);
ReactDOM.render(JSX, document.getElementById('root'))
</script>External Link for How do Self-Closing JSX Tags Work?
View Statistics
This Week
21
This Month
163
This Year
0
Add Comment
Other Items in react
Using props with Stateless Functional Components in React
How to Access Props Using this.props in React
How to Use PropTypes to Define Props in React
How to Override Default Props in React
How to use default props in React
How to Pass an Array as Props in React
How to Pass Props to a Stateless Functional Component in React
How to Write a React Component from Scratch
How to Render a React Class Component to the DOM
How to Compose React Components in React
How to Use React to Render Nested Components
How to Create a Component with Composition in React
How to Create a React Component using the ES6 class method
What is a Stateless Functional Component in React
How do Self-Closing JSX Tags Work?
How to Define a HTML Class in JSX in React
How to Render HTML Elements to the DOM with React
How to Add Comments in JSX
Create a Complex JSX Element
Create a Simple JSX Element
adding react with JSX using babel
adding react to a website in 3 steps
using babel for react compiling in browser
react hello world with time and date updating
react hello world with variable name
react basic hello world
Related Search Terms
Other Categories in Code
c testing apache apps asp bat bootstrap bootstrap templates core css css grid design elements fancybox fonts foundation framework gimp git html icons ideas images javascript jquery js linux mac nginx node php php functions php simple html dom pi400 python react sections site bugs site documentation sql sqlite sublime svg templates tools virtual box webdev windows wordpress
