[React] 17 - Project: Weather Application

前言

---

一、故事背景

本篇是个热身项目：Using APIs in React - Create a Weather Application

未来还有另一个系列：Build App with React

Project系列，主要是从实践的角度来分析需求，设计组件，设计网页。

 

二、组件设计纲要

 本篇主要介绍了 根据需求设计组件，以及界面美化如何引入react开发过程中 两个学习内容。

 

 

 

代码分析

---

一、项目配置问题

• registerServiceWorker

service worker是在后台运行的一个线程，可以用来处理离线缓存、消息推送、后台自动更新等任务。

registerServiceWorker就是为react项目注册了一个service worker，用来做资源的缓存，这样你下次访问时，就可以更快的获取资源。

因为资源被缓存，所以即使在离线的情况下也可以访问应用（此时使用的资源是之前缓存的资源）。注意，registerServiceWorker注册的service worker 只在生产环境中生效 

(process.env.NODE_ENV === ‘production’)

 

• className

h1, p 引用自己的内部属性，如下所示。

 

• OpenWeatherMap

 

 

二、组件设计与实现

• <Form>

参见：HTML 表单和输入

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

浏览器显示如下：

First name: 
Last name: 

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

 

• event.target

Ref: HTML DOM Event 对象

例如：键盘按键的状态、鼠标的位置、鼠标按钮的状态。 

getWeather = async (e) => {
    e.preventDefault();
    const city     = e.target.elements.city.value;　　　　// <---- 触发事件处的目标节点
    const country  = e.target.elements.country.value;

    const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`);
    const data     = await api_call.json();

 

两个知识点的出处，如下：

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

属性	描述
bubbles	返回布尔值，指示事件是否是起泡事件类型。
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget	返回其事件监听器触发该事件的元素。
eventPhase	返回事件传播的当前阶段。
target	返回触发此事件的元素（事件的目标节点）。
timeStamp	返回事件生成的日期和时间。
type	返回当前 Event 对象表示的事件的名称。

标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

方法	描述
initEvent()	初始化新创建的 Event 对象的属性。
preventDefault()	通知浏览器不要执行与事件关联的默认动作。
stopPropagation()	不再派发事件。

 

• event.preventDefault

Ref：preventDefault() 方法 取消掉与事件关联的默认动作

例如：响应键盘的图片切换 中, 键盘总是让浏览器滚动，为了取消掉默认的事件，使用了 preventDefault() 方法。

 

• 箭头函数

【例一】参数就一个，返回值也就一个。

可见利用箭头函数简化写法。 

const Weather = props => (
    <div className="weather__info">
        {
            props.city && props.country && <p className="weather__key"> Location:
             <span className="weather__value"> {props.city}, {props.country}</span>
            </p>
        }
        {
            props.temperature && <p className="weather__key"> Temperature:
             <span className="weather__value"> {props.temperature}    </span>
            </p>
        }
        {
            props.humidity && <p className="weather__key"> Humidity:
             <span className="weather__value"> {props.humidity} </span>
            </p>
        }
        {
            props.description && <p className="weather__key"> Conditions:
             <span className="weather__value"> {props.description} </span>
            </p>
        }
        {
            props.error && <p className="weather__error">{props.error}</p>
        }
    </div>
);

export default Weather;

 

【例二】参数就一个，返回值也就一个。

可见利用箭头函数简化写法。 

const Form = props => (
    <form onSubmit={props.getWeather}>
        <input type="text" name="city"    placeholder="City..."/>
        <input type="text" name="country" placeholder="Country..."/>
        <button>Get Weather</button>
    </form>
);

 

 

三、界面美化

1. 安装bootstrap。

2. 在主界面添加对应的css以及导入布局文件。

import React    from 'react';
import ReactDOM from 'react-dom';

import 'bootstrap/dist/css/bootstrap.min.css';

import "./App.css";
import App from './App';

import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

 

界面美化中涉及的要点与css，bootstrap有关。

  render() {
    return (
      <div>
        <div className="wrapper">
          <div className="main">
            <div className="container">
              <div className="row">

                <div className="col-xs-5 title-container">　　
                  <Titles />
                </div>

                <div className="col-xs-7 form-container">
                  <Form getWeather={this.getWeather} />
                  <Weather 
                    temperature={this.state.temperature} 
                    humidity   ={this.state.humidity}
                    city       ={this.state.city}
                    country    ={this.state.country}
                    description={this.state.description}
                    error      ={this.state.error}
                  />
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

 

关于这部分内容，需要详见：[Full-stack] 网页布局艺术 - Less