Question

我正在学习如何使用React，并且正在阅读并浏览this book中的示例。

由于我是React的新手，所以我想确保遵循正确的约定。我已经阅读了本书中的示例以及Github中的随附文件。但是，就我应该如何设置文件结构而言，我感到很困惑。

对于每个练习，我都获取了示例文件，并分成了各个组件，并使用了Webpack。在此特定示例上，我不确定应如何设置文件结构。 index.js文件中的内容以及应该如何设置其他组件？

这是练习的example file。

我使用所有时间功能创建了一个lib.js文件。我创建了一个alarmclockdisplay.js组件来显示时间。我应该在index.js文件中放什么？我尝试添加更高阶的函数，但是在尝试使用webpack编译时出现错误。只需将startTicking中的lib.js函数放到上面就能使它正常工作，但这似乎与以前的练习不同。 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开发人员，但是我将在ReactDOM.render()中调用index.js作为默认行为来执行基本需求。在许多情况下不适当，例如使用某些导航器时。实际上，您实际上并不需要index.js文件。我的经验法则是ReactDOM.render()位于堆栈的顶部。

看看gitHub上的一些示例，您将看到许多不同的配置。 this tutorial is quite good 国防部已经要求我们停止在扩展对话中使用评论，所以我想这就是我的答案。

Redux的作者丹·阿布拉莫夫（Dan Abramov）的网站{@ {3}}有点老套。

react file structure

在您提出一个更具体的问题之前，进行一些尝试可能是个好主意。

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

1 个答案: