react 监听组合键_投资组合中需要的5个React项目

react 监听组合键

You've put in the work and now you have a solid understanding of the React library.

您已经完成工作，现在对React库有了扎实的了解。

On top of that, you have a good grasp of JavaScript and are putting its most helpful features to use within your React code.

最重要的是，您对JavaScript有很好的了解，并在React代码中使用了其最有用的功能。

You've made a great deal of progress... but now what do you do?

您已经取得了很大的进步...但是现在您要做什么？

How do you bridge the gap between knowing the fundamentals of React and becoming a professional developer?

您如何弥合了解React基础知识和成为专业开发人员之间的鸿沟？

Many developers run into this problem when they reach this intermediate stage of learning React or any other JavaScript library. They know most of the library itself as well as the JavaScript to use it effectively, but they don't know the next step to take.

当许多开发人员到达学习React或任何其他JavaScript库的中间阶段时，就会遇到这个问题。 他们知道大多数库本身以及有效使用它JavaScript，但是他们不知道下一步该怎么做。

为什么要构建应用程序 (Why You Should Be Building Apps)

After you've learned the basics of React, you need to get comfortable building apps with the skills you've gained. This practice lies at the core of being an effective React developer—knowing how to build apps on your own and utilizing the right tools in the React ecosystem to do so.

在学习了React的基础知识之后，您需要使用已掌握的技能来轻松构建应用程序。 这种做法是成为有效的React开发人员的核心-知道如何自行构建应用程序，并利用React生态系统中的正确工具来做到这一点。

But what apps should you be building with React to level-up your ability as a developer?

但是，您应该使用React构建哪些应用程序以提升您作为开发人员的能力？

In this article, we'll go through 5 different types of apps that you should consider building after the basic todo app. The great benefit of building apps is that, once deployed, they can be linked to your portfolio as a powerful, immediate way of showing employers your expertise.

在本文中，我们将介绍5种不同类型的应用程序，您应该考虑在基本的todo应用程序之后构建它们。 构建应用程序的最大好处是，一旦部署它们，便可以将它们与您的投资组合链接起来，作为向雇主展示您的专业知识的强大而直接的方法。

For each type of app, I'll cover popular examples that you can use as inspiration, the tools I would recommend to build each feature, along with a short demo of such an app that I've personally made using React.

对于每种类型的应用程序，我都会介绍一些流行的示例，您可以将它们用作启发，为构建每种功能而推荐的工具，以及我使用React亲自制作的此类应用程序的简短演示。

如何使用React开始构建应用 (How to Start Building Apps With React)

Unlike learning React itself, where you can find dozens of articles to dive deeper into any related concept, the process of building an app is largely a self-directed activity without much guidance.

与学习React本身不同，在React中您可以找到数十篇文章来深入研究任何相关概念，而构建应用程序的过程很大程度上是一种自我指导的活动，没有太多指导。

If you're getting started building apps on your own, I would recommend searching for articles that teach you the basics of building an app and dive into the app source code that they provide. Even the process of reading code itself will make you a better developer.

如果您要开始自己构建应用程序，建议您搜索一些文章，这些文章可以教给您构建应用程序的基础知识，并深入研究它们提供的应用程序源代码。 甚至读取代码本身的过程也将使您成为更好的开发人员。

If these examples look too daunting to build yourself, remember what you know as a React developer—to break applications down into composable components. Every application must be built piece-by-piece, component-by-component. Focus on building out one feature at a time. With practice, you'll get a better sense of how what tools you'll need for each feature as well as the common patterns behind building apps in general.

如果这些示例看起来太艰巨，以至于无法构建自己，请记住您作为React开发人员所知—将应用程序分解为可组合的组件。 每个应用程序都必须逐个组件，逐个组件构建。 专注于一次构建一个功能。 通过练习，您将更好地了解每种功能所需的工具以及一般情况下构建应用程序的常见模式。

Note: One misconception that I had when starting to build real applications like these was that I had to build an entire backend / API with Node or Python to get the functionality I needed.

注意：在开始构建诸如此类的真实应用程序时，我有一个误解，就是我必须使用Node或Python构建整个后端/ API，才能获得所需的功能。

You don't need to do so. Look into powerful serverless technologies like Firebase, AWS Amplify, or Hasura that give you a complete backend out of the box without the need to create and deploy one yourself. Invest in tools that make you more productive and save time.

