Я изучаю React, создавая приложение, но думаю, что недооценил его сложность. Позвольте мне поделиться с вами, чтобы узнать, правильно ли я понял:
Идея заключается в создании приложения React для отслеживания предметов, которые я хочу изучать. Я создал следующую структуру:
MainTopic:
-- title: String
-- percentage_completed: Number
-- Topic: Array
---- Subtopic: Array
---- title: String
---- percentage_completed: Number
------ Resources: Array
------ title: String
------ link: String
------ completed: Boolean
Структура JSON должна выглядеть следующим образом - документы обрезаются _id его родителя:
{
"title": String,
"percentage_completed": Number
"topic":[
{
"title":String,
"percentage_completed":Number
"subtopic":[
{
"title":String
"percentage_completed": Number
"resources":[
{
"title":String
"link": String
"concluded": Boolean
}
]
}
]
}
]
}
Каждая тема называется MainTopic, и в ней много тем, например: JavaScript имеет NodeJS, Структуры данных и Алгоритмы, так как тема, а Express - это подтема Node и так далее ...
У меня есть NodeJS API, обслуживающий JSON, чтобы получить весь список документов, уже сохраненных в базе данных, а также каждую его конкретную часть, основные темы, темы из заданной основной темы и т. Д. И т. Д. И т. Д. Вот вы - JSON возвращается:
[
{
"topics": [
{
"subtopics": [
{
"resources": [
{
"_id": "5b857b00c346783a24cbdbb5",
"subtopic_id": "5b857ad0c346783a24cbdbb4",
"title": "Udemy Course",
"link": "https://udemy.com/dictionaires-nodejs",
"concluded": false,
"__v": 0
}
],
"_id": "5b857ad0c346783a24cbdbb4",
"title": "Dictionaries",
"percentage_concluded": 0,
"topic_id": "5b857a12c346783a24cbdbae",
"__v": 0
}
],
"_id": "5b857a12c346783a24cbdbae",
"maintopic_id": "5b8565b90c927b2c47df7d9d",
"title": "Node.js",
"percentage_concluded": 0,
"__v": 0
},
{
"subtopics": [
{
"resources": [],
"_id": "5b857ab8c346783a24cbdbb3",
"title": "Lists",
"percentage_concluded": 0,
"topic_id": "5b857a1ac346783a24cbdbaf",
"__v": 0
}
],
"_id": "5b857a1ac346783a24cbdbaf",
"maintopic_id": "5b8565b90c927b2c47df7d9d",
"title": "Java",
"percentage_concluded": 0,
"__v": 0
},
{
"subtopics": [
{
"resources": [
{
"_id": "5b857a91c346783a24cbdbb2",
"subtopic_id": "5b857a6ec346783a24cbdbb1",
"title": "Udemy Course",
"link": "https://udemy.com",
"concluded": false,
"__v": 0
}
],
"_id": "5b857a6ec346783a24cbdbb1",
"title": "Variables",
"percentage_concluded": 0,
"topic_id": "5b857a21c346783a24cbdbb0",
"__v": 0
}
],
"_id": "5b857a21c346783a24cbdbb0",
"maintopic_id": "5b8565b90c927b2c47df7d9d",
"title": "Python",
"percentage_concluded": 0,
"__v": 0
}
],
"_id": "5b8565b90c927b2c47df7d9d",
"title": "Programming Languages",
"percentage_concluded": 30,
"__v": 0
}
]
Я хочу запустить часть React, но я действительно не уверен, как ее структурировать, я имею в виду, должен ли я создать 1 компонент для обработки всего объема запрашиваемых данных или мне нужно создать один компонент для каждой движущейся части? Как ... компонент для MainTopics, один для Topics, один для SubTopics и один для каждого ресурса.
Пока у меня есть следующий код Reac:
App.js
components/
Learning.js
Resource.js
Header.js
Основной файл приложения App.js
import React, { Component } from 'react';
import Header from './components/Header';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Learning from './components/Learning';
import './index.css';
class App extends Component {
render() {
return (
<div className="App">
<Header branding="Learn Tracker"/>
<div className="container">
<Learning />
</div>
</div>
);
}
}
export default App;
Другой Learning.js:
import React, { Component } from 'react'
import Resource from './Resource';
import axios from 'axios';
class Learning extends Component {
constructor(props){
super(props);
this.state = {
resource: [{}]
}
this.fetchData();
}
fetchData(){
axios.get('/api/all')
.then(result => {
this.setState({resource: result.data});
})
.catch(err => {
console.log(err);
});
}
render() {
const {resource} = this.state;
resource.map((resource) => {
return (
<Resource resource={resource} />
)
});
return(
<div>
{resource}
</div>
);
}
}
export default Learning;
Resource.js:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Resource extends Component {
render() {
const {resource} = this.props;
return (
<div className="card mb-3">
<div className="card-header">
<h4>{ resource[0].maintopic.title }</h4>
</div>
<div className="card-body">
<h4 className="card-title">{ resource[0].maintopic.topic.title }</h4>
<ul className="list-group">
<li className="list-group-item">
{ resource[0].maintopic.topic.subtopic.title }
<div className="card-body">
<ul className="list-group list-group-flush">
<li className="list-group-item">Title: { resource[0].maintopic.topic.subtopic.resources[0].title }</li>
<li className="list-group-item">Link: { resource[0].maintopic.topic.subtopic.resources[0].link }</li>
<li className="list-group-item">Concluded: { resource[0].maintopic.topic.subtopic.resources[0].concluded }</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
)
}
}
Resource.propTypes = {
resource: PropTypes.object.isRequired
}
export default Resource;
И, наконец, Header.js:
import React from 'react'
import PropTypes from 'prop-types';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../App.css';
import '../index.css';
const Header = props => {
const { branding } = props;
return (
<nav className="navbar navbar-expand-sm navbar-dark bg-primary mb-3 py-3">
<div className="container">
<a href="/" className="navbar-brand">{branding}</a>
<div>
<ul className="navbar-nav mr-auto">
<li className="nav-item">
<a href="/" className="nav-link">Home</a>
</li>
<li className="nav-item text-white"><p className="nav-link"><span className="branco">|</span></p></li>
<li className="nav-item">
<a href="/" className="nav-link">About</a>
</li>
</ul>
</div>
</div>
</nav>
)
}
Header.defaultProps = {
branding: "Learning Tracker"
}
Header.PropTypes = {
branding: PropTypes.string.isRequired
}
export default Header;
Пожалуйста, помогите мне понять, как я могу найти лучшее решение для структуры приложения.
Заранее спасибо.
С наилучшими пожеланиями.