小程序遵循的语法

by Daniel Deutsch

由Daniel Deutsch

我如何构建一个遵循股市针对freeCodeCamp挑战的应用程序。 (How I built an app that follows the Stock Market for a freeCodeCamp challenge.)

I was working on an app from the FreeCodeCamp curriculum, and thought others might find it interesting. In this article, you can read the full documentation for the building process. Enjoy!

我当时正在开发FreeCodeCamp课程中的一个应用程序，并认为其他人可能会觉得它很有趣。在本文中，您可以阅读有关构建过程的完整文档。请享用！

“Failure isn’t a necessary evil. In fact, it isn’t evil at all. It is a necessary consequence of doing something new.”

“失败不是必然的罪恶。 实际上，这根本不是邪恶的。 这是做新事情的必然结果。”

― Ed Catmull

―埃德·卡特穆尔

挑战 (The challenge)

For this particular challenge, I had to build an app that would allow monitoring of various stocks. You can read more about the full challenge here. Now let’s get started.

对于这个特殊的挑战，我必须构建一个可以监视各种股票的应用程序。您可以在此处阅读有关完整挑战的更多信息。现在开始吧。

The user stories are pretty simple:

用户故事非常简单：

I can view a graph displaying the recent trend lines for each added stock.我可以查看显示每个添加的股票的近期趋势线的图形。
I can add new stocks by their symbol name.我可以通过符号名称添加新股票。
I can remove stocks.我可以清除库存。
I can see changes in real-time when any other user adds or removes a stock. For this you will need to use WebSockets.当任何其他用户添加或删除库存时，我可以实时查看更改。为此，您将需要使用WebSockets。

It looks like this:

看起来像这样：

路线图 (Roadmap)

When I made my last full-stack app, I learned that starting with the back end can cause some issues when you are working on the front end later on. So this time, I decided to start with the front end and finish with the back end.

当我制作了最后一个全栈应用程序时，我了解到从后端开始可能会在以后使用前端时引起一些问题。所以这次，我决定从前端开始，从后端开始。

Here’s the roadmap I used:

这是我使用的路线图：

Setup the environment with create-react-app使用create-react-app设置环境
Lay out the basic React component structure布局基本的React组件结构
Set up the Redux eco system设置Redux生态系统
Work over all components, divide them into container components, and wire everything up with the Redux store处理所有组件，将它们分为容器组件，然后将所有内容与Redux商店连接
Build the Chart component with React-Vis使用React-Vis构建Chart组件
Build the backend using socket.io使用socket.io构建后端
Adapt the frontend to WebSockets使前端适应WebSockets
Deploy to Heroku部署到Heroku

前端 (Front end)

I going to highlight the key cornerstones — this isn’t a step-by-step tutorial.

我将重点介绍关键的基石-这不是一个循序渐进的教程。

使用create-react-app软件包进行设置 (Setup with the create-react-app package)

For this project, I wanted to use this boilerplate because I have used it many times before but never on a full-stack project. Although it has some limitations with the pre-configured structure, the benefits outweigh the problems by a mile.

对于该项目，我想使用此样板，因为我之前已经使用过很多次，但从未在全栈项目中使用过。尽管它在预先配置的结构上有一些局限性，但好处远远超过了问题。

Basically it provides an environment that:

基本上，它提供了一种环境：

React, JSX, ES6, and Flow syntax support.React，JSX，ES6和Flow语法支持。
Provides language extras beyond ES6 like the object spread operator.提供ES6以外的其他语言，例如对象传播运算符。
Has a dev server that looks for common errors.有一个寻找常见错误的开发服务器。
Imports CSS and image files directly from JavaScript.直接从JavaScript导入CSS和图像文件。
Has autoprefixed CSS, so you don’t need -webkit or other prefixes.具有自动前缀CSS，因此您不需要-webkit或其他前缀。
Has a build script to bundle JS, CSS, and images for production, with sourcemaps.拥有一个构建脚本，用于将JS，CSS和图像与源地图捆绑在一起以进行生产。
Gives you an offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.满足您所有渐进式Web App标准的脱机优先服务工作者和Web应用程序清单。

Pretty early on, I had to eject the configuration ( = opening the environment configuration for changes) to modify the WebPack config.

在很早的时候，我不得不退出配置(=打开环境配置以进行更改)来修改WebPack配置。

The problem was that I wanted to add jQuery for Materializecss — and there were always issues.

问题是我想为Materializecss添加jQuery —总是有问题。

Here are some solutions:

以下是一些解决方案：

Import jquery in ES6: here.

在ES6中导入jquery：此处。
Provide jquery plugin in WebPack config: here.

