Как запускать страницу с использованием ReactJS без использования сервера?

Question

Я использую расширение Live Server для Visual Studio Code. Когда я запускаю страницу с помощью этого расширения, всё работает нормально, но когда я просто открываю index.html (откуда запускаются все скрипты, загружается ReactJS, JSX) в браузере, ничего не работает. HTML Код:

<!DOCTYPE html>
<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">
    <link rel="stylesheet" href="style.css">
    <title>My Projects</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <!-- For ReactJS -->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <!-- For ReactJS too -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script> <!-- For JSX -->
    <script src="App.js" type="text/babel"></script>
</body>
</html>

App.js:

const root = ReactDOM.createRoot(document.getElementById('root'))

class Button extends React.Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick() {
        window.open(this.props.link, '_blank');
    }
    render() {
        return <button id={this.props.ID} className={this.props.Class} onClick={this.handleClick}>GitHub</button>
    }
}

class Panel extends React.Component {
    constructor(props) {
        super(props)
        this.inner = this.props.inner
    }
    render() {
        return <div className="Panel">{this.inner}</div>
    }
}

class Image extends React.Component {
    constructor(props) {
        super(props)
        this.inner = this.props.inner
    }
    render() {
        return <img src={this.props.Source} className="Panel-Image"/>
    }
}

function App() {
    return <div>
        <Panel inner={ <div> <Button ID="github_button" Class="Button" link="https://github.com/mikhail-zh-2009/React-Page"/> ReactJS Calculator <br/> <Image Source="project-react-page.png"/> </div> }/>
        <Panel inner={ <div> <Button ID="github_button" Class="Button" link="https://github.com/mikhail-zh-2009/React-Page-2"/> This Page <br/> <Image Source="image.png"/>  </div> }/>
        <Panel inner={ <div> <Button ID="github_button" Class="Button" link="https://github.com/mikhail-zh-2009/Web-Page-One"/> System Converter <br/> <Image Source="project-web-page-one.png"/>  </div> }/>
        <Panel inner={ <div> <Button ID="github_button" Class="Button" link="https://github.com/mikhail-zh-2009/Web-Page-01.08.2022"/> Bubbles! <br/> <Image Source="project-bubbles.png"/>  </div> }/>
    </div>
}

root.render(<App/>)

Консоль:

Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
You might need to use a local HTTP server (instead of file://): https://reactjs.org/link/react-devtools-faq // Я знаю, что здесь написано, что нужно использовать локальный сервер, но можно как-то обойтись без этого?
babel.min.js:24 
        
       You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
u @ babel.min.js:24
index.html:1 
        
       Access to XMLHttpRequest at 'file:///C:/Users/sukas/Desktop/web/14/App.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.
App.js:1 
        
       Failed to load resource: net::ERR_FAILED

Answer 1

Только что проверил без всяких серверов, просто открыл HTML файл в браузере и всё заработало:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        const root = ReactDOM.createRoot(document.getElementById('root'))

class Button extends React.Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick() {
        window.open(this.props.link, '_blank');
    }
    render() {
        return <button id={this.props.ID} className={this.props.Class} onClick={this.handleClick}>GitHub</button>
    }
}

class Panel extends React.Component {
    constructor(props) {
        super(props)
        this.inner = this.props.inner
    }
    render() {
        return <div className="Panel">{this.inner}</div>
    }
}

class Image extends React.Component {
    constructor(props) {
        super(props)
        this.inner = this.props.inner
    }
    render() {
        return <img src={this.props.Source} className="Panel-Image"/>
    }
}

function App() {
    return <div>
        <Panel inner={ <div> <Button ID="github_button" Class="Button" link="https://github.com/mikhail-zh-2009/React-Page"/> ReactJS Calculator <br/> <Image Source="project-react-page.png"/> </div> }/>
        <Panel inner={ <div> <Button ID="github_button" Class="Button" link="https://github.com/mikhail-zh-2009/React-Page-2"/> This Page <br/> <Image Source="image.png"/>  </div> }/>
        <Panel inner={ <div> <Button ID="github_button" Class="Button" link="https://github.com/mikhail-zh-2009/Web-Page-One"/> System Converter <br/> <Image Source="project-web-page-one.png"/>  </div> }/>
        <Panel inner={ <div> <Button ID="github_button" Class="Button" link="https://github.com/mikhail-zh-2009/Web-Page-01.08.2022"/> Bubbles! <br/> <Image Source="project-bubbles.png"/>  </div> }/>
    </div>
}

root.render(<App/>)
    </script>
</body>
</html>

БЛОГ НА HUSL

Как запускать страницу с использованием ReactJS без использования сервера?

Ответы (1 шт):