I'm trying to study React in the context of Django... React by itself works, Django also works. When I'm trying to work with React in the Django, it doesn't give me any troubles, but nothing is seen on the page.
I tried:
I installed all possible packages from React. I lowered the version of one package, I don't remember exact name of it right now... It gave me some faults, I lowered its version because it automatically installed alfa version.
Originally I installed React into the Django project, but then I realized, it is wrong way to do it and installed React as separate Django project...
I tried to look up if somebody else had the same problem as me, found two threads, I tried solutions, they didn't help unfortunately: stackoverflow.com/questions/61125436/opening-a-new-react-portal-only-opens-an-empty-page-with-no-content And one more I cannot find it right now... I followed this blog: www.valentinog.com/blog/drf/
My code. I have to mention. I start node.js in one cmd window with 'npm run dev' and after I start Django project in another cmd window... with 'python manage.py runserver'... Both start without any complaints...
The structure is quite standard, two projects... frontend(React) and sc(Django)...
frontend/src/index.js:
//import App from "./components/App";
import React from 'react';
import ReactDOM from 'react-dom';
import '/static/css/index.css';
import '/src/components/App.js';
import App from './components/App';
import * as serviceWorker from './serviceWorker';
import '/node_modules/bootstrap/dist/css/bootstrap.css';
ReactDOM.render(<App />, document.getElementById('app'));
serviceWorker.unregister();
frontend/src/components/App.js:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>
<h4>To Do List</h4>
</div>
);
}
}
export default App;
frontend/templates/frontend/index.html(these folders included in settings.py as templates, so Django has to see files in theses folders):
<!DOCTYPE html>
{% load render_bundle from webpack_loader %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Site</title>
</head>
<body>
<div id="app"></div>
+{% render_bundle 'frontend' %}//the + sign can be seen on the page
</body>
</html>
sc_s/urls.py:
path('front_index/', views.front_index, name='front_index'),
sc_s/views.py:
def front_index(request):
return render(request, 'frontend/index.html')
Please let me know if I forgot some code...
