創建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應用程序