Я не могу понять, почему он не позволяет мне импортировать мой <Login/> компонент в мой <Main/> компонент. Я почти уверен, что мой путь к каталогу написан правильно (или так?), Поэтому мне странно, что это не работает.
Я пытался запустить npm install --save ./resources/js/components/Login
, но это не сработало.
Это проект Laravel, но я использую React для внешнего интерфейса. Прикрепленное изображение моего рабочего каталога. Как я могу исправить мою проблему?
Вот Main.js:
import React, { Component } from 'react';
import Login from './resources/js/components/Login';
import ReactDOM from 'react-dom';
class Main extends Component {
render() {
return (
<div>
<h1 className="text-center">test</h1>
<Login/>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Main />, document.getElementById('example'));
}
export default Main;
Вот Login.js:
import React, {Component} from 'react';
class Login extends Component {
render() {
return(
<form>
<div className="form-group">
<label htmlFor="emailInput">Email Address</label>
<input type="text" className="form-control" placeholder="Enter email"/>
</div>
<div className="form-group">
<label htmlFor="passwordInput">Password</label>
<input type="password" className="form-control" placeholder="password"/>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
);
}
}
export default Login;
Вот login.blade.php:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
@include('partials.metadata')
<title>Laravel</title>
<link rel="stylesheet" href="/css/app.css" type="text/css">
</head>
<body>
<main id="example">
<div class="container-fluid">
{{-- JSX --}}
</div>
</main>
<script type="text/javascript" src="./resources/js/containers/Main.js"></script>
</body>
</html>