您不需要这样做。 研究功能强大的无服务器技术，例如Firebase，AWS Amplify或Hasura，它们为您提供了一个开箱即用的完整后端，而无需您自己创建和部署。 购买可提高生产率并节省时间的工具。

构建社交媒体应用 (Build a Social Media App)

If I had to recommend only one app for you to add to your portfolio, it would be a social media app. Twitter, Facebook, and Instagram are quite sophisticated, and include an ever-growing number of features to keep users engaged. On top of that, it's the kind of app you likely know best regarding how it should function.

如果我只推荐一个应用程序添加到您的投资组合中，那它将是一个社交媒体应用程序。 Twitter，Facebook和Instagram相当复杂，并包括数量不断增长的功能，以保持用户的参与度。 最重要的是，它是您可能最了解其应如何运行的应用程序。

There are a number of features common among almost all social media apps:

几乎所有社交媒体应用程序都有许多共同的功能：

• the ability for users to make posts with text and/or media files,
  用户发表带有文本和/或媒体文件的帖子的能力，
• a live feed of those posts,
  这些帖子的实时供稿，
• enabling other users to like and comment on posts,
  使其他用户能够喜欢和评论帖子，
• as well as user authentication.
  以及用户身份验证。

And once you've got that down, you can add profiles for each of your users, where they can personalize their account as well as manage the users they're following.

一旦掌握了这些信息，就可以为每个用户添加个人资料，他们可以在其中个性化自己的帐户以及管理他们关注的用户。

App examples: Instagram, Twitter, Snapchat, Reddit

应用示例： Instagram，Twitter，Snapchat，Reddit

Technologies to utilize:

利用的技术：

• Create React App or Next.js to make a dynamic UI of posts, likes, and messages
  创建React App或Next.js以创建帖子，喜欢和消息的动态UI
• Firebase, AWS Amplify, or Hasura (using GraphQL with subscriptions) for real-time data
  Firebase，AWS Amplify或Hasura(使用带有订阅的GraphQL)获取实时数据
• Serverless functions like AWS Lambda or Firebase Functions for notifications
  通知的AWS Lambda或Firebase Functions等无服务器功能
• Cloudinary or Firebase storage for uploading pictures or video
  Cloudinary或Firebase存储，用于上传图片或视频

构建一个电子商务应用程序 (Build an E-Commerce App)

Pick a few of your favorite sites and I guarantee at least one of them has an e-commerce app embedded in it, even if it's just a small storefront. E-commerce apps are ubiquitous, and I bet that you'll be called upon to build one at some point in your career as a developer.

选择一些您喜欢的网站，我保证至少有一个网站嵌入了一个电子商务应用程序，即使它只是一个很小的店面。 电子商务应用无处不在，我敢打赌，您将被要求在开发人员职业生涯的某个时候构建一个。

It is tempting to build an impressive, large-scale e-commerce platform like Amazon, but I would recommend working on something smaller and more focused.

建立一个令人印象深刻的大型电子商务平台(如Amazon)是很诱人的，但是我建议您开发一些更小，更专注的产品。

Instead of a marketplace that provides all things to all people, go with an industry that interests you. For example, if you like home goods, you might take a look at what Crate & Barrel or Williams-Sonoma have built for their sites.

与其为所有人提供万物的市场，不如让您感兴趣的行业。 例如，如果您喜欢家庭用品，则可以看看Crate＆Barrel或Williams-Sonoma为他们的站点建造了什么。

Aside from products, e-commerce apps may provide a service to consumers. If it is a service that is provided locally, an interactive map could be added to the app to provide for the service provider and customer to know each others' location. Food delivery applications such as UberEats and Doordash, which require the location of the person ordering the food, come to mind.

除产品外，电子商务应用程序还可以为消费者提供服务。 如果是在本地提供的服务，则可以将交互式地图添加到应用程序，以使服务提供商和客户知道彼此的位置。 想到了需要外卖点餐人员的位置的UberEats和Doordash等外卖应用程序。

Regardless of what's being sold, whether it's physical or virtual, every e-commerce app will consist of some storefront with the product or service details. If users can purchase multiple products at once, it should have a shopping cart where users can manage the products they want to buy.

