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

展示

PC端

移动端

定位

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

//html中
 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=填你自己申请的KEY"></script>
//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
        .get(`https://free-api.heweather.com/v5/weather?city=${city}&key=填自己的KEY`)
        .then(resolve => {
            let data = resolve.data
            return data.status === 'ok' ? data : null
        })
}

CSS用styled-components

好处就是模块化，CSS前缀会在build时自动补全，可以直接用JS操作一些东西.

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

源码，DOME

源码参考github：https://github.com/weblzf/weather-react-learn
DOME：http://liuzhifei.net/weather/index.html