如何正确拆分 React 应用程序组件
How to proper split React application components
我正在通过创建应用程序来学习 React，但我认为我低估了它的复杂性。让我与您分享一下，看看我是否做对了：
我的想法是创建一个 React App 来跟踪我想学习的科目。我创建了以下结构：
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 来获取已存储在数据库中的整个文档列表以及它的每个特定部分，MainTopics，来自给定 MainTopic 的主题等.等...这里你是 JSON 它 returns:
[
{
"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，一个用于每个 Resource。
到目前为止，我有以下 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;
请帮助我了解如何找到应用程序结构的最佳解决方案。
提前谢谢你。
此致。
我认为在 React 中安排文件结构的最好和最简单的方法是使用 独立组件。在这种方法下，您可以尽可能以最小的单元（组件）构建您的应用程序。这些组件将包含 运行 任何地方所需的一切。这种方法的主要优点是它鼓励高水平的代码可重用性。
如果您要取出一个组件并将其插入到一个完全不同的应用程序中，它将 运行 与以前的应用程序中 运行 完全相同。下面是您如何构建您的应用程序；
├── src
│ ├── components // Dumb components should go here -> they should be stand-alone components
│ │ ├── App // App should should render all the main topics
│ │ │ ├── index.js // Component logic and jsx
│ │ │ ├── index.test.js // Component tests
│ │ │ ├── index.css // Component styles
│ │ ├── Header // All components should have their own index.js and index.test.js files
│ │ │ ├── index.js // Component logic and jsx
│ │ │ ├── index.test.js // Component tests
│ │ │ ├── index.css // Component styles
│ │ ├── MainTopic // MainTopic should be a component on its own because it's repeated. It's in an array.
│ │ │ ├── index.js // Component logic and jsx
│ │ │ ├── index.test.js // Component tests
│ │ │ ├── index.css // Component styles
│ │ ├── SubTopic // SubTopic should be a component on its own because it's repeated. It's in an array.
│ │ │ ├── index.js // Component logic and jsx
│ │ │ ├── index.test.js // Component tests
│ │ │ ├── index.css // Component styles
│ │ ├── Topic // Topic should be a component on its own because it's repeated. It's in an array.
│ │ │ ├── index.js // Component logic and jsx
│ │ │ ├── index.test.js // Component tests
│ │ │ ├── index.css // Component styles
│ ├── index.test.js // Tests for non-components files
│ ├── index.js
│ ├── routes.js // All routes should be registered here
这完全取决于应用程序的大小和您可能希望（现在）添加到您的应用程序或可能考虑在将来使用（添加）的附加技术（例如 Redux）。 React 对您如何将文件放入文件夹没有意见。
话虽如此，以下是您可能会考虑的一些示例：
按要素或/和路线分组
[ 将您的 CSS、JS 和其他文件放在按功能或路线分组的文件夹中。 ]
common/
Avatar.js
Avatar.css
APIUtils.js
APIUtils.test.js
feed/
index.js
Feed.js
Feed.css
FeedStory.js
FeedStory.test.js
FeedAPI.js
profile/
index.js
Profile.js
ProfileHeader.js
ProfileHeader.css
ProfileAPI.js
按文件类型分组
[将相似的文件分组在一起]
api/
APIUtils.js
APIUtils.test.js
ProfileAPI.js
UserAPI.js
components/
Avatar.js
Avatar.css
Feed.js
Feed.css
FeedStory.js
FeedStory.test.js
Profile.js
ProfileHeader.js
ProfileHeader.css
这些是简单应用程序的一些基本示例。但是，如果您的应用程序开始变大，您会考虑根据组件正在执行的任务将它们分成单独的文件夹，为您的组件制作 containers 并将它们放在一个单独的文件夹中。如果您使用 scss 抱怨者之类的东西，您可能会为样式创建一个单独的文件夹，并将已编译的 CSS 文件与 scss 文件分开。此外，如果您使用 Redux 之类的东西，您将拥有 actions 和 reducers 文件夹，并且可能有一个单独的 store 文件夹（您可以在其中配置 react-redux store ).该文件夹结构将如下所示：
/src
/components // where you put and divide all your components
/posts // folder containing all files relevant to your eg post feature
/likes // likewise, a folder containing all files relevant to your likes feature
/home
Header.js // some of your other files that are used everywhere
Footer.js
App.js // your main App.js file, if you decide to put it inside of your 'components' folder
...
/containers // where you would put your containers, get all the data and pass it down to components as props
/HomeContainer.js
/PostContainer.js
/LikesContainer.js
/actions // all of for your action creators and types
/reducers // all of for your reducers, including your root reducer
/utils // all your helper methods, eg for your auth flow
/styles // your css (or/ and scss) files
/assets // your logos, images, and other static files
...etc
index.js // Your main index.js file inside of the root 'src' folder
我还建议阅读此内容：Thinking in React。
它可能会给您关于如何使用 React.
创建应用程序的一些提示
我正在通过创建应用程序来学习 React，但我认为我低估了它的复杂性。让我与您分享一下，看看我是否做对了：
我的想法是创建一个 React App 来跟踪我想学习的科目。我创建了以下结构：
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 来获取已存储在数据库中的整个文档列表以及它的每个特定部分，MainTopics，来自给定 MainTopic 的主题等.等...这里你是 JSON 它 returns:
[
{
"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，一个用于每个 Resource。
到目前为止，我有以下 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;
请帮助我了解如何找到应用程序结构的最佳解决方案。
提前谢谢你。
此致。
我认为在 React 中安排文件结构的最好和最简单的方法是使用 独立组件。在这种方法下，您可以尽可能以最小的单元（组件）构建您的应用程序。这些组件将包含 运行 任何地方所需的一切。这种方法的主要优点是它鼓励高水平的代码可重用性。
如果您要取出一个组件并将其插入到一个完全不同的应用程序中，它将 运行 与以前的应用程序中 运行 完全相同。下面是您如何构建您的应用程序；
├── src
│ ├── components // Dumb components should go here -> they should be stand-alone components
│ │ ├── App // App should should render all the main topics
│ │ │ ├── index.js // Component logic and jsx
│ │ │ ├── index.test.js // Component tests
│ │ │ ├── index.css // Component styles
│ │ ├── Header // All components should have their own index.js and index.test.js files
│ │ │ ├── index.js // Component logic and jsx
│ │ │ ├── index.test.js // Component tests
│ │ │ ├── index.css // Component styles
│ │ ├── MainTopic // MainTopic should be a component on its own because it's repeated. It's in an array.
│ │ │ ├── index.js // Component logic and jsx
│ │ │ ├── index.test.js // Component tests
│ │ │ ├── index.css // Component styles
│ │ ├── SubTopic // SubTopic should be a component on its own because it's repeated. It's in an array.
│ │ │ ├── index.js // Component logic and jsx
│ │ │ ├── index.test.js // Component tests
│ │ │ ├── index.css // Component styles
│ │ ├── Topic // Topic should be a component on its own because it's repeated. It's in an array.
│ │ │ ├── index.js // Component logic and jsx
│ │ │ ├── index.test.js // Component tests
│ │ │ ├── index.css // Component styles
│ ├── index.test.js // Tests for non-components files
│ ├── index.js
│ ├── routes.js // All routes should be registered here
这完全取决于应用程序的大小和您可能希望（现在）添加到您的应用程序或可能考虑在将来使用（添加）的附加技术（例如 Redux）。 React 对您如何将文件放入文件夹没有意见。
话虽如此，以下是您可能会考虑的一些示例：
按要素或/和路线分组
[ 将您的 CSS、JS 和其他文件放在按功能或路线分组的文件夹中。 ]
common/
Avatar.js
Avatar.css
APIUtils.js
APIUtils.test.js
feed/
index.js
Feed.js
Feed.css
FeedStory.js
FeedStory.test.js
FeedAPI.js
profile/
index.js
Profile.js
ProfileHeader.js
ProfileHeader.css
ProfileAPI.js
按文件类型分组
[将相似的文件分组在一起]
api/
APIUtils.js
APIUtils.test.js
ProfileAPI.js
UserAPI.js
components/
Avatar.js
Avatar.css
Feed.js
Feed.css
FeedStory.js
FeedStory.test.js
Profile.js
ProfileHeader.js
ProfileHeader.css
这些是简单应用程序的一些基本示例。但是，如果您的应用程序开始变大，您会考虑根据组件正在执行的任务将它们分成单独的文件夹，为您的组件制作 containers 并将它们放在一个单独的文件夹中。如果您使用 scss 抱怨者之类的东西，您可能会为样式创建一个单独的文件夹，并将已编译的 CSS 文件与 scss 文件分开。此外，如果您使用 Redux 之类的东西，您将拥有 actions 和 reducers 文件夹，并且可能有一个单独的 store 文件夹（您可以在其中配置 react-redux store ).该文件夹结构将如下所示：
/src
/components // where you put and divide all your components
/posts // folder containing all files relevant to your eg post feature
/likes // likewise, a folder containing all files relevant to your likes feature
/home
Header.js // some of your other files that are used everywhere
Footer.js
App.js // your main App.js file, if you decide to put it inside of your 'components' folder
...
/containers // where you would put your containers, get all the data and pass it down to components as props
/HomeContainer.js
/PostContainer.js
/LikesContainer.js
/actions // all of for your action creators and types
/reducers // all of for your reducers, including your root reducer
/utils // all your helper methods, eg for your auth flow
/styles // your css (or/ and scss) files
/assets // your logos, images, and other static files
...etc
index.js // Your main index.js file inside of the root 'src' folder
我还建议阅读此内容：Thinking in React。
它可能会给您关于如何使用 React.