React应用的开端……

最近几天,我开始学习React JS。 在巨大的Angular框架中度过了几个月之后,进入较小的React世界变得令人耳目一新。 最简单的说,React用组件构建网站,这些组件是生成html的javascript函数。 当然,要复杂得多。 虽然不是强制性的,但要正确使用React,您确实需要使用ES6和JSX,并且每个都有自己的学习曲线。 不过还算不错。 在接下来的几篇文章中,我将概述如何构建一个简单的单页应用程序,该应用程序仅使用几个组件即可访问杂货店的购买历史api。 目的是显示购物篮的索引(每个购物篮代表一次购物旅行),并允许用户单击购物篮,并在同一视图中呈现在该旅行中购买的商品的列表。

由于我是React的初学者,因此我使用了已经设置好的入门应用程序,其中包含babel和webpak的所有必需依赖项,因此我可以使用JSX和ES6深入了解它。 处理完之后,我的第一项工作是将一个类名称分配给html主体中我希望我的React应用程序驻留的位置。 在我的index.html文件中,给

"container"

   
  

index.js文件的底部,我选择了要在其中呈现的特定div,供我的应用程序使用。 这是整个index.js文件。

  // index.js 
 从'react'导入React,{组件}; 
从'react-dom'导入ReactDOM;
  App类扩展了React.Component { 
  render(){ 
返回(


购买历史追踪器




};
}
  ReactDOM.render(,document.querySelector('。container')); 

在顶部,我导入我的React和ReactDOM库,这些库将在创建组件并将其呈现到DOM中时调用。

然后创建我的第一个组件App 。 我可以通过将其编写为功能组件来使其更简单,但由于将很快对其进行状态管理,因此使其成为类组件。 该组件内部是一些看起来很像html的代码,但实际上是JSX。 该代码被转换为javascript,而javascript又会根据JSX的外观生成您期望它的html。

然后,我将该类的实例渲染到我们的DOM中。 这样,我们就拥有了世界上最基础的react应用程序。 很无聊。

让我们为应用程序增加一些复杂性。 我将从添加一个额外的组件Baskets 。 最终,该组件将保存我过去的购物行程列表。

  // baskets.js 
 从'react'导入React; 
  const Baskets =()=> { 
 返回( 

购物旅行指数



);
  }; 
 导出默认购物篮 

需要注意的几件事。 我的App组件是类组件,而我的baskets组件是使用ES6变量const的更简单的功能组件。 它需要做的只是呈现一个篮子列表,因此可以将其作为无状态功能组件。 在文件的底部,我告诉它导出内部定义的Baskets组件。 让我们对第二个组件BasketDetail进行相同的操作,该组件将保存一次购物行程中的物品清单:

  // basket_detail.js 
 从'react'导入React; 
  const BasketDetail =()=> { 
 返回( 

选定的购物行程



);
};
 导出默认的购物篮详细信息 

另外,我将baskets.jsbasket_detail.js文件放入index.js文件旁边的components文件夹中。 这是我更新的index.js文件,其中包含导入语句,两个新组件的渲染以及一些新样式:

  // index.js 
 从'react'导入React,{组件}; 
从'react-dom'导入ReactDOM;
从“ ./components/baskets”导入购物篮;
从'./components/basket_detail'导入BasketDetail;
  App类扩展了React.Component { 
  render(){ 
返回(


购买历史追踪器











);
};
};
  ReactDOM.render(,document.querySelector('。container')); 

请注意,在这里我插入了导入BasketsBasketDetail组件的行,并引用了它们文件的相对路径。 react中的组件都是彼此孤立的,因此我们需要在组件内部编写这些import和export语句。 index.js的另一个更改是在我们的渲染函数中添加了 ,这只是JSX来将这些组件渲染到我们的Index组件中。 如此一来,我们的应用仍然很无聊(更不用说难看了),但是现在我们呈现了三个组件。

在我的下一个条目中,我将把state合并到index组件中,将props合并到BasketsBasketDetail组件中,以便在一列中呈现购物行程链接的列表,用户可以单击以显示另一列的详细信息。