在你的机器上运行我们的天气应用
我们将介绍如何在你的机器上运行应用程序,以便你可以对应用进行测试。
先决条件
Node.js 是一个用于终端的 JavaScript 运行时环境。你不必过于担心它的细节,但它会被我们后续使用的某些工具所依赖。如果你尚未安装,请在终端中运行 node -v 命令来检查:如果能输出版本号,说明已安装;否则请前往 nodejs.org,按照指引安装最新版本(当前写作时为 v6 版本),之后即可正常使用!
初步步骤
Facebook 最近开源了一个非常实用的小工具,名为 create-react-app,它能让我们轻松快速地启动 React 应用!该工具内置了所有必要的构建工具和代码转换配置,让你可以专注于开发本身。
现在我们通过 npm 来安装它:
1npm install -g create-react-app
安装完成后,你就可以在终端中使用 create-react-app 命令了!接下来创建我们的简易天气应用:
1create-react-app weather-app
create-react-app的参数(此处为weather-app)指定了要创建的文件夹名称。因为我们正在开发一个天气应用,所以命名为weather-app是个不错的选择!
安装 npm 模块
在课程过程中,你可能已经注意到我们使用了一些 npm 模块。现在请在你的应用目录中安装这些模块:
1npm install --save redux react-redux 2npm install --save redux-thunk 3npm install --save immutable
接下来是最具挑战性的部分(开玩笑啦 : ))。
将下面文件中的代码复制,并粘贴到对应的文件中。index.js 文件已经存在,你需要手动创建其他文件,例如 App.js、Plot.js、reducers.js、actions.js 等。
No configuration found for ID: d4de37e7e1ba025582e0174eaadd01628c42a0b6b951bd5f52811c25c126ec44
幸运的是,create-react-app 内置了一个简单的开发服务器,因此无需手动打开 index.html 文件。你只需在 weather-app 目录下运行 npm run start,就能在本地访问应用,地址为 localhost:3000!
现在你的应用已经在本地运行起来了,接下来我们可以开始测试它了。