在WebPack配置中提供jquery插件：在此处。

React，Redux，React-vis (React, Redux, React-vis)

This time, I wanted to use react-vis for visualizing the chart. It is a visualization library based on D3 and developed by Uber. To summarize and quote their docs:

这次，我想使用react-vis可视化图表。它是一个基于D3的可视化库，由Uber开发。总结并引用他们的文档：

A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.

React组件的集合，以渲染常见的数据可视化图表，例如折线/面积/条形图，热图，散点图，轮廓图，饼图和甜甜圈图，朝阳图，雷达图，平行坐标和树形图。

Some notable features:

一些值得注意的功能：

Simplicity. react-vis doesn’t require any deep knowledge of data visualization libraries before you start building your first visualizations.

简单性 。在开始构建第一个可视化文件之前，react-vis不需要任何数据可视化文件库的深入知识。
Flexibility. react-vis provides a set of basic building blocks for different charts. For instance, it has separate X and Y axis components. This provides a high level of control of chart layout for applications that need it.

灵活性强 。 react-vis为不同图表提供了一组基本构建块。例如，它具有独立的X和Y轴分量。这为需要它的应用程序提供了对图表布局的高度控制。
Ease of use. The library provides a set of defaults which can be overridden by the custom user’s settings.

易于使用 。该库提供了一组默认值，可被自定义用户的设置覆盖。
Integration with React. react-vis supports the React’s lifecycle and doesn’t create unnecessary nodes.

与React集成 。 react-vis支持React的生命周期，并且不会创建不必要的节点。

Some practical issues I came across and solved were:

我遇到并解决的一些实际问题是：

Make react-vis chart responsive, like this

像这样使react-vis图表响应
To use gradients in react-vis properly, make sure you include them in the Plot and adapt the reference points. Check this out.

要在react-vis中正确使用渐变，请确保将其包括在“绘图”中并调整参考点。检查这个出来。
Use LineSeries instead of LineMarkSeries for better performance (check out this same link)

使用LineSeries而不是LineMarkSeries获得更好的性能(请查看此链接 )

At this point the app was already pretty nice. Now I had to check the last User Story, which displays real-life changes using a “web socket” back end.

至此，该应用程序已经相当不错了。现在，我必须检查最后一个用户故事，该故事使用“ Web套接字”后端显示实际更改。

后端 (Back end)

For the data, I used the open API from Quandl.

对于数据，我使用了Quandl的开放API。

Server: index.js:

服务器：index.js：

设置数据库(由mLab托管的MongoDB) (Setting up the database (MongoDB hosted with mLab))

Simply set up the mLab account and create a collection for the new app. Make a mongoose model to simplify interactions with the database, such as this one:

只需设置mLab帐户并为新应用创建一个集合。创建一个猫鼬模型来简化与数据库的交互，例如：

const mongoose = require('mongoose');

var Schema = mongoose.Schema;

var stockSchema = new Schema({  stockName: String});

module.exports = mongoose.model('stockModel', stockSchema);

Then connect the express server to the mLab.

然后将快递服务器连接到mLab。

To solve the warning about the deprecated mongoose open connection, use openURI.

要解决有关不推荐使用的猫鼬打开连接的警告，请使用openURI。

For more, see here.

有关更多信息，请参见此处。

路线 (Routes)

Set up a route so that, on default, the production build index.html is consumed. Set up another route to check the database for its content and return it in the response.

设置一条路由，以便在默认情况下使用生产版本index.html。设置另一条路由来检查数据库的内容并在响应中返回它。

添加Websocket (Adding Websocket)

Use the Socket docs to set up listeners to:

使用Socket文档将侦听器设置为：

Display the connection显示连接
Display a disconnection显示断开连接
Save data to the database将数据保存到数据库
Remove data from the database从数据库中删除数据

Make sure to integrate the listener function with the mongoose model to harness the power of MongoDB.

确保将监听器功能与mongoose模型集成在一起，以利用MongoDB的功能。

On a side note — because I spent literally one week on this issue:

附带说明一下-因为我在这个问题上实际上花了一个星期：

Use socket.BROADCAST.emit to send the message to ALL sockets!

使用socket.BROADCAST.emit将消息发送到所有套接字！

See more here.

在这里查看更多。

使前端适应WebSocket (Adapt the front end to the WebSocket)

The “problem” you have to overcome here is to render the components accordingly to the emitted actions of the socket.

您必须在此处克服的“问题”是根据插座发出的动作渲染组件。

For these configurations, it’s key to handle the problem in the component itself and in the ducks (Redux files).