无论出售什么产品，无论是物理的还是虚拟的，每个电子商务应用程序都将包含一些带有产品或服务详细信息的店面。 如果用户可以一次购买多个产品，则应该有一个购物车，用户可以在其中管理他们要购买的产品。

Finally, every e-commerce app needs a checkout process where users can either purchase their products anonymously or once they are authenticated.

最后，每个电子商务应用程序都需要一个结帐流程，用户可以匿名购买其产品或通过身份验证后购买产品。

Popular examples: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy

热门示例： Airbnb，Uber，UberEats，Doordash，Etsy，Udemy

Technologies to utilize:

利用的技术：

• Create React App or Gatsby for the storefront and displaying products
  为店面和展示产品创建React App或Gatsby
• Stripe with the package react-stripe-elements for handling payment processing
  带包装的条带react-stripe-elements用于处理付款处理
• Serverless function like Netlify / AWS Lambda to handle checkout process
  像Netlify / AWS Lambda这样的无服务器功能来处理结帐流程
• Algolia for lightning-fast product searching
  快如闪电的阿尔及利亚产品搜索
• Snipcart for easily creating a cart and managing cart products
  Snipcart可轻松创建购物车和管理购物车产品

制作娱乐应用 (Build an Entertainment App)

This is the broadest of all of the categories. What do I mean by entertainment? An app that is focused around a certain kind of media. This could be movies, podcasts, or music to name a few.

这是所有类别中最广泛的类别。 娱乐是什么意思？ 专注于某种媒体的应用。 可以是电影，播客或音乐等。

Some great examples of this, respectively, would be Netflix, Audible, and Soundcloud or Spotify. If you include art or design in this category, we could add sites like Behance or Dribbble to the list.

Netflix，Audible和Soundcloud或Spotify分别是一些很好的例子。 如果您在此类别中包括艺术品或设计，我们可以将Behance或Dribbble之类的网站添加到列表中。

What's interesting about this category is that many entertainment apps border on social media apps. For example, an app like Tiktok, which features short, imaginative videos, is driven by high user engagement. Another app like YouTube is centered upon user interactions through likes, comments, and subscriptions.

该类别的有趣之处在于，许多娱乐应用程序都与社交媒体应用程序接壤。 例如，像Tiktok这样的应用程序具有简短的，富有想象力的视频，是由较高的用户参与度驱动的。 YouTube之类的另一个应用程序则通过喜欢，评论和订阅来关注用户交互。

Think about what type of media or entertainment most interests you and see if you can build a simple platform around it, where users can login and save the content that they like. After that, look into adding social elements that make it possible to add comments, like, and share content with other users on the platform.

考虑一下您最感兴趣的媒体或娱乐类型，看看是否可以围绕它构建一个简单的平台，用户可以在其中登录并保存他们喜欢的内容。 之后，研究添加社交元素，以便可以添加评论，例如，并与平台上的其他用户共享内容。

Popular examples: YouTube, Netflix, Audible, Spotify, Tiktok

热门示例： YouTube，Netflix，Audible，Spotify，Tiktok

Technologies to utilize:

利用的技术：

• Create React App, Next.js, or Gatsby to create the app UI
  创建React App，Next.js或Gatsby以创建应用程序UI
• npm package react-player for playing media
  npm包react-player用于播放媒体
• Cloudinary or Firebase storage for media uploading
  Cloudinary或Firebase存储用于媒体上传
• Algolia for searching media by name (i.e. audio track, video, movie, etc.)
  通过名称搜索媒体(例如音轨，视频，电影等)的阿尔戈利亚

构建消息传递应用 (Build a Messaging App)

Messaging apps are huge. You likely have a free messaging service like WhatsApp or Viber on your phone, or one built into your social media platform like Facebook Messenger. Services like Intercom with instant messaging are also available as web apps so companies can provide immediate customer support to their users.

消息传递应用程序非常庞大。 您可能在手机上拥有免费的消息传递服务，如WhatsApp或Viber，或者在社交媒体平台中内置了诸如Facebook Messenger的服务。 具有即时消息传递功能的对讲机之类的服务也可以作为网络应用程序使用，因此公司可以为其用户提供即时客户支持。

Any messaging app is going to consist of a conversation with two or more people where messages are sent in real-time. Similar to the social media app, I would recommend a service such as Firebase or Hasura that transports data via WebSockets for messages to be displayed immediately in the conversation.

