react.js项目配置_8个React.js项目创意可帮助您边做边学-CSDN博客

react.js项目配置

One of the best ways to learn is by doing. But often developers struggle with the big question "what should I build?"

最好的学习方法之一就是做事。但是开发人员经常会遇到一个大问题：“我应该建造什么？”

Here are 8 project ideas, complete with project briefs and layout ideas, to get you started learning by doing.

这里有8个项目构想，并附有项目简介和布局构想，以帮助您从中学到东西。

This is a preview of the free ebook 50 Projects for React & the Static Web. You can find the full 50 project ideas including these 8 at 50reactprojects.com.

这是免费的电子书50 React和Static Web项目的预览。 您可以在50reactprojects.com找到完整的50个项目构想，包括这8个构想。

地图统计信息中心 (Map Statistics Dashboard)

Category: Business & Real-World

分类：商业与现实世界

Create a map dashboard that shows statistics and geographic information about COVID-19.

创建一个地图仪表板，以显示有关COVID-19的统计信息和地理信息。

简要 (Brief)

Dealing with a global pandemic means that viruses like the Coronavirus impact the world differently based on geographic location.

应对全球大流行意味着像冠状病毒这样的病毒根据地理位置对世界的影响不同。

Having a map with a breakdown of each country’s statistics is a useful way of being able to determine things like which countries have been impacted the most.

绘制每个国家的统计数据图是一种有用的方法，它可以确定哪些国家受到的影响最大。

1级 (Level 1)

The easiest way to see statistics country to country is to have a map that you can browse with each country’s statistics available next to that country.Create a mapping app that uses the disease.sh Coronavirus API to add markers to the map for each country along with the number of COVID-19 cases.

要查看国家/地区的统计信息最简单的方法是拥有一张地图，您可以浏览该国家/地区旁边的每个国家/地区的统计信息。创建一个使用disease.sh冠状病毒API的地图绘制应用程序，为每个国家/地区的地图添加标记以及COVID-19案件的数量。

2级 (Level 2)

While having the statistics for each country is helpful, it might be useful to be able to compare those statistics to the number of cases in the entire world.Add a statistics dashboard that shows the number of COVID-19 cases around the world as well as any other useful statistics from the API.

虽然拥有每个国家/地区的统计信息会有所帮助，但是将这些统计信息与整个世界的病例数进行比较可能会有所帮助。添加一个统计信息显示板，其中显示了全球COVID-19病例的数量以及API中的其他有用统计信息。

3级 (Level 3)

Getting current statistics is a good way to understand the current state of the world, but how does that compare historically?Use the historical data API to show graphs on the dashboard that provide context to the growth and spread of the virus.

获取最新的统计数据是了解当前世界状况的一种好方法，但是如何与历史进行比较？使用历史数据API在仪表板上显示图表，为病毒的生长和传播提供背景信息。

去做 (To Do)

Create a new map app
创建一个新的地图应用
Fetch API countries data
获取API国家/地区数据
Add markers to map
在地图上添加标记
Add statistics to markers
向标记添加统计信息
Fetch API global data
获取API全局数据
Create a stats dashboard
创建统计信息中心
Add global stats
添加全局统计
Fetch API historical data
提取API历史数据
Add graphs to map
将图形添加到地图

布局理念
(Layout Idea)

乐器 (Musical Instrument)

Category: Fun & Interesting

类别：有趣

Create an interactive piano that you can use to play music with your keyboard.

创建可用于通过键盘演奏音乐的交互式钢琴。

简要 (Brief)

Not everyone has the luxury of owning a musical instrument, but maybe those people have a laptop, phone, or tablet. Having a piano is a powerful way to let people play music even if they didn’t have the opportunity before.

并非每个人都拥有乐器的奢侈，但也许这些人拥有笔记本电脑，电话或平板电脑。拥有钢琴是让人们弹奏音乐的有力方法，即使他们以前没有机会。

1级 (Level 1)

Using the browser and web audio APIs, we can create sounds that, when put together, can actually sound like music.Create a set of buttons that play notes of a scale when clicked.

使用浏览器和Web音频API，我们可以创建声音，将它们放在一起时实际上听起来像是音乐。创建一组按钮，单击这些按钮可以播放音阶音符。

2级 (Level 2)

While not everyone’s played an instrument before, the concept and interface of an instrument like a piano is generally more intuitive than a bunch of buttons.Create a piano layout using buttons that work by either clicking the button or using the physical keyboard.

