React JS正确的文件/目录结构

Question

我正在学习如何使用React，我正在阅读并浏览这本书中的示例。

由于我是React的新手，我想确保我遵循正确的惯例。我已经浏览了这本书上的例子以及Github中附带的文件。然而，有一个练习让我很困惑，我想如何设置文件结构。

对于每一个练习，我都获取了示例文件，并将其分离为组件，然后使用Webpack。在这个特定的例子中，我不确定应该如何设置文件结构。index.js文件中包含了什么？其他组件应该如何设置？

这是练习的示例文件。

我创建了一个包含所有时间函数的lib.js文件。我创建了一个alarmclockdisplay.js组件来显示时间。我应该在index.js文件中放入什么？？我尝试添加更高阶的函数，但在尝试使用webpack编译时出错。我通过从lib.js中放入startTicking函数使其正确工作，但这似乎与前面的练习不同。index.js文件一直在JSX中包含render方法，所以我只想确保我做得正确。

这就是我让它工作的方式：

**index.js file**
import { startTicking } from './lib'

startTicking()

**lib.js file**
import React from 'react'
import ReactDOM from 'react-dom';
import AlarmClockDisplay from './alarmclockdisplay'

const oneSecond = () => 1000
const getCurrentTime = () => new Date()
const clear = () => console.clear()
const log = message => console.log(message)

const abstractClockTime = date =>
({
hours: date.getHours(),
minutes: date.getMinutes(),
seconds: date.getSeconds()
})
const civilianHours = clockTime =>
({
...clockTime,
hours: (clockTime.hours > 12) ? clockTime.hours - 12 : clockTime.hours
})
const appendAMPM = clockTime =>
({
...clockTime,
ampm: (clockTime.hours >= 12) ? "PM" : "AM"
})        
const display = target => time => target(time)        
const formatClock = format =>
time =>
format.replace("hh", time.hours)
.replace("mm", time.minutes)
.replace("ss", time.seconds)
.replace("tt", time.ampm)      
const compose = (...fns) =>
(arg) =>
fns.reduce(
(composed, f) => f(composed),
arg
)
const convertToCivilianTime = clockTime =>
compose(
appendAMPM,
civilianHours
)(clockTime)
const prependZero = key => clockTime =>
({
...clockTime,
[key]: (clockTime[key] < 10) ? "0" + clockTime[key] : clockTime[key]
})
const doubleDigits = civilianTime =>
compose(
prependZero("hours"),
prependZero("minutes")
)(civilianTime)

const render = Component => civilianTime =>
ReactDOM.render(
<Component {...civilianTime} />,
document.getElementById('react-container')
)        
export const startTicking = () =>
setInterval(
compose(
getCurrentTime,
abstractClockTime,
convertToCivilianTime,
doubleDigits,
render(AlarmClockDisplay)
),
oneSecond()
)     

**alarmclockdisplay.js file**
const AlarmClockDisplay = ({hours, minutes, seconds, ampm}) =>
<div className="clock">
<span>{hours}</span>
<span>:</span>
<span>{minutes}</span>
<span>:</span>
<span>{seconds}</span>
<span>{ampm}</span>
</div>
export default AlarmClockDisplay

Answer 1

有很多比我更有经验的React开发人员，但我将在index.js中调用ReactDOM.render()视为默认行为，以执行基本的必需操作。在许多情况下，这是不合适的，例如在使用某些导航器时。事实上，你并不真的需要一个index.js文件。根据我的经验，ReactDOM.render()位于堆栈的顶部。

看看gitHub上的一些例子，你会看到许多不同的配置。这个教程很好MOD已经要求我们停止在长时间的对话中使用评论，所以我想这是我的答案。

《Redux》的作者Dan Abramov有一个有点尖刻的网站，专门介绍react文件结构。

还可以看看官方的ReactDOM文档。

在你提出一个更具体的问题之前，进行一点实验可能是个好主意。