任何消息传递应用程序都将包含与两个或多个人的对话，并实时发送消息。 与社交媒体应用程序类似，我建议使用Firebase或Hasura等服务，该服务通过WebSockets传输数据，以便在对话中立即显示消息。

The majority of messaging apps are on mobile devices or tablets. If this isn't your first app clone, this is a great chance to move beyond the web and build a mobile app with React Native. Better yet, you could build a web and mobile messaging app simultaneously with a package like React Native Web.

大多数消息传递应用程序都在移动设备或平板电脑上。 如果这不是您的第一个应用程序克隆，那么这是一个绝佳的机会，可以超越Web并使用React Native构建移动应用程序。 更好的是，您可以与React Native Web这样的软件包同时构建Web和移动消息传递应用程序。

Popular examples: WhatsApp, Viber, Discord, Messenger, Slack

热门示例： WhatsApp，Viber，Discord，Messenger，Slack

Technologies to utilize:

利用的技术：

• React Native or React Native Web to build as a mobile app or hybrid app (web + mobile)
  React Native或React Native Web可以构建为移动应用程序或混合应用程序(Web +移动版)
• Firebase, AWS Amplify, or Hasura (using GraphQL subscriptions) to send messages in realtime
  Firebase，AWS Amplify或Hasura(使用GraphQL订阅)实时发送消息
• Cloudinary or Firebase storage for sending messages with image or video content
  Cloudinary或Firebase存储，用于发送包含图像或视频内容的消息
• npm package emoji-mart for a slick Slack-like emoji picker for users to include in their messages
  npm软件包emoji-mart，提供一个类似Slack的光滑表情符号选择器，供用户包含在其消息中

构建一个生产力应用程序 (Build a Productivity App)

This probably the easiest type of app with which to begin, considering there are so many tutorials of basic productivity apps out there. When I speak of productivity apps, I'm referring to note-taking apps, apps for managing teams, and task lists. Generally speaking, anything that helps you accomplish a certain task or be more productive.

考虑到那里有太多关于基本生产力应用程序的教程，这可能是最简单的应用程序类型。 当我提到生产力应用程序时，我指的是笔记记录应用程序，用于团队管理的应用程序和任务列表。 一般来说，任何可以帮助您完成特定任务或提高生产力的事物。

What's great about building a productivity app first is that it provides a good introduction to app building because of the relative simplicity of many of its features.

首先构建生产力应用程序的好处在于，由于其许多功能相对简单，因此它为应用程序构建提供了很好的介绍。

You can start with something simple, such as a text editor to write formatted text with markdown easily and then expand upon it. Then add the ability to save text as individual files on your computer. After that, a feature to export that markdown as HTML to write formatted emails.

您可以从简单的操作开始，例如使用文本编辑器轻松编写带有markdown的格式化文本，然后对其进行扩展。 然后添加将文本另存为计算机上文件的功能。 之后，一项功能可以将该标记导出为HTML以编写格式化的电子邮件。

To start building a productivity app, ask what features an app could have to make your daily schedule easier and go from there.

要开始构建生产力应用程序，请询问该应用程序可能具有哪些功能，以使您的日程安排变得更轻松，然后从那里开始。

Popular examples: Todoist, Notion, Things, etc.

热门示例： Todoist，概念，事物等。

Technologies to utilize:

利用的技术：

• Create React App for web or React Native for mobile
  为Web创建React App或为移动设备创建React Native
• npm package react-markdown to display markdown in your app UI
  npm包react-markdown在应用程序UI中显示markdown
• npm package react-codemirror2 for writing code in your notes
  npm包react-codemirror2用于在笔记中编写代码
• npm package react-draggable for re-ordering list content by clicking and dragging
  npm软件包react-draggable可通过单击和拖动来重新排序列表内容

Good luck with your app building journey and I'll see you in the next article.

祝您在应用构建过程中一切顺利，我们将在下一篇文章中与您见面。

想要成为JS大师吗？ 加入2020年JS训练营 (Want To Become a JS Master? Join the 2020 JS Bootcamp )

Follow + Say Hi! 👋 Twitter • codeartistry.io

关注+说声嗨！ 👋 Twitter的 • codeartistry.io

翻译自: https://www.freecodecamp.org/news/5-react-projects-you-need-in-your-portfolio/

react 监听组合键