最新文章
继续设计游戏库项目game-hub。 优化图像 检查网页，网络–选择图片，复制图片地址并打开，我们发现图是很大的，这会影响网络传输性能。 我们发现，在rawg中，可以在路径中裁剪图片，比如原地址是： https://media.rawg.io/media/games/618/618c2031a07bbff6b4f611f10b6bcdbc.jpg 在 “media/”...
我们学到的React知识已有能力搭建项目了，本篇开始创建一个漂亮的游戏库网站，界面仿照全球知名的游戏发现网站rawg.io。 https://rawg.io/ 我们将设计深色/浅色模式的切换，游戏的搜索，游戏类型的筛选，排序等，项目涉及多种现代WEB的UI，这是一个极好的练习和巩固知识的机会。 设置项目 创建React项目game-hub。选择React和TypeScript。 npm create...
React是用于创建界面或前端的一个库，而应用程序还需要运行在服务器的后端支持，我们可以将后端理解成给前端提供动力的引擎，它提供业务逻辑、数据或安全验证等。 很多语言或框架可以做后端，比如： Express.js、Django、Ruby on Rails、Spring、ASP.NET Core。 后端开发是另一个主题，如果想了解Django的话，可以查看本人之前写的《掌握Django》系列。作为React开发人员，需要知道如何连接后端。...
表单是很多WEB应用程序的基本部分，本文我们学习使用第三方库创建React表单。我们使用React Hook Forms来管理表单状态，使用Zod来验证数据。 创建表单 我们来创建表单，先将之前在main.tsx注释的 bootstrap.css重新启用，这样我们就可以使用现代的样式。 import "bootstrap/dist/css/bootstrap.css"; 在commponents文件夹下新建Form.tsx文件，键入...
状态管理是React中的一个基本概念，这一篇文章我们就来了解下组件状态是如何存储和更新的，这些知识对于创建复杂应用极为重要，我们需要透彻理解。 理解状态钩子(Understanding the State Hook) 我们已学习了State的用法，这里我们需要了解三点： 一，React更新 State是异步的。 比如我们在设置State语句后立即查看State，会发现并没有马上更新的。如下面的代码，点击按钮在控制台输出”false”，可见并没有立即更新为true。这是为了避免频繁重新渲染页面，在事件处理函数中，可能还有类似setName(‘kelemi’)等其他语句，一般是等事件处理函数结束后，才一并重新渲染。...
我们已学习了组件的创建，本文介绍组件的样式(CSS)，您将了解到Vanilla CSS（明确手写的CSS）、CSS模块、CSS-in-JS、CCS库的使用等知识。 Vanilla CSS 现在已经有了非常好用的CSS库，比如Bootstrap、Material UI，所以手动编写Vanilla CSS的方法又浪费时间又乏味，已很少人使用了。我们可以了解下怎么做。 先在main.tsx文件中，删除从bootstratp导入css的语句，然后在components文件夹下新建ListGroup.css文件，再新建ListGroup文件夹，然后将ListGroup.css和ListGroup.tsx两个文件移至ListGroup文件夹中。再编写ListGroup.css文件：...
本文覆盖基本React组件的知识，是创建健壮React应用的基础，包括创建组件、管理状态、通过props传递数据以及调试React等。 创建一个列表组 先安装bootstrap，它是一个css库，我们用它代替自带的css。 npm i bootstrap@5.2.3 删除App.css里的全部内容。 删除index.css文件，修改Main.tsx，导入bootstrap的css. import...
本系列讲解React相关知识，涉及绝大部分React知识点。并创建一个具有现代网站元素的电子游戏网站。 先决条件 我们无需了解React，但要能理解html，css，javascript。我们要用到Typescript，它是Javascript的超集，增加了静态类型，实质上是为了能在开发过程及早发现错误。您如果从未用过Typescript，也是没关系的，本系列会逐步讲解。 什么是React React是一个Javascript库，用于创建动态和交互的用户界面，2011年由Facebook创建，是目前应用最广的前端Javascript库。...
本文介绍项目部署，我们将创建一个云端在线的项目后端应用程序。 托管选项 对于Django项目，我们可以选择托管在VPS或PaaS中。VPS需要更多的部署技能，而PaaS则很简单。PaaS有多种产品，我们选择Heroku。 git管理 如果没有安装git，就去git-scm.com下载安装。 git是每个程序员的必备技能，一般过程是： 初始化库，“git init”， 这样就在当前目录创建了git存储库，git存储库类似数据库，管理我们项目的快照。当我们项目有修改时，我们可以保存快照到存储库中。后续可以随时查看保存的快照，查看当时的状态，等等。...
本文介绍项目部署前的一些必要的步骤。 添加主页 目前我们的项目没有主页显示，看上去有点尴尬，我们创建一个。 在core应用里，添加urls.py，再从playground/urls.py里复制代码并作少许修改。我们不必添加实际的视图，直接使用一个通用的模板视图，并提供参数指向我们的一个页面 core/index.html。 from django.urls import path from django.views.generic...