虽然以前并不是每个人都弹奏乐器，但像钢琴之类的乐器的概念和界面通常比一堆按钮更直观。使用可以通过单击该按钮或使用物理键盘的按钮来创建钢琴布局。

3级 (Level 3)

We might have limited space in the browser, but there’s a wide range of notes, scales, and sounds an electric keyboard might be able to make with some added effects.Create effect toggles that change the sound of the notes when toggled on.

我们的浏览器空间可能有限，但是音符，音阶和声音种类繁多，电键盘可能可以通过添加一些附加效果来制作声音。创建效果切换可以在打开音符时改变音符的声音。

去做 (To Do)

Create buttons
创建按钮
Play sound when clicked
单击时播放声音
Arrange notes in a scale
缩放音符
Create piano layout
创建钢琴布局
Set keyboard events
设置键盘事件
Create effects layout
创建效果布局
Toggle audio effects
切换音效

工具箱 (Toolbox)

React HotKeys (github.com)
React HotKeys(github.com)

讲解 (Tutorials)

Building a Piano with React Hooks (dev.to)
用React Hooks构建钢琴 (dev.to)
How to Build a Piano Keyboard Using Vanilla JavaScript (freecodecamp.org)
如何使用Vanilla JavaScript构建钢琴键盘 (freecodecamp.org)
Building a piano with tone.js! (dev.to)
用tone.js制作钢琴！ (dev.to)
How I Made a Piano in only 1kb of JavaScript (frankforce.com)
如何仅用1kbJavaScript制作钢琴 (frankforce.com)

灵感 (Inspiration)

React Guitar (react-guitar.com)
React吉他 (react-guitar.com)

布局理念 (Layout Idea)

博客 (Blog)

Category: Personal & Portfolio

类别：个人和投资组合

Create a blog that you can use to share your career experiences and projects.

创建一个博客，可以用来分享您的职业经历和项目。

简要 (Brief)

With any career, having a blog to share your experiences is a good way let people know what you’re working on and help others learn from your experiences.

在任何职业中，拥有一个博客来分享您的经验是一种很好的方式，可以使人们知道您在做什么，并帮助他人从您的经验中学习。

It’s also a way to reinforce what you’ve learned so you can reference it in the future.

这也是巩固您所学内容的一种方式，以便您将来可以参考。

1级 (Level 1)

To be able to share your experiences, you need a website structure that will allow you to create new content and manage existing content.

为了能够分享您的经验，您需要一个网站结构，使您可以创建新内容并管理现有内容。

One way to do this is by creating markdown files that your website sources to create new pages and display the posts.Create a blog using markdown files as the content source.

实现此目的的一种方法是创建网站提供的markdown文件以创建新页面并显示帖子。使用markdown文件作为内容源创建博客。

2级 (Level 2)

Having your content in markdown files is a good way to manage static content, but you might not want to have to edit code every time you write or edit a post.Integrate a content management system that allows you to add new content or edit existing with a nice user interface.

将内容放在markdown文件中是管理静态内容的一种好方法，但是您可能不想每次写或编辑帖子时都必须编辑代码。集成了一个内容管理系统，该系统允许您添加新内容或编辑现有内容。一个不错的用户界面。

3级 (Level 3)

If you’re sharing code on your blog, HTML natively supports the code and pre tags that help you format code in a readable way. But that doesn’t include syntax highlighting that helps improve readability.Integrate a syntax highlighter that makes code blocks more readable.

如果您要在博客上共享代码，则HTML本身支持代码和pre标签，可帮助您以可读的方式设置代码格式。但这不包括有助于提高可读性的语法高亮显示，而是集成了使代码块更具可读性的语法高亮显示。

去做 (To Do)

Create a blog
建立网志
Add first static content
添加第一个静态内容
Source static content
源静态内容
Integrate CMS
整合CMS
Add code to content
向内容添加代码
Add syntax highlighting
添加语法突出显示

工具箱 (Toolbox)

Netlify CMS (netlifycms.org)
Netlify CMS (netlifycms.org)
Prism.js (prismjs.com)
Prism.js (prismjs.com)

讲解 (Tutorials)

Making a Gatsby Blog with Netlify CMS (gatsbyjs.org)
使用Netlify CMS制作Gatsby博客 (gatsbyjs.org)
How to Build Your Coding Blog From Scratch Using Gatsby and MDX (freecodecamp.org)
如何使用Gatsby和MDX从零开始构建您的编码博客 (freecodecamp.org)

灵感 (Inspiration)

Gatsby Netlify CMS Starter (gatsby-netlify-cms.netlify.app)
Gatsby Netlify CMS入门程序 (gatsby-netlify-cms.netlify.app)

