#1 Pomodoro Timer (React.js) - Advent of JS

1. Overview Challenge & starter files: Advent of JS Full codes: nilstarbb/advent-of-js/1-pomodoro-timer Live Demo: 01 - Pomodoro || Advent of JavaScript Preview: Requirements: We’re creating a Pomodoro timer. Start the timer by clicking on the start link/button. Once the user clicks start, the word start will change to stop. Then, the user can click on the stop button to make the timer stop. Click on the gear icon to change the length (minutes and seconds) of the timer....

2021-12-30 · 9 min

FullStackOpen:phonebook app / front-end 要点总结

教程:FullStackOpen/Part 2 - 与服务端通信 后端部分:FullStackOpen:phonebook app / back-end 要点总结 数据库部分:FullStackOpen:phonebook app / MongoDB 要点总结 App:React Phonebook App 1. 用 axios 和 REST API 实现 CRUD Representational State Transfer,又名 REST,是一种架构风格,用于构建可伸缩的 web 应用。 在 RESTful thinking 中,每一个对象被称为 resource。每个 resource 都有一个相关联的 URL,结合resource 类型名称和 resource 的唯一标识符来创建 resource 唯一的地址。 如果将 phonebook 的资源类型定义为 persons,那么标识为10的 persons 资源的地址就是唯一的地址 [root_url]/api/persons/10。所有 persons 资源的整个集合的 URL 是 [root_url]/api/persons。 可以用不同的 HTTP method 对资源执行不同的操作。 URL METHOD FUNCTION persons/10 GET 获取单一资源 persons GET 获取集合中的所有资源 persons POST 依据请求数据创建一个新的资源 persons/10 DELETE 删除指定资源 persons/10 PUT 使用请求数据替换指定资源 persons/10 PATCH 使用请求数据替换指定资源的一部分 使用 axios 将数据发送到服务器并获取响应,实现 CRUD 操作:...

2021-12-27 · 3 min

FullStackOpen:countries app 要点总结

教程:FullStackOpen/Part 2 - 与服务端通信 App:Codepen/countries/fullstackopen 2.11-2.13 1. 使用表单 const App = () => { const [query, setQuery] = useState(""); const changeQuery = (e) => { setQuery(e.target.value); }; const countriesFiltered = countries.filter((country) => country.name.common.toLowerCase().includes(query.toLowerCase()) ); return ( <> <div> find countries: <input value={query} onChange={changeQuery} /> </div> <Result countries={countriesFiltered} /> </> ); }; 由于将 query 状态指定为 input 的 value 属性,因此 App 组件控制了 input 元素的行为。为了能够编辑 input 元素,必须注册一个 event handler 来同步对 input 所做的更改和组件的状态,否则会报错。...

2021-12-22 · 1 min

FullStackOpen:anecdote app 要点总结

教程:FullStackOpen/Part 1 - React 入门 App:Codepen/anecdote/fullstackopen2021: 1.12-1.14 1. Using the State Hook 通过 React 的 state hook 向应用的 App 组件中添加状态。 import React, { useState } from "react"; const App = () => { ... const [selected, setSelected] = useState(0); ... }; 函数调用将 state 添加到组件,并将其值用0进行初始化。 该函数返回一个包含两个元素的数组。 selected 变量被赋予的初始值 state 为零。 变量 setSelected 被分配给一个函数,该函数将用于修改 state。 2. Function That Returns A Function 事件处理程序(Event Handler)应该是一个函数或一个函数引用,不能是对函数的调用。 const App = () => { ... const getAnecdote = () => setSelected(Math....

2021-12-22 · 1 min

React组件props变量赋值的不同写法

Method 1: 将属性值直接赋值为两个变量。 const Hello = (props) => { const name = props.name const age = props.age ... } Method 2: 利用ES6添加的特性,在赋值时从对象和数组中解构(Destructuring)提取和收集对象属性的值到单独的变量。 const Hello = (props) => { const { name, age } = props ... } Method 3: 传递给组件的props直接解构为变量。 const Hello = ({ name, age }) => { ... }

2021-12-15 · 1 min