React Tutorial:构建一个 Yelp 克隆
tl;dr —— 这是我们博客文章的代码,它将指导您构建一个完整的 React 应用程序,即使您在框架中几乎没有经验。我们要在React中创建一个 Yelp 克隆。
让我们使用 React 构建一个 Yelp 的轻量级克隆。
在本教程中,我们将讨论:
- 如何从头开始设置新的 React 项目
- 如何创建一个基本的 React 组件
- 如何使用 postcss 编写模块化 CSS
- 如何设置测试
- 如何使用 react-router 路由到不同的页面
- 如何与 Google 地图集成
- 如何编写 Google Maps React 组件
- 如何写一个五星评级组件
我们将把 React 的很多不同的部分捆绑在一起,以构建一个完整大小的 React 应用程序。 这篇文章将指导您构建一个完整的 React 应用程序,即使你在框架中几乎没有经验。
快速开始
首先,克隆存储库
git clone https://github.com/fullstackreact/react-yelp-clone.git react-yelp-clone cd react-yelp-clone # install the dependencies npm install # copy configuration (see below) cp .env.example .env # start the server npm start
配置应用程序
此应用程序使用 dotenv 进行配置。 要为您自己的 api 访问配置应用程序,请在此处从 Google 获取 api 令牌,并将其设置在根目录下名为 .env 的文件中,以获取名为 __GAPI_KEY__ 的密钥。 例如,假设您的 gapi 键是:abc123。 您的.env文件应如下所示:
GAPI_KEY=abc123
您还可以通过复制根目录下的 .env.example 文件来创建此文件:
cp .env.example .env
启动应用程序
npm install npm start
我们将使用的库
此应用程序使用以下技术:
- webpack
- postcss
- hjs-webpack
- react.js
- react-router
- Google Maps API
- google-maps-react npm
- enzyme
- chai
- 还有好多好多
运行测试
该应用程序使用测试构建,包括奇妙的 enzyme 和 chai 库。 要运行测试,请使用npm测试脚本:
npm run test
查看博客文章,了解有关如何构建此应用程序的更多信息,以及使用 React 构建自己的应用程序的完整教程。
贡献
git clone https://github.com/fullstackio/yelp-clone.git yelp cd yelp npm install npm start
Fullstack React Book
这个应用程序是与博客文章 React Tutorial: Cloning Yelp 一起构建的。
这个仓库是由 Fullstack React 团队编写并维护的。 在本书中,我们涵盖了更多这样的项目。 我们遍历每行代码,解释它为什么存在以及它是如何工作的。
这个应用程序只是我们书中的几个应用程序之一。 如果您正在学习 React,那么没有比使用 Fullstack React 书花几个小时更快的方法了。