布局理念 (Layout Idea)

笔记本 (Notebook)

Category: Productivity

类别：生产力

Create a notebook app to add, manage, and organize a group of notes.

创建一个笔记本应用程序以添加，管理和整理一组笔记。

简要 (Brief)

Taking notes is a great way to make sure we keep track of our thoughts or remember the important takeaways from a meeting. Being able to easily manage them and organize them is important for finding them later!

做笔记是确保我们保持想法或记住会议重要内容的好方法。能够轻松管理和组织它们对于以后找到它们很重要！

1级 (Level 1)

The first requirement of a notebook is being able to take notes. This can be pretty simple to start, where really you need some sort of input that collects what you write and stores it somewhere for later.Create a form to add new notes and view them in a list.

笔记本电脑的首要要求是能够做笔记。开始可能非常简单，实际上您需要某种输入来收集您编写的内容并将其存储在以后的地方。创建一个表单以添加新的笔记并在列表中查看它们。

2级 (Level 2)

In order to find your notes later, you want some way of organizing those notes and a way to look them up. That includes adding categories or a tagging system as well as a UI to make searches from.Add the ability to tag or categorize notes and an input to search through them.

为了以后能找到您的笔记，您需要某种方式来组织这些笔记以及查找它们的方法。其中包括添加类别或标记系统以及用于进行搜索的UI，还可以对注释进行标记或分类以及通过它们进行搜索的输入。

3级 (Level 3)

Whether we realize it or not, we can find connections between our thoughts and more importantly our notes, where we can take advantage of that network of thoughts for our notebook.Add Roam Research-inpsired linking of notes to create a network of thoughts.

不管我们是否意识到，我们都可以在思想与更重要的笔记之间找到联系，在这里我们可以利用笔记本的思想网络。添加Roam Research提供的笔记链接以创建思想网络。

去做 (To Do)

Create a form
建立表格
Store new notes
储存新笔记
List notes
列出笔记
Add tags or categories
添加标签或类别
Add note search
添加便笺搜索
Add note network
添加笔记网络

工具箱 (Toolbox)

Gatsby Brain Theme (github.com)
盖茨比大脑主题 (github.com)
Fuse.js (fusejs.io)
Fuse.js (fusejs.io)

讲解 (Tutorials)

How to Add Search to a React App with Fuse.js (freecodecamp.org)
如何使用Fuse.js将搜索添加到React应用 (freecodecamp.org)

灵感 (Inspiration)

Foam (foambubble.github.io)
泡沫 (foambubble.github.io)
Roam Research (roamresearch.com)
漫游研究 (roamresearch.com)
Gatsby Garden Theme (github.com)
盖茨比花园主题 (github.com)

布局理念 (Layout Idea)

太空侵略者 (Space Invaders)

Category: Puzzles & Games

类别：拼图与游戏

Create a space invaders spacecraft shooter game to shoot multiple waves of enemy ships.

创建一个太空侵略者飞船射击游戏，以射击敌舰的多波浪。

简要 (Brief)

Space Invaders is an arcade classic that puts you in a spacecraft up against an alien invasion. As you try to shoot them down, they’re firing back, and you only have a limited amount of protection before you’re open to being hit.

太空侵略者是一款经典的街机游戏，可让您置身太空船中，抵御外星人的入侵。当您尝试击落它们时，它们会向后射击，在您受到打击之前，您只有有限的保护。

1级 (Level 1)

The core part of the game is that you’re moving around a spacecraft trying to hit a bunch of aliens with your weapons. While there’s one of you, there’s many of them.Create a spacecraft that can move around and shoot aliens that are not moving.

游戏的核心部分是，您要绕着太空飞船飞行，试图用武器打击一群外星人。你们当中有一个人，但其中有许多人，那就创造一个可以四处走动的太空船，并射击不动的外星人。

2级 (Level 2)

What makes the game tricky, is that the aliens are constantly moving. Every time they hit the edge of the play area, they drop down and speed up, getting closer to your ship.Add movement to the aliens going side to side on the play area. Every time the aliens reach one side they should drop down a level. They should also speed up at certain intervals.

使游戏棘手的是外星人不断移动。每当他们碰到游乐区的边缘时，它们就会掉落并加速，靠近您的飞船，为在游乐区中并排走动的外星人增加运动。每当外星人到达一侧时，他们都应该下降一个水平。它们还应按一定的时间间隔加速。

3级 (Level 3)

