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

react

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个项目构想,并附有项目简介和布局构想,以帮助您从中学到实际。

  • Business & Real-World: Map Statistics Dashboard

    商业与现实世界:地图统计信息中心

  • Fun & Interesting: Musical Instrument

    有趣和有趣:乐器

  • Personal & Portfolio: Blog

    个人与投资组合:博客

  • Productivity: Notebook

    生产力:笔记本

  • Puzzles & Games: Space Invaders

    拼图和游戏:太空侵略者

  • Tools & Libraries: Framework Theme

    工具和库:框架主题

  • Project Add-Ons: Webmentions

    项目附加组件:Webmentions

  • Clones: Product Hunt

    克隆:产品搜寻

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.

要查看国家/地区的统计数据最简单的方法是拥有一张地图,您可以浏览该国家/地区旁边可用的每个国家/地区的统计信息。以及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 将图形添加到地图

工具箱 (Toolbox)

  • Open Disease Data API (disease.sh)

    开放疾病数据API (disease.sh)

  • React Leaflet (react-leaflet.js.org)

    React Leaflet (react-leaflet.js.org)

  • Gatsby Leaflet Starter (github.com)

    Gatsby Leaflet Starter (github.com)

讲解 (Tutorials)

  • How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet (freecodecamp.org)

    如何在带有Gatsby和Leaflet的React中创建冠状病毒(COVID-19)仪表盘和地图应用 (freecodecamp.org)

  • How to add Coronavirus (COVID-19) case statistics to your React map dashboard with Gatsby (freecodecamp.org)

    如何使用Gatsby (freecodecamp.org) 将冠状病毒(COVID-19)病例统计信息添加到您的React Map仪表板

  • Mapping with React Leaflet (egghead.io)

    使用React Leaflet进行映射 (egghead.io)

灵感 (Inspiration)

  • COVID-19 Dashboard by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University (JHU) (coronavirus.jhu.ed)

    约翰·霍普金斯大学(JHU)系统科学与工程中心(CSSE)的COVID-19信息中心 (coronavirus.jhu.ed)

  • Coronavirus (COVID-19) Dashboard Demo (coronavirus-map-dashboard.netlify.app)

    冠状病毒(COVID-19)仪表板演示 (coronavirus-map-dashboard.netlify.app)

(Layout Idea)

Map Statistics Dashboard 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)

Musical Instrument 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)

Blog 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)

Notebook 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)

Space Invaders 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)

Framework Theme 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是一种以编程方式从网站的URL查看社交互动中的联系的方法。 它可以让您获得互动的类型,甚至是个人的个人头像。将网站连接到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)

Webmentions Layout Idea
Webmentions版式构想

产品搜寻 (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.

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

去做 (To Do)

  • Create product website 创建产品网站
  • Create database 建立资料库
  • Add product form 添加产品表格
  • Add product to database 将产品添加到数据库
  • Request product for page 索取产品页面
  • Add review form 添加评论表格
  • Add reviews to database 向数据库添加评论
  • Add reviews to product 为产品添加评论
  • Add product search 添加产品搜索
  • Add product categories 添加产品类别

工具箱 (Toolbox)

  • Hasura (hasura.io)

    羽ura (hasura.io)

讲解 (Tutorials)

  • Building a Product Hunt clone app using Hasura and Next.js (logrocket.com)

    使用Hasura和Next.js (logrocket.com) 构建Product Hunt克隆应用程序

  • How to build a basic version of Product Hunt using React (freecodecamp.org)

    如何使用React构建基本版本的Product Hunt (freecodecamp.org)

布局理念 (Layout Idea)

Product Hunt Layout Idea
产品搜寻布局构想

更多项目 (More Projects)

If you want more project ideas, check out 50 Projects for React & the Static web!

如果您想要更多的项目创意,请查看React和Static网站的50个项目 !

  • ???? Follow Me On Twitter

    Twitter在Twitter上关注我

  • ????️ Subscribe To My Youtube

    Subscribe️订阅我的YouTube

  • ✉️ Sign Up For My Newsletter

    ✉️注册我的时事通讯

翻译自: https://www.freecodecamp.org/news/8-reactjs-project-ideas-to-start-learning-by-doing/

react.js项目配置

以上是 react.js项目配置_8个React.js项目创意可帮助您边做边学 的全部内容, 来源链接: utcz.com/z/384173.html

回到顶部