0

Начал изучать React, пишу код в разных файлах(html,css,jsx) И вроде нигде не видел что нельзя так делать но в некоторых случаях получается так что код не хочет работать и причину ошибок можно понять

Refused to apply style from 'http://localhost:3000/2/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

http://localhost:3000/2/app.jsx 404 (Not Found)

Uncaught Error: Could not load 
http://localhost:3000/2/app.jsx
    at XMLHttpRequest.n.onreadystatechange (babel.min.js:24)

Все решается если закинуть все в один файл html, но как быть,что делать если я не хочу писать в одном файле или неужели все пишут реакт в одном файле? Я что то не понимаю?

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Маршруты в React</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>

    <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="app"></div>

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

</script>
</body>
</html>

JSX

const Router = ReactRouterDOM.BrowserRouter;
const Route = ReactRouterDOM.Route;
const Switch = ReactRouterDOM.Switch;
const Link = ReactRouterDOM.Link;


class Home extends React.Component{
    render() {
        return <div>
            <h2>Home</h2>
            <p>Match: {JSON.stringify(this.props.match)}</p>
            <p>Location: {JSON.stringify(this.props.location)}</p>
            <p>Id: {JSON.stringify(this.props.match.params.id)}</p>
            <p>Name: {new URLSearchParams(this.props.location.search).get('name')}</p>
            <p>Age: {new URLSearchParams(this.props.location.search).get('age')}</p>
        </div>
    }
}

ReactDOM.render(
    <Router>
        <div>
            <nav>
                <Link to={"/1/?name=Tigran&age=22"}>Tigran</Link>
                <Link to={"/2/?name=Vahag&age=24"}>Vahag</Link>
            </nav>
            <Switch>
                <Route path={'/:id?'} component={Home}/>
            </Switch>
        </div>
    </Router>,
    document.getElementById('app')
)
1
  • 3
    Если Вы хотите изучать React, то лучшим решением на данный момент будет использовать уже готовую, качественную сборку create-react-app (CRA) Да и вообще подробнее о старте React приложения Вы можете почитать в документации reactjs.org/docs/getting-started.html
    – meine
    20 янв 2019 в 2:27

1 ответ 1

2

Либо используйте create-react-app либо посмотрите как самостоятельно настроить проект с React и Webpack - вот годная статья

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.