Can you use React js static website only using cdn link? Im trying to create a static website on webhosting service.

CodePudding user response：

Yes, you can — in fact, that's how the Stack Snippets feature here supports React.

Here's an example that uses createElement instead of JSX (but keep reading):

const Example = () => {
    return React.createElement("div", null, "Hello, React!");
};

ReactDOM.render(React.createElement(Example), document.getElementById("root"));

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

That's probably want you want to do. You can still write JSX code, just compile it to non-JSX code (perhaps using Babel) before you put the compiled result in your public page. Or just write code using createElement directly.

You don't have to pre-compile JSX code, but you really, really should. It's possible to compile on-the-fly in the browser, but it takes a while, causing a significant delay on page load. But for completeness, here's how you can do that using the browser-hosted "standalone" Babel library:

<!-- Your code that needs compiling goes in a type="text/babel" `script` tag -->
<script type="text/babel" data-presets="react,stage-3">
const Example = () => {
    return <div>Hello, React!</div>;
};

ReactDOM.render(<Example />, document.getElementById("root"));
</script>

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

<!-- This is what supports JSX compilation (and other transformations) -->
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>

<!-- These are for React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Notice the delay on startup.

Just for completeness, if you need to compile async/await to non-async/await for obsolete browsers, you need another script:

<!-- This example supports `async` functions in obsolete environments that don't support them natively -->
<script type="text/babel" data-presets="es2017,react,stage-3">
function delay(ms, ...args) {
    return new Promise(resolve => setTimeout(resolve, ms, ...args));
}

// Example component that has a `useEffect`
const { useState, useEffect } = React;

const Example = () => {
    const [message, setMessage] = useState("Hello, React!");

    useEffect(() => {
        // A contrived async function for demo purposes only
        (async () => {
            await delay(800);
            setMessage("Hello again React!");
        })();
    }, []);

    return <div>{message}</div>;
};

ReactDOM.render(<Example />, document.getElementById("root"));
</script>

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

<!-- This is the script providing runtime support for compiled `async`/`await` code -->
<script src="https://unpkg.com/[email protected]/runtime.js"></script>
<!-- This is what supports JSX compilation (and other transformations) -->
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>

<!-- These are for React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Notice, again, the big delay on startup.

I suggest pre-compiling the code before putting it on the page, so it's more like the first snippet above that uses createElement, which is much faster.

CodePudding user response：

From what I am understanding is, you want to make a simple react app using CDN in suppose index.html

Create one HTML file

Create index.html file and add the following content. This file contains the basic HTML boiler plate code.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Include CDN links

Inside head section add

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Create react component like this in the file

MainComponent is our react component
React component name should start with Capital letter

<script type="text/babel">
    const MainContent = () => {
        return (
            <div>
                <p>Main content goes here...</p>
            </div>
        );
    }

    //render the component to the DOM
    ReactDOM.render(<MainContent />, document.getElementById('main-content'));
</script>

Open file

Open index.html file and you are done.