用create-react-app创建项目
样式用styled-components解决
数据用redux交流
定位用高德地图API
天气数据用和风天气API

展示

定位

在index.html中加入高德地图(key填自己的)

//html中
 <script type="text/javascript" 
//JS中  promise
let AMap = window.AMap
function getLocation() {
    return new Promise((resolve) => {
        AMap.plugin('AMap.CitySearch', function () {
                let citySearch = new AMap.CitySearch()
                citySearch.getLocalCity(function (status, result) {
                    if (status === 'complete' &&
                        result.info === 'OK') {
                        resolve(result)//定位城市
                    } else {
                        resolve(null)
                    }
                })
            }
        )
    })
}

天气数据

//用了axios包发起请求
import axios from 'axios'
function getWeatherInfo(city) {
    return axios          //填自己的KEY
        
        .then(resolve => {
            let data = resolve.data
            return data.status === 'ok' ? data : null
        })
}

CSS用styled-components

JS CSS HTML 整个模块的东西都在一个js文件中，修改和维护很方便操作。

源码，DOME