DZone>Web Dev Zone>了解React的第一步

了解React的第一步

刚开始用React编码？了解最重要的概念，开始利用React的最大潜力。

通过

恩里克-莫里纳利

-

1月16日，22日 - Web Dev Zone -教程

喜欢 (1)

评论

保存

鸣叫

161次浏览

加入DZone社区，获得完整的会员体验。

免费加入

在这篇文章中，我将给你--我认为的--开始主导React的最重要的概念。

多年来，我们看到后端编程语言不断发展。演变是为了适应新的功能和工具，使软件可维护。从类和对象这样的语法结构，到命名空间、包和模块。有了伟大的工具，比如那些帮助你管理依赖关系的工具（maven、gradle、composer、pip、gems等）和那些自动测试的工具。与此相呼应的是软件开发社区撰写的关于最佳实践、模式、重构技术的书籍和文章，以及关于如何架构你的应用程序的不同建议：分层、模块化、六边形（干净）、洋葱、模块化单体、SOA、事件驱动、微服务等等。

另一方面，在前端，我们尽了最大的努力。与帮助我们编写可维护软件有关的工具或书目几乎为零。我们大多数人不得不处理服务器端的模板引擎（PHP、JSP、JSF、freemarker等），混合HTML、CSS和jquery。在某些时候，JavaScript被认为是一种严肃的语言，这主要归功于GMail，它显示了一个（单页）Web应用程序可以是多么强大。 随着社区对更好的工具的呼声，Node.js提出了服务器端的JavaScript，并创建了一个管理依赖性的工具（npm）。此外，Javascript语言在ES6版本中发展了许多新功能，特别是增加了模块。

利用这些改进，React的发布将通过组装独立的组件来构建应用程序的想法融入到了前端。 听起来是不是没有什么新的东西被添加？你是对的，我们已经在那些关于软件工程的旧书中阅读了多年的 "自足组件 "银弹。然而，我相信React开发者已经做了很好的工作，提供了使之成为现实的工具。在React中，你通过组装组件来设计应用程序，这些组件是通过使用普通的 JavaScript函数构建的。

React的设计决策背后的人挑战了非常成熟的模式，比如MVC，在MVC中，你将显示逻辑和标记分离在不同的抽象中。在React中，你将显示逻辑（获取数据、事件处理等）和标记放在同一个抽象中：组件。每个组件代表了你的视图的一个功能片段。这就是React的伟大之处，也是我喜欢它的原因。

不谈细节（如果你想开始用React编码，你应该学习），通过使用一些伪React代码，让我向你解释如何通过组装组件来构建一个应用程序的想法。

假设我们希望我们的应用程序有一个相当简单的布局，有一个菜单头和一个包含任务列表的主体，如下图所示。

图1：任务列表示例应用程序

考虑到这一点，我们将制作两个组件。菜单和任务列表。菜单组件将负责建立带有 "任务列表 "标签的顶部标题。而TaskList组件将负责获取和显示任务列表。

在你的Rect应用入口点（通常是App.js组件），你可以写一些东西。

JSX

function App() {
 return (
  <div>
    <Menu />  
    <TaskList />
  </div>
 );
}

上面的函数代表名为App的主要组件。该函数组件返回的东西被称为JSX（JavaScript XML）。React提出了一个JavaScript扩展，用来绘制用户界面。我们对上面的App组件所做的是将Menu和TaskList组件实例化（使用一个从OOP中得知的术语）。换句话说，我们要求React将这些组件按照这个顺序（先是Menu，然后是TaskList）渲染成

function Menu() {
 let title = “Task List”;
 return (
   <header>
     <span>{title}</span>
   </header>
 );
}

function TaskList() {	
  let tasks = initializeState([ ]);          

  function afterFirstRender() {
     fetch(“https://my.endpoint.com/tasks”)
       .then((response) => response.json())
       .then((json) => setState(json));
  }

  return (
   <section>
    <p>Tasks List</p>
    <table>
     <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Expiration Date</th>
     </tr>
     {tasks.map((aTask) => (
     <tr>
      <td>{aTask.id}</td> 			
      <td>{aTask.name}</td>
      <td>{aTask.expirationDate}</td> 
     </tr>		
    ))}
   </table>
  </section>
 );
}