You’re on your own, but luckily you can get some protection. You have shields that you can hide behind that help protect you while they last.Create several shields in front of the player spacecraft that can take a limited amount of damage.

您自己一个人，但是幸运的是您可以获得一些保护。您可以躲藏在后面的盾牌，以在它们持续使用时为您提供保护。请在玩家飞船前创建几个盾牌，以承受有限的伤害。

去做 (To Do)

Create a new game
创建一个新游戏
Create static aliens
创建静态外星人
Create a player spacecraft
创建一个玩家飞船
Add spacecraft controls
添加航天器控件
Add spacecraft weapon
添加航天器武器
Configure alien damage
配置外星人伤害
Make aliens shoot back
让外星人回击
Make aliens move
让外星人移动
Add alien intervals
添加外星人间隔
Add shields
添加盾牌

讲解 (Tutorials)

Learn JavaScript by building 7 games (freecodecamp.org)
通过构建7个游戏来学习JavaScript (freecodecamp.org)

灵感 (Inspiration)

Space Invaders (codepen.io)
太空侵略者 (codepen.io)

布局理念 (Layout Idea)

框架主题 (Framework Theme)

Category: Tools & Libraries

类别：工具和库

Create a Gatsby theme that sets up a project with the Tailwind CSS framework.

创建一个Gatsby主题，使用Tailwind CSS框架设置一个项目。

简要 (Brief)

As developers, we commonly have to do a bunch of similar steps any time we create a new project. But tools like themes let us abstract those steps and package them in an easy to use way that can work for any new project.

作为开发人员，我们每次创建新项目时通常都必须执行一系列类似的步骤。但是诸如主题之类的工具使我们可以抽象化这些步骤，并以易于使用的方式打包它们，以适用于任何新项目。

1级 (Level 1)

Gatsby themes are a plugin-like system where we can take advantage of the Gatsby pipeline to share functionality as a package on npm.

Gatsby主题是一个类似于插件的系统，在这里我们可以利用Gatsby管道以npm上的软件包形式共享功能。

This opens the door to really doing anything we would do in a Gatsby site, but making it reusable to any Gatsby site.Create a new Gatsby theme that, when used, creates a new a style guide page on any project it’s added to.

这为真正在Gatsby网站上做任何事情打开了大门，但使其可以在任何Gatsby网站上重复使用。创建一个新的Gatsby主题，使用该主题时，将在添加到该项目的任何项目上创建一个新的样式指南页面。

2级 (Level 2)

The goal of themes isn’t just to create pages, but to add functionality that makes us productive. This includes things like frameworks and project configurations.Add a CSS framework to the Gatsby theme that lets the project it’s added to use that framework.

主题的目标不仅在于创建页面，还在于添加使我们高效的功能。这包括框架和项目配置之类的东西。向Gatsby主题添加CSS框架，使添加的项目可以使用该框架。

3级 (Level 3)

Sometimes themes are better only as tools, sometimes it’s helpful to be opinionated. One way to add useful functionality to a CSS framework is to create stock components.Create reusable React components using the CSS framework that can be used in the project the theme’s added to.

有时，主题仅作为工具才更好，而有时被人们接受则很有帮助。向CSS框架添加有用功能的一种方法是创建库存组件。使用CSS框架创建可重复使用的React组件，该组件可用于添加主题的项目中。

去做 (To Do)

Create a new theme
创建一个新主题
Add to example project
添加到示例项目
Create new style page
创建新样式页面
Add CSS framework
添加CSS框架
Use CSS in example
在示例中使用CSS
Create components
创建组件
Use components
使用组件

工具箱 (Toolbox)

Gatsby Themes (gatsbyjs.org)
盖茨比主题 (gatsbyjs.org)
Tailwind (tailwindcss.com)
尾风 (tailwindcss.com)

讲解 (Tutorials)

Building a Theme (gatsbyjs.org)
建立主题 (gatsbyjs.org)
What is Tailwind CSS and How Can I Add it to my Website or React App? (freecodecamp.org)
什么是Tailwind CSS，如何将其添加到我的网站或React App中？ (freecodecamp.org)

灵感 (Inspiration)

Gatsby Tailwind Theme (github.com)
Gatsby Tailwind主题 (github.com)

布局理念 (Layout Idea)

Webmentions (Webmentions)

Category: Project Add-Ons

类别：项目附加组件

Add webmentions integration to a website that shows Twitter interactions with the website.

将webmentions集成添加到网站，以显示Twitter与该网站的交互。

简要 (Brief)

Social interaction is an impactful way to bring more of an audience and conversation to topics we write about.

