Introducing React and JSX in HTML

Preface

Vue can be very conveniently integrated with pure HTML, replacing the functionality of jQuery. When I encountered a similar scenario once, I thought about whether React could also be incorporated into an HTML webpage in this way to improve development efficiency.

The answer is, of course, yes. However, using JSX directly in HTML might lead to some performance degradation... but it works well enough for most cases.

Importing Dependencies

To use React and JSX in Pure HTML, the following dependencies are required:

• react
• react-dom
• babel

You can simply use the unpkg CDN.

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.20.6/babel.min.js"></script>

Getting Started with Coding

Just like with Vue, you need to create a container in your page.

<div id="root"></div>

For JSX, it's recommended to create a separate file for better IDE hints (IDE提示).

Here, we create a new file named app.jsx.

Import it after your dependencies.

<script type="text/babel" src="js/app.jsx"></script>

Then you can start writing JSX directly.

function App() {
    const [name, setName] = React.useState("codelab")
    return (
        <div>
            <div>hello, {name}</div>
            <input value={name} onChange={e => setName(e.target.value)} />
        </div>
    )
}

const container = document.getElementById('root')
const root = ReactDOM.createRoot(container)
root.render(<App/>)

Done

The actual usage effect is passable at best.

Of course, it's still better to use CRA to create a React application, then bundle and deploy it; otherwise, the performance of complex pages can be quite problematic.