对于这些配置，解决组件本身和鸭子(Redux文件)中问题的关键。

I solved it by wiring up the container component with a socket.io client and listening for changes. I did this with the componentDidMount lifecycle. Every time a message is emitted by the socket, the component consults the database by dispatching actions to the Redux files.

我通过使用socket.io客户端连接容器组件并侦听更改来解决它。我是通过componentDidMount生命周期完成的。套接字每次发出消息时，组件都会通过将操作分派到Redux文件来查询数据库。

In the Redux files, I fetched the data from the database and compared it with the current store of the application. Depending on this comparison, the app fetches all data again from the Quandl service. This way, every new socket client can check for themselves and always has the most up-to-date data.

在Redux文件中，我从数据库中获取了数据，并将其与应用程序的当前存储进行了比较。根据此比较，该应用程序再次从Quandl服务获取所有数据。这样，每个新的套接字客户端都可以进行自我检查，并始终拥有最新的数据。

Please note: I am not sure if this is best practice for a Redux/react application, since I handle much logic in the async action. Feel free to point out mistakes or misunderstood concepts! :)

请注意：我不确定这是否是Redux / react应用程序的最佳实践，因为我在异步操作中处理了很多逻辑。随时指出错误或误解的概念！ :)

ducks / stocks.js中的异步操作(摘要)： (Async actions in ducks/stocks.js (snippet):)

// Async actions with thunkexport function checkDB(stocks) {  return dispatch =>      axios           .get('/api/stocks')           .then(res => {              if (stocks.length === 0) {                   res.data.map(elem => {                      dispatch(fetchStock(elem.stockName));                   });             } else if (res.data.length < stocks.length) {                    dispatch(removeStock(stocks.length - 1));               } else {                    let diff = [];                 res.data.map((item, i) => {                     if (i < stocks.length) {                         if (res.data[i].stockName !== stocks[i].dataset.dataset_code) {                               diff.push({                                 stockName: item.stockName                               });                         }                       } else if (i === stocks.length) {                            diff.push({                             stockName: item.stockName                           });                     } else {                            diff = [];                     }                   });

diff.map(elem => {                       dispatch(fetchStock(elem.stockName));                   });                 diff = [];                 // console.log(res);                }           })          .catch(err => {             console.warn(err);          });}

export function fetchStock(stockCode) { return dispatch =>      axios           .get(               `https://www.quandl.com/api/v3/datasets/WIKI/${stockCode}.json?api_key=${process                  .env.REACT_APP_QUANDL_KEY}`            )           .then(res => {              dispatch(addStock(res.data));               // console.log(res.data);           })          .catch(err => {             console.error(err);             toastr['warning'](' ', 'Stock Code cannot be found!');            });}

export function newStock(stockCode, socket) {   socket.emit('update', stockCode); return dispatch =>      axios           .get(               `https://www.quandl.com/api/v3/datasets/WIKI/${stockCode}.json?api_key=${process                  .env.REACT_APP_QUANDL_KEY}`            )           .then(res => {              dispatch(addStock(res.data));               // console.log(res.data);           })          .then(socket.emit('addStock', stockCode))         .catch(err => {             console.error(err);             toastr['warning'](' ', 'Stock Code cannot be found!');            });}

export function deleteStock(ind, stockCode) {   const socket = socketIOClient('https://createdd-stockmarketchart.herokuapp.com/');   socket.emit('removeStock', stockCode);    return dispatch => {        dispatch(removeStock(ind));     console.log(`Deleted ${stockCode}`);  };}

可折叠容器— CollapsibleCon.js (Collapsible Container — CollapsibleCon.js)

部署到Heroku (Deploy to Heroku)

For the deployment to Heroku it’s important:

对于部署到Heroku，重要的是：

to use the create-react-app buildpack when using the webpack server使用webpack服务器时使用create-react-app buildpack
to use the nodeJs buildpack when using your own websocket with your express server在快速服务器上使用自己的websocket时使用nodeJs buildpack
to set environment variables设置环境变量

查看结果 (See the result)

See the live app here.

在此处查看实时应用。
See open source code here.

请参阅此处的开源代码。
See 5min timelapse here.

在这里看到5分钟间隔。
See 1hour relaxing coding session here.

请在此处查看1小时轻松编码课程。

Thanks for reading my article! If you enjoyed it, please give me some claps so more people see it. And feel free to leave any feedback.

感谢您阅读我的文章！如果您喜欢它，请给我一些鼓掌，以便更多的人看到它。并随时留下任何反馈。

翻译自: https://www.freecodecamp.org/news/chart-the-stock-market-with-react-redux-react-vis-and-socket-io-18caf312693c/