大家好，我是若川。今天推荐一个练手的React项目，创建天气应用，相信很快能看完。昨天发送书掉粉18人，是我没想到的，送书一般是出版社按阅读量赞助几本，一般也会送一本给号主。感谢屏幕前的里一直关注着我。
React 是一个很棒的前端框架，可以用来构建用户界面。
使用 React 的优势之一是：我们创建的组件会被封装起来，换句话说，组件是不可见的。
在本文中，我们通过构建一个天气应用来学习 React。
如何安装 Node 和 npm
为了构建 React 应用，我们需要安装 Node 运行时环境，它主要是用来执行 JavaScript 代码。
在 https://nodejs.org/en/ 下载安装包。
还需要安装 npm，它是用 Node 构建的一个包管理器，可以在 JavaScript 应用中用它来安装依赖包。幸运的是，npm 包含在 Node 中，所以不必另外安装它。
安装完成后，打开终端（terminal）或命令提示符（command prompt），输入 node -v 命令，查看当前系统中的 Node 版本。
如何创建 React 应用
要创建 react 应用，可以在终端输入 npx create-react-app <Your app name> 命令（此例中命令为 npx create-react-app my-weather-app）。
可以看到相关依赖包正在自动安装。
依赖包安装完成之后，进入项目根目录（通过 cd 命令），执行 npm start
可以看到默认的 React 模板页面：
默认的 React 代码模板：
App.js
我们不需要这些，所以要清理一些无用代码。
在 app.js 中，删除 div 标签内的内容，删除导入 logo 的代码。
完成之后，页面内容会变成空白。
清理之后的 app.js
如何安装我们需要的依赖包
为了让这个应用更有吸引力，我们需要安装一些外部依赖包。
我们需要用到 Semantic React UI 库，执行以下命令来安装：
npm install semantic-ui-react semantic-ui-css
安装完成后，在 index.js 中引入这个库，将以下代码复制到 index.js 中即可：
import 'semantic-ui-css/semantic.min.css'
还需要安装 moment.js 来格式化时间，执行以下命令：
npm install moment --save
可以查看 package.json 文件来了解安装了哪些包：
package.json
在这里，可以看到目前安装的所有依赖包。
如何创建我们的天气应用
为了让我们的天气应用正常工作，需要使用 OpenWeatherMap 提供的 API 来获取天气信息。
访问 https://home.openweathermap.org/users/sign_up 页面，创建自己的账号。
完成之后，点击导航栏上的 API 选项，可以看到不同类型的天气数据，如当前天气、未来 4 天逐小时预报、未来 16 天预报等。这些就是用来获取天气信息的 API 端点。
调用这些 API 需要用到 API key，点击右上角的用户名，接着点击 “My API Keys”，可以查看自己的 API key。
如果没有的话就创建一个。
在项目根目录新建一个 .env 文件。
这是一个环境变量文件，保存所有 API 端点和 key 信息。
REACT_APP_API_URL = 'https://api.openweathermap.org/data/2.5'
REACT_APP_API_KEY = 【把你的 API key 粘贴在这里】
REACT_APP_ICON_URL = 'https://openweathermap.org/img/w'
把你的 API key 粘贴在 REACT_APP_API_KEY 变量中。
如何使用 React Hooks
React Hooks 让我们能够在函数组件中使用、管理 state。
我们会用到 useState 和 useEffect 两个 hook，在顶部引入它们：
import React, { useEffect, useState } from "react";创建两个 state，一个是纬度（lat），一个是经度（long）。
const [lat, setLat] = useState([]);
const [long, setLong] = useState([]);
创建一个 useEffect 函数，在应用加载及刷新时会执行它。
useEffect(() => {
navigator.geolocation.getCurrentPosition(function(position) {
setLat(position.coords.latitude);
setLong(position.coords.longitude);
});
console.log("Latitude is:", lat)
console.log("Longitude is:", long)
}, [lat, long]);使用 navigator.geolocation 获取纬度和经度，并使用 setLong 和 setLat 来设置纬度和经度 state。
import './App.css';
import React, { useEffect, useState } from "react";
export default function App() {
const [lat, setLat] = useState([]);
const [long, setLong] = useState([]);
useEffect(() => {
navigator.geolocation.getCurrentPosition(function(position) {
setLat(position.coords.latitude);
setLong(position.coords.longitude);
});
console.log("Latitude is:", lat)
console.log("Longitude is:", long)
}, [lat, long]);
return (
<div className="App">
</div>
);
}
app.js
现在 app.js 的内容如上。可以在浏览器控制台中查看纬度和经度的值：
Latitude is: 25.5922166
Longitude is: 85.12761069999999
纬度和经度值
如何利用纬度和经度来获取当前位置的天气
创建 getWeather 函数，基于我们的纬度和经度从 API 中获取天气数据。
这个函数中，使用 fetch 方法调用 API 获取天气数据。process.env.REACT_APP_API_URL 和 process.env.REACT_APP_API_KEY 分别获取了 .env 文件中配置的 API 地址和 API key，lat 和 long 是之前获取到的纬度和经度。
接着将数据转换为 JSON 格式。
再接着，使用 setData 将结果存储在 data 对象中。
await fetch(`${process.env.REACT_APP_API_URL}/weather/?lat=${lat}&lon=${long}&units=metric&APPID=${process.env.REACT_APP_API_KEY}`)
.then(res => res.json())
.then(result => {
setData(result)
console.log(result);
});然后把数据打印在控制台：
现在可以看到基于纬度和经度获取到的天气数据。
现在，app.js 文件的内容如下：
import './App.css';
import React, { useEffect, useState } from "react";
import Weather from './components/weather';
export default function App() {
const [lat, setLat] = useState([]);
const [long, setLong] = useState([]);
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
navigator.geolocation.getCurrentPosition(function(position) {
setLat(position.coords.latitude);
setLong(position.coords.longitude);
});
await fetch(`${process.env.REACT_APP_API_URL}/weather/?lat=${lat}&lon=${long}&units=metric&APPID=${process.env.REACT_APP_API_KEY}`)
.then(res => res.json())
.then(result => {
setData(result)
console.log(result);
});
}
fetchData();
}, [lat,long])
return (
<div className="App">
</div>
);
}
app.js
如何创建天气组件
创建展示天气数据的组件。
在 src 文件夹中，创建 components 文件夹，并在其中创建 weather.js 文件。
在 app.js 中使用天气组件：
import './App.css';
import React, { useEffect, useState } from "react";
import Weather from './components/weather';
export default function App() {
const [lat, setLat] = useState([]);
const [long, setLong] = useState([]);
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
navigator.geolocation.getCurrentPosition(function(position) {
setLat(position.coords.latitude);
setLong(position.coords.longitude);
});
await fetch(`${process.env.REACT_APP_API_URL}/weather/?lat=${lat}&lon=${long}&units=metric&APPID=${process.env.REACT_APP_API_KEY}`)
.then(res => res.json())
.then(result => {
setData(result)
console.log(result);
});
}
fetchData();
}, [lat,long])
return (
<div className="App">
{(typeof data.main != 'undefined') ? (
<Weather weatherData={data}/>
): (
<div></div>
)}
</div>
);
}
在 app.js 文件中引入天气组件（Weather）
我在 return 语句加了一个判断，如果 data.main 的值为 undefined 则展示一个空的 div。因为 fetch 函数是异步的，所以必须加入这个检查。所有其他函数（除了异步的 fetch 函数）执行完毕之后，就会执行这个 return 语句，如果没有这个判断就会报错：
这是由于我们的应用在 API 调用完成之前渲染了 return 语句中返回的内容，而此时没有数据可以展示，所以抛出了 undefined 错误。
关于 async/await 的更多信息，可以查看这篇文章。
如何创建天气组件的主体部分
这个部分我们将会使用 Semantic UI 来设计界面。（译注：Semantic UI 使用了严格模式下已经弃用的 findDOMNode() 方法，会在控制台抛出警告，不必理会。)
创建展示天气信息的卡片：
import React from 'react';
import './styles.css';
import { Card } from 'semantic-ui-react'
const CardExampleCard = ({weatherData}) => (
<Card>
<Card.Content>
<Card.Header className="header">{weatherData.name}</Card.Header>
</Card.Content>
</Card>
)
export default CardExampleCard;
Weather.js
我们引入了并使用了 semantic-ui-react 的 Card 组件，在卡片中还有一个 Header 用来展示当前城市。
现在问题是，怎么把 app.js 中的数据传给 weather.js 组件？
答案很简单，可以使用 props 从父组件向子组件传递数据。本例中，父组件是 app.js，子组件是 weather.js。
只要在 app.js 中使用 Weather 组件的地方加上 props 即可：
<Weather weatherData={data}/>我们在这里通过名为 weatherData 的 props 传入数据，就可以在 weather.js. 中接收到。
import React from 'react';
import './styles.css';
import { Card } from 'semantic-ui-react'
const CardExampleCard = ({weatherData}) => (
<Card>
<Card.Content>
<Card.Header className="header">{weatherData.name}</Card.Header>
</Card.Content>
</Card>
)
export default CardExampleCard;
可以看到，我们基于位置获取到了城市名。
同样的，我们可以为天气组件加入更多字段：
import React from 'react';
import './styles.css';
import { Card } from 'semantic-ui-react'
const CardExampleCard = ({weatherData}) => (
<Card>
<Card.Content>
<Card.Header className="header">City Name: {weatherData.name}</Card.Header>
<p>Temprature: {weatherData.main.temp}</p>
<p>Sunrise: {weatherData.sys.sunrise}</p>
<p>Sunset: {weatherData.sys.sunset}</p>
<p>Description: {weatherData.weather[0].description}</p>
</Card.Content>
</Card>
)
export default CardExampleCard;
我们可以通过 API 获取温度、日出时间、日落时间以及描述信息。
可以任意添加其他字段，比如湿度、风速、能见度等。
如何格式化数据和日期
格式化数据，使其更易读。我们会增加一些字段。
首先，为温度加上单位，在温度后面加上 °C。
并把日出日落时间转换为本地时间。
import React from 'react';
import './styles.css';
import { Card } from 'semantic-ui-react'
const CardExampleCard = ({weatherData}) => (
<Card>
<Card.Content>
<Card.Header className="header">City Name: {weatherData.name}</Card.Header>
<p>Temprature: {weatherData.main.temp} °C</p>
<p>Sunrise: {new Date(weatherData.sys.sunrise * 1000).toLocaleTimeString('en-IN')}</p>
<p>Sunset: {new Date(weatherData.sys.sunset * 1000).toLocaleTimeString('en-IN')}</p>
<p>Description: {weatherData.weather[0].main}</p>
<p>Humidity: {weatherData.main.humidity} %</p>
</Card.Content>
</Card>
)
export default CardExampleCard;
使用 moment.js. 计算出当天的礼拜日期和公历日期：
import moment from 'moment';
<p>Day: {moment().format('dddd')}</p>
<p>Date: {moment().format('LL')}</p>
使用 moment.js
在顶部引入 moment 包，并分别展示当天的礼拜日期和公历日期。这个包的好处在于，它会自动更新公历日期和礼拜日期。
现在 weather.js 内容如下：
import React from 'react';
import './styles.css';
import { Card } from 'semantic-ui-react';
import moment from 'moment';
const CardExampleCard = ({weatherData}) => (
<Card>
<Card.Content>
<Card.Header className="header">City Name: {weatherData.name}</Card.Header>
<p>Temprature: {weatherData.main.temp} °C</p>
<p>Sunrise: {new Date(weatherData.sys.sunrise * 1000).toLocaleTimeString('en-IN')}</p>
<p>Sunset: {new Date(weatherData.sys.sunset * 1000).toLocaleTimeString('en-IN')}</p>
<p>Description: {weatherData.weather[0].main}</p>
<p>Humidity: {weatherData.main.humidity} %</p>
<p>Day: {moment().format('dddd')}</p>
<p>Date: {moment().format('LL')}</p>
</Card.Content>
</Card>
)
export default CardExampleCard;
weather.js
上图是现在的页面效果。
加上一些样式
现在已经得到了所有数据，我们加一些样式来让它更有吸引力。
首先，让卡片变大一点、改变 border-radius、加入更酷的字体和颜色、删除文本对齐（译注：文中 css 代码没有涉及文本对齐）。
import React from 'react';
import './styles.css';
import moment from 'moment';
const CardExampleCard = ({weatherData}) => (
<div className="main">
<p className="header">{weatherData.name}</p>
<div>
<p className="day">Day: {moment().format('dddd')}</p>
</div>
<div>
<p className="temp">Temprature: {weatherData.main.temp} °C</p>
</div>
</div>
)
export default CardExampleCard;
weather.js
@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');
.main{
width: 700px;
border-radius: 15px;
background-color: #01579b;
}
.header{
background-color: #424242;
color: whitesmoke;
padding: 10px;
font-size: 28px;
border-radius: 15px;
font-family: 'Recursive', sans-serif;
}
.day{
padding: 15px;
color: whitesmoke;
font-family: 'Recursive', sans-serif;
font-size: 24px;
font-weight: 600;
}
.temp{
padding: 15px;
color: whitesmoke;
font-family: 'Recursive', sans-serif;
font-size: 18px;
}styles.css
现在我们的应用效果如上。
使用 flexbox 来排列数据：
<div className="flex">
<p className="day">Day: {moment().format('dddd')}</p>
</div>
<div className="flex">
<p className="temp">Temprature: {weatherData.main.temp} °C</p>
</div>
给 div 元素加上“flex”类，并在 styles.css. 中加入以下样式：
.flex{
display: flex;
justify-content: space-between;
}现在 weather.js 内容如下：
import React from 'react';
import './styles.css';
import moment from 'moment';
const CardExampleCard = ({weatherData}) => (
<div className="main">
<p className="header">{weatherData.name}</p>
<div className="flex">
<p className="day">Day: {moment().format('dddd')}</p>
<p className="day">{moment().format('LL')}</p>
</div>
<div className="flex">
<p className="temp">Temprature: {weatherData.main.temp} °C</p>
<p className="temp">Humidity: {weatherData.main.humidity} %</p>
</div>
</div>
)
export default CardExampleCard;
同样的，加入剩下的字段：
import React from 'react';
import './styles.css';
import moment from 'moment';
const WeatherCard = ({weatherData}) => (
<div className="main">
<p className="header">{weatherData.name}</p>
<div className="flex">
<p className="day">{moment().format('dddd')}, <span>{moment().format('LL')}</span></p>
<p className="description">{weatherData.weather[0].main}</p>
</div>
<div className="flex">
<p className="temp">Temprature: {weatherData.main.temp} °C</p>
<p className="temp">Humidity: {weatherData.main.humidity} %</p>
</div>
<div className="flex">
<p className="sunrise-sunset">Sunrise: {new Date(weatherData.sys.sunrise * 1000).toLocaleTimeString('en-IN')}</p>
<p className="sunrise-sunset">Sunset: {new Date(weatherData.sys.sunset * 1000).toLocaleTimeString('en-IN')}</p>
</div>
</div>
)
export default WeatherCard;
weather.js
@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');
.main{
width: 700px;
border-radius: 20px;
background-color: #01579b;
}
.top{
height: 60px;
background-color: #424242;
color: whitesmoke;
padding: 10px;
border-radius: 20px 20px 0 0;
font-family: 'Recursive', sans-serif;
display: flex;
justify-content: space-between;
}
.header{
background-color: #424242;
color: whitesmoke;
margin: 10px 0px 0px 10px;
font-size: 25px;
border-radius: 20px 20px 0 0;
font-family: 'Recursive', sans-serif;
}
.day{
padding: 15px;
color: whitesmoke;
font-family: 'Recursive', sans-serif;
font-size: 24px;
font-weight: 600;
}
.temp{
padding: 15px;
color: whitesmoke;
font-family: 'Recursive', sans-serif;
font-size: 18px;
}
.flex{
display: flex;
justify-content: space-between;
}
.sunrise-sunset{
padding: 15px;
color: whitesmoke;
font-family: 'Recursive', sans-serif;
font-size: 16px;
}
.description{
padding: 15px;
color: whitesmoke;
font-family: 'Recursive', sans-serif;
font-size: 24px;
font-weight: 600;
}styles.css
现在我们的应用效果如下：
如何加入刷新按钮
在页面顶部增加一个刷新按钮：
import React from 'react';
import './styles.css';
import moment from 'moment';
import { Button } from 'semantic-ui-react';
const refresh = () => {
window.location.reload();
}
const WeatherCard = ({weatherData}) => (
<div className="main">
<div className="top">
<p className="header">{weatherData.name}</p>
<Button className="button" inverted color='blue' circular icon='refresh' onClick={refresh} />
</div>
<div className="flex">
<p className="day">{moment().format('dddd')}, <span>{moment().format('LL')}</span></p>
<p className="description">{weatherData.weather[0].main}</p>
</div>
<div className="flex">
<p className="temp">Temprature: {weatherData.main.temp} °C</p>
<p className="temp">Humidity: {weatherData.main.humidity} %</p>
</div>
<div className="flex">
<p className="sunrise-sunset">Sunrise: {new Date(weatherData.sys.sunrise * 1000).toLocaleTimeString('en-IN')}</p>
<p className="sunrise-sunset">Sunset: {new Date(weatherData.sys.sunset * 1000).toLocaleTimeString('en-IN')}</p>
</div>
</div>
)
export default WeatherCard;
weather.js
.button{
width: 35px;
height: 35px;
}styles.css
可以看到，页面上多了一个刷新按钮，点击它就会触发 refresh 函数、刷新页面。
如何加入页面加载动画
加入加载动画，增强应用的用户体验。
引入 Semantic UI 的 Loader 组件，并在数据尚未加载完成的情况下显示：
import { Dimmer, Loader } from 'semantic-ui-react';
<div className="App">
{(typeof data.main != 'undefined') ? (
<Weather weatherData={data}/>
): (
<div>
<Dimmer active>
<Loader>Loading..</Loader>
</Dimmer>
</div>
)}
</div>app.js
回顾一下
我们创建了一个基于地理位置展示当前天气信息的 React 应用。
一起回顾一下我们所做的东西。
我们学习了 State 和 Props
State 和 Props 是 React 提供的非常强大的特性，可以用来管理数据、控制不同组件之间的数据流。
在我们的应用中，使用 State 管理应用程序的状态，比如城市名称、温度、日期、湿度等。这些数据因人而异，取决于用户所处的位置。
另一方面，使用 Props 在不同组件之间传递数据。我们在 app.js 中获取天气数据，又在 weather.js 中读取这些数据。记住，使用 props 只能从父组件向子组件传递数据。
我们使用了 React Hooks
如果使用过类组件（class component），那么你肯定了解生命周期方法（life-cycle methods）。如果没用过的话，可以把它们理解为一些在页面渲染或重新渲染是执行的方法。但是我们不能在函数组件（functional component）中使用生命周期方法，因为它们是专门为类组件设计的。
所以，使用 React Hooks 来替代。在我们的应用中用到了两个 hook，一个是用来管理应用 state 的 useState，另一个是用来在页面渲染或加载时执行一些任务的 useEffect。
我们尝试了 Semantic UI
Semantic UI 是为 React 设计的库，它提供了许多出色的组件。
朋友们，以上就是本文的全部内容了。你可以试着为这个应用添加更多特性，比如未来 5 天预报、图标说明等。
想要进一步了解的话，可以查看项目代码。
不断尝试，快乐学习！
原文链接：https://www.freecodecamp.org/news/learn-react-by-building-a-weather-app/
作者：Nishant Kumar
译者：Humilitas
················· 若川出品 ·················
今日话题
今天群里有小伙伴以为我是全职运营公众号了，我说那不得饿死，我的本职工作和大家一样是公司写代码呀，业余时间运营的公众号，目前公众号有些收入，有了收入也会给大家送送书和一些福利。收入来源主要来自平时接的优质广告推文，如果你刚好感兴趣可以报名领取学习等，这是对我最大的支持，不感兴趣划走不看即可。欢迎分享、收藏、点赞我的公众号文章~
一个愿景是帮助5年内前端人走向前列的公众号
