创建react应用程序

Discover Functional JavaScript was named one of the best new Functional Programming books by BookAuthority!

“发现功能JavaScript”被BookAuthority评为最佳新功能编程书籍之一 ！

Splitting a Single Page Application into layers has a set of advantages:

将单页应用程序拆分为多个层具有一系列优点：

• a better separation of concerns
  更好的关注点分离
• the layer implementation can be replaced
  层实现可以替换
• the UI layer can be hard to test. By moving the logic to other layers, it becomes easier to test.
  UI层可能很难测试。 通过将逻辑移到其他层，测试变得更加容易。

Below we can see the diagram of an application split in the three main layers:

在下面，我们可以看到将应用程序的图分为三个主要层：

• UI (aka Presentation, View)
  用户界面(又名演示文稿，视图)
• Domain (aka Business)
  域(又名业务)
• Data Access
  资料存取

展示柜 (The showcase)

I’ll take the case of an application managing a list of to-dos. The user is able to see and search for to-dos.

我将以一个应用程序管理待办事项列表为例。 用户能够查看和搜索待办事项。

检查git-hub的完整实现 。 (Check the full implementation on git-hub.)

UI层 (UI Layer)

The UI layer is responsible for displaying data on the page, and for handling user interactions. The UI Layer is made up of components.

UI层负责在页面上显示数据，并负责处理用户交互。 UI层由组件组成。

I split the page in the following components:

我将页面分为以下几个部分：

• TodoContainer manages the communication between TodoSearch, TodoList and other external objects

  TodoContainer管理TodoSearch ， TodoList与其他外部对象之间的通信

• TodoSearchForm is the form for searching to-dos

  TodoSearchForm是用于搜索待办事项的表单

• TodoList displays the list of to-dos

  TodoList显示待办事项列表

• TodoListItem: displays a single to-do in the list

  TodoListItem:在列表中显示一个待办事项

待办事项搜索 (TodoSearch)

The component uses the handleChange handler to read the input value on any change. TodoSearch exposes a new property: onSearch . It can be used by the parent component to handle the search click.

组件使用handleChange 处理程序以读取任何更改的输入值。 TodoSearch公开了一个新属性： onSearch 。 父组件可以使用它来处理搜索单击。

The component doesn't communicate with any other external objects, except its parent. TodoSearch is a presentation component.

该组件不与其父对象以外的任何其他外部对象进行通信。 TodoSearch是一个演示组件。

export default class TodoSearch extends React.Component { constructor(props){super(props);this.search = this.search.bind(this);this.handleChange = this.handleChange.bind(this);this.state = { text: "" };}search(){const query = Object.freeze({ text: this.state.text });if(this.props.onSearch)this.props.onSearch(query);}handleChange(event) {this.setState({text: event.target.value});}render() {return <form><input onChange={this.handleChange} value={this.state.text} /><button onClick={this.search} type="button">Search</button></form>;}
}

待办事项清单 (TodoList)

TodoList gets the list of todos to render using a property. It sends the todos, one by one, to the TodoListItem.

TodoList获取列表中todos使用属性来呈现。 它发送todos ，一个接一个，到TodoListItem 。

TodoList is a stateless functional component.

TodoList是无状态功能组件。

export default function TodoList(props) {function renderTodoItem(todo){return <TodoListItem todo={todo} key={todo.id}></TodoListItem>;}return <div className="todo-list"><ul>{ props.todos.map(renderTodoItem) }</ul></div>;
}

TodoListItem (TodoListItem)

TodoListItem displays the todo received as a parameter. It is implemented as a stateless functional component.

TodoListItem将接收到的todo显示为参数。 它被实现为无状态功能组件。

export default function TodoListItem(props){return       <li><div>{ props.todo.title}</div><div>{ props.todo.userName }</div></li>;
}

Read Functional Architecture with React and Redux and learn how to build apps in function style.

阅读具有React和Redux的功能架构，并学习如何以函数样式构建应用程序。

Discover Functional JavaScript was named one of the best new Functional Programming books by BookAuthority!

发现功能JavaScript被称为 BookAuthority最好的新功能编程书籍 ！

For more on applying functional programming techniques in React take a look at Functional React.

有关在React中应用函数式编程技术的更多信息，请查看 Functional React 。

You can find me on Medium and Twitter.

您可以在Medium和Twitter上找到我。

翻译自: https://www.freecodecamp.org/news/how-to-create-a-three-layer-application-with-react-8621741baca0/

创建react应用程序