社交互动是一种有效的方式，可以将更多的受众和对话带入我们撰写的主题。

Having something on a website shows that interaction can be helpful to both inspire people to want to get involved or let people feel like they can be part of it.

在网站上放东西可以表明，互动可以激发人们参与的欲望，也可以使人们觉得自己可以参与其中。

1级 (Level 1)

In order to make use of Webmentions, a website needs to be configured with meta tags to provide information.Add the proper meta tags to a website and validate its use with webmention.io.

为了使用Webmentions，需要为网站配置元标记以提供信息，然后将适当的元标记添加到网站并通过webmention.io验证其使用。

2级 (Level 2)

The Webmentions API is a way to programmatically see connections in social interactions from a URL of your website. It lets you get the type of interaction and even the person’s profile avatar.Connect a website to Webmentions and add a list of social interactions to blog post pages.

Webmentions API是一种从您的网站的网址以编程方式查看社交互动中的联系的方法。它可以让您获得互动的类型，甚至是个人的个人头像。将网站连接到Webmentions，并将社交互动列表添加到博客帖子页面。

3级 (Level 3)

Now that the website is showing all of the interactions, there should be an easy way to join the conversation.Add a social link that, when clicked, creates a tweet with a link to the page.

既然网站已经显示了所有的互动，那么应该有一种简单的方法来加入对话了。添加一个社交链接，单击该链接会创建带有指向页面链接的推文。

去做 (To Do)

Add meta tags to website
向网站添加元标签
Validate meta tags
验证元标记
Connect to Webmention
连接到Webmention
Connect social to Bridgy
将社交与桥梁联系起来
List interactions
列出互动
Add tweet button
添加推特按钮

工具箱 (Toolbox)

Webmention.io (webmention.io)
Webmention.io (webmention.io)
Bridgy (brid.gy)
桥 (brid.gy)
Gatsby Plugin Webmention (github.com)
Gatsby插件Webmention (github.com)

讲解 (Tutorials)

Indieweb pt2: Using Webmentions in Eleventy (mxb.dev)
Indieweb pt2：在Eleventy (mxb.dev)中使用Webmentions
Clientside Webmentions (swyx.io)
客户端Webmentions (swyx.io)
Getting started with Webmentions in Gatsby (knutmelvaer.no)
Gatsby中的 Webmentions 入门 (knutmelvaer.no)
Building Gatsby Plugin Webmentions (christopherbiscardi.com)
建立盖茨比插件网 (christopherbiscardi.com)

灵感 (Inspiration)

Knut Melvær (knutmelvaer.no)
纳特·梅尔韦 (knutmelvaer.no)
Swyx (swyx.io)
Swyx (swyx.io)

布局理念 (Layout Idea)

产品搜寻 (Product Hunt)

Category: Clones

类别：克隆

Create a Product Hunt clone that lets people post a new product with ratings.

创建一个Product Hunt克隆，使人们可以发布带有评级的新产品。

简要 (Brief)

We all live for products, whether it’s our mobile phones or the apps we use on our laptops.

我们都为产品而生存，无论是手机还是笔记本电脑上使用的应用程序。

While there are tons of products in the world, it can be hard to navigate through the good and the bad. Tools like Product Hunt provide a platform to learn about new tools and get reactions and reviews from others.

尽管世界上有成千上万种产品，但要想一遍又一遍，就很难导航。诸如Product Hunt之类的工具提供了一个学习新工具并获得其他人的React和评论的平台。

1级 (Level 1)

The most important part about learning about new products is the product itself. We want to know what the product is, what it looks like, and how it works.Create a page that lets you add a new product to a website with a title, picture, and description.

了解新产品最重要的部分是产品本身。我们想知道产品是什么，它的外观以及它是如何工作的。创建一个页面，使您可以向网站添加带有标题，图片和描述的新产品。

2级 (Level 2)

When learning about products, reviews are a way we can trust a product before we purchase it. It helps us gain confidence in what we’re about to spend our money or time on.Add the ability for people to add reviews about each product.

在了解产品时，评论是我们在购买产品之前可以信任产品的一种方式。它可以帮助我们对将要花费的金钱或时间花费的信心。增加人们对每种产品发表评论的能力。

3级 (Level 3)

People love products, so there are tons of them in the world. There are way too many to try to sort through manually, so we need a mechanism to search and browse with.Add the ability to search products and browse by category.

人们喜欢产品，因此世界上有很多产品。手动分类的方式太多了，因此我们需要一种搜索和浏览的机制，并具有搜索产品和按类别浏览的功能。