React/Webpack 入门教程

BerniceKRNX 3年前
   <h2>Learn React & Webpack by building the Hacker News front page</h2>    <p>这是一篇给初学者的教程, 在这篇教程中我们将通过构建一个 Hacker News 的前端页面来学习 React 与 Webpack . 它不会覆盖所有的技术细节, 因此它不会使一个初学者变成大师, 但希望能给初学者一个大致印象.</p>    <p>注意: 这篇文章已经有部分过时,需要等待更新.文章写成时 webpack 版本使用的是 1.x,现在 webpack 默认安装 2.x.</p>    <h2>准备工作</h2>    <ul>     <li> <p>安装 webpack</p> <p>在此之前你应该已经安装了 node.js .</p> <pre>  npm install webpack -g</pre> <p>参数 -g 表示我们将全局(global)安装 webpack, 这样你就能使用 webpack 命令了.</p> <p>webpack 也有一个 web 服务器 webpack-dev-server, 我们也安装上</p> <pre>  npm install webpack-dev-server -g</pre> </li>     <li> <p>webpack 配置文件</p> <p>webpack 使用一个名为 webpack.config.js 的配置文件, 现在在你的项目根目录下创建该文件. 我们假设我们的工程有一个入口文件 app.js , 该文件位于 app/ 目录下, 并且希望 webpack 将它打包输出为 build/ 目录下的 bundle.js 文件. webpack.config.js 配置如下:</p> <pre>  var path = require('path');    module.exports = {    entry: path.resolve(__dirname, 'app/app.js'),    output: {      path: path.resolve(__dirname, 'build'),      filename: 'bundle.js'    }  }</pre> <p>现在让我们测试一下, 创建 app/app.js 文件, 填入一下内容:</p> <pre>  document.write('It works');</pre> <p>创建 build/index.html , 填入以下内容:</p> <pre>  <!DOCTYPE html>  <head>    <meta charset="UTF-8">    <title>Hacker News Front Page</title>  </head>  <body>    <script src="./bundle.js"></script>    </body>  </html></pre> <p>其中 script 引入了 bundle.js , 这是 webpack 打包后的输出文件.</p> <p>运行 webpack 打包, 运行 webpack-dev-server 启动服务器. 访问 <a href="/misc/goto?guid=4959738495207442821" rel="nofollow,noindex">http://localhost:8080/build/index.html</a> , 如果一切顺利, 你会看到打印出了 It works .</p> </li>     <li> <p>配置 package.json</p> <p>在项目根目录下运行 npm init -y 会按照默认设置生成 package.json , 修改 scripts 的键值如下:</p> <pre>  "scripts": {    "start": "webpack-dev-server",    "build": "webpack"  }</pre> <p>现在执行 npm run build 相当于 webpack , npm run start 相当于 webpack-dev-server . 当项目变得相当复杂时, 你可以使用这种技巧隐藏其中的细节.</p> </li>     <li> <p>安装依赖</p> <p>安装 React:</p> <pre>  npm install react react-dom --save</pre> <p>为了简化 AJAX 请求代码, 这里引入 jQuery:</p> <pre>  npm install jquery --save</pre> <p>安装 Babel 的 loader 以支持 ES6 语法:</p> <pre>  npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev</pre> <p>然后配置 webpack.config.js 来使用安装的 loader.</p> <pre>  // webpack.config.js    var path = require('path');    module.exports = {    entry: path.resolve(__dirname, 'app/app.js'),    output: {      path: path.resolve(__dirname, 'build'),      filename: 'bundle.js'    },    module: {      loaders: [      {        test: /\.jsx?$/,        exclude: /node_modules/,        loader: 'babel',        query: {          presets: ['es2015','react']        }      },      ]    }  };</pre> <p>接下来测试一下开发环境是否搭建完成.</p> <p>打开 app.js , 修改内容为:</p> <pre>  // app.js    import $ from 'jquery';  import React from 'react';  import { render } from 'react-dom';    class HelloWorld extends React.Component {    render() {      return (          <div>Hello World</div>          );    }  }    render(<HelloWorld />, $('#content')[0]);</pre> <p>这里组件 HelloWorld 被装载到 id 为 content 的 DOM 元素, 所以相应的需要修改 index.html .</p> <pre>  ...  <body>    <div id="content"></div>    <script src="./bundle.js"></script>    </body>  ...</pre> <p>再次打包运行, 访问 <a href="/misc/goto?guid=4959738495207442821" rel="nofollow,noindex">http://localhost:8080/build/index.html</a> 如果可以看到打印出了 Hello World 那么开发环境就算搭建完成了.</p> </li>    </ul>    <h2>在开始写第一个组件之前 ...</h2>    <p>在开始写第一个组件之前, 让我们分析一下到底我们需要哪些组件.</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/f9ffdd82e87a2d01c12578ae7cd5ee29.png"></p>    <p>上图是的最终效果的部分截图, 我们将其分为几个组件, 用不同颜色的线框标出</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/3aa5bab983689dad68a9f983ef90057c.png"></p>    <p>我们可以看出其中包含以下几个组件.</p>    <ul>     <li>NewsList (蓝色): 所有组件的容器.</li>     <li>NewsHeader (绿色): Logo, 标题, 导航栏等.</li>     <li>NewsItem (红色): 对应每条资讯.</li>    </ul>    <p>把这些组成为一棵组件树.</p>    <ul>     <li>NewsList      <ul>       <li>NewsHeader</li>       <li>NewsItem * n</li>      </ul> </li>    </ul>    <h2>编写大致的模板</h2>    <p>上一节我们知道了整个页面的组件结构, 在这一节我们根据这些结果编写出一个大致的模板. 先在 app 目录下为每个组件建立文件, NewsList.js , NewsHeader.js 和 NewsItem.js .</p>    <pre>  cd app  touch NewsList.js NewsHeader.js NewsItem.js</pre>    <p>编辑 NewsHeader.js</p>    <pre>  // NewsHeader.js    import React from 'react';    export default class NewsHeader extends React.Component {    render() {      return (          <div className="newsHeader">            I am NewsHeader.          </div>          );    }  }</pre>    <p>NewsHeader 组件就先这样, 具体的实现现在先不去考虑, 记得我们现在只是编写一个大致的结构.</p>    <p>同样的, 编辑 NewsItem.js</p>    <pre>  // NewsItem.js    import React from 'react';    export default class NewsItem extends React.Component {    render() {      return (          <div className="newsItem">            I am NewsItem.          </div>          );    }  }</pre>    <p>接着是 NewsList.js , 因为 NewsList 是前两个组件的容器, 所以我们需要引入它们</p>    <pre>  // NewsList.js    import React from 'react';  import NewsHeader from './NewsHeader.js';  import NewsItem from './NewsItem.js';    export default class NewsList extends React.Component {    render() {      return (          <div className="newsList">            <NewsHeader />            <NewsItem />          </div>          );    }  }</pre>    <p>最后修改入口文件 app.js</p>    <pre>  // app.js    import React from 'react'  import { render } from 'react-dom';  import $ from 'jquery';  import NewsList from './NewsList.js';    render(<NewsList />, $('#content')[0]);</pre>    <p>这时访问 <a href="/misc/goto?guid=4959738495207442821" rel="nofollow,noindex">http://localhost:8080/build/index.html</a> 可以看到下图的效果</p>    <p><img src="https://simg.open-open.com/show/cc4eaef547d477769885457c26bc7c89.png"></p>    <p>接下来让我们逐步完善各个组件.</p>    <h2>NewsHeader</h2>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/2b0d36870e49c7713b1807898d91bb9c.png"></p>    <p>整个 NewsHeader 包含了三个部分, 左边的Logo和标题, 中间的导航栏和右边的登录入口.</p>    <p>让我们先从左边的 Logo 和标题开始.</p>    <ol>     <li> <p>Logo 和标题</p> <p>先下载 <a href="https://simg.open-open.com/show/a9f288d674f68f7c9a2fa5704e2ba987.gif" rel="nofollow,noindex">Logo</a></p> <p>在 NewsHeader 组件里新增一个方法 getLogo , 就像下面这样.</p> <pre>  // NewsHeader.js    // ...    export default class NewsHeader extends React.Component {   //...   getLogo() {     /* Do Something */   }   //...  }</pre> <p>这个方法返回一个包含 Logo 的子组件.</p> <pre>  getLogo() {   return (      <div className="newsHeader-logo">        <a href="https://news.ycombinator.com/"><img src="PATH_TO_IMAGE" /></a>      </div>      );  }</pre> <p>这里遇到一个问题, img 的 src 填什么?</p> <p>在前面几节的开发中, 还记得你是怎么引入其他的 js 文件的吗? import . 实际上这是 ES6 的模块系统, 这里的 js 文件作为模块被其他模块引入. 但除了 js 文件, 在开发时我们还会涉及其他的资源文件, 如图像, 字体, 样式等, 它们也需要被模块化. 在这里, 如果 Logo 图片也能被模块化然后引入该多好. 我们需要再次配置 Webpack.</p> <p>安装对应的 loader:</p> <pre>  npm install url-loader file-loader --save-dev</pre> <p>配置 webpack.config.js</p> <pre>  //...     loaders: [   {     test: /\.jsx?$/,     exclude: /node_modules/,     loader: 'babel',     query: {       presets: ['es2015','react']     }   },   {     test: /\.(png|jpg|gif)$/,     loader: 'url-loader?limit=8192' // 这里的 limit=8192 表示用 base64 编码 <= 8K 的图像   }   ]    //...</pre> <p>然后回到 NewsHeader.js</p> <p>这时候你就可以使用 import 引入图片了.</p> <pre>  import imageLogo from './y18.gif';</pre> <p>然后像这样使用.</p> <pre>  <img src={imageLogo} /></pre> <p>注意这里用 {} 包起来, 这样其中的内容会作为表达式.</p> <p>getLogo 方法完成了, 再写一个 getTitle 方法.</p> <pre>  getTitle() {   return (       <div className="newsHeader-title">         <a className="newsHeader-textLink" href="https://news.ycombinator.com/">Hacker News</a>       </div>       );  }</pre> <p>修改 render 方法, 引用我们刚刚写好的那两个方法.</p> <pre>  render() {   return (       <div className="newsHeader">         {this.getLogo()}         {this.getTitle()}       </div>       );  }</pre> <p>还是一样别忘了 {} .</p> <p>最后我们需要添加样式, 还是回到刚刚的问题, 怎么引入样式?</p> <p>我们也需要将样式模块化.</p> <p>安装相应的 loader:</p> <pre>  npm install css-loader style-loader --save-dev</pre> <p>css-loader 处理 css 文件中的 url() 表达式.</p> <p>style-loader 将 css 代码插入页面中的 style 标签中.</p> <p>在 webpack.config.js 中配置新的 loader.</p> <pre>  {   test: /\.css$/,   loader: 'style!css'  }</pre> <p>新建一个 css 文件 NewsHeader.css</p> <pre>  .newsHeader {   align-items: center;   background: #ff6600;   color: black;   display: flex;   font-size: 10pt;   padding: 2px;  }    .newsHeader-logo {   border: 1px solid white;   flex-basis: 18px;   height: 18px;  }    .newsHeader-textLink {   color: black;   text-decoration: none;  }    .newsHeader-title {   font-weight: bold;   margin-left: 4px;  }</pre> <p>然后在 NewsHeader.js 中引入它</p> <pre>  import './NewsHeader.css';</pre> <p>再建立一个全局的 css 文件 app.css</p> <pre>  body {   font-family: Verdana, sans-serif;  }</pre> <p>然后在 app.js 中引入</p> <pre>  import './app.css'</pre> <p>打包运行看看吧.</p> </li>     <li> <p>导航栏 接下来是导航栏, 也就是中间那部分.</p> <p>回到 NewsHeader.js , 增加一个 getNav 方法.</p> <pre>  getNav() {   var navLinks = [   {     name: 'new',     url: 'newest'   },   {     name: 'comments',     url: 'newcomments'   },   {     name: 'show',     url: 'show'   },   {     name: 'ask',     url: 'ask'   },   {     name: 'jobs',     url: 'jobs'   },   {     name: 'submit',     url: 'submit'   }   ];     return (       <div className="newsHeader-nav">         {           navLinks.map(function(navLink) {             return (                 <a key={navLink.url} className="newsHeader-navLink newsHeader-textLink" href={"https://news.ycombinator.com/" + navLink.url} >                   {navLink.name}                 </a>                 );           })         }       </div>       );  }</pre> <p>同样, 记得在 render 方法中引用</p> <pre>  render() {   return (       <div className="newsHeader">         {this.getLogo()}         {this.getTitle()}         {this.getNav()}       </div>       );  }</pre> <p>添加样式.</p> <pre>  .newsHeader-nav {   flex-grow: 1;   margin-left: 10px;  }    .newsHeader-navLink:not(:first-child)::before {   content: ' | ';  }</pre> </li>     <li> <p>登录入口</p> <p>增加一个 getLogin 方法.</p> <pre>  getLogin() {   return (       <div className="newsHeader-login">         <a className="newsHeader-textLink" href="https://news.ycombinator.com/login?goto=news">login</a>       </div>       );  }</pre> <p>在 render 中引用</p> <pre>  render() {   return (       <div className="newsHeader">         {this.getLogo()}         {this.getTitle()}         {this.getNav()}         {this.getLogin()}       </div>       );  }</pre> <p>更新样式</p> <pre>  .newsHeader-login {   margin-right: 5px;  }</pre> </li>    </ol>    <p>至此整个 NewsHeader 就完成了, 你应该能看到如本节初所展示的效果.</p>    <h2>NewsItem</h2>    <p><img src="https://simg.open-open.com/show/9e42577b758bb200f4a05c5f16d774f2.png"></p>    <p>如图, 每条资讯对应着这样一个 NewsItem , 本节我们将编写 NewsItem 组件.</p>    <p>可以看到, 一个 NewsItem 包含了资讯的标题, 来源地址, 什么时候发布的以及评论数等等. 它依赖于传入的数据, 那么怎么传入数据呢?</p>    <p>对于父子组件间的通信, 可以使用属性传递. 子组件可以使用 this.props 访问到父组件传入的属性数据.</p>    <p>回到 NewsList 组件, 它作为 NewsItem 的父组件可以使用如下方式传入数据.</p>    <pre>  <NewsItem item={data} /></pre>    <p>NewsItem 中可以使用 this.props.item 访问 item 属性.</p>    <p>像这样我们只需要将资讯数据作为属性传入, 在 NewsItem 中就能获取到了. 让我们开始做吧!</p>    <ol>     <li> <p>NewsItem 标题</p> <p>先来简单点的, 第一步我们只获取并显示标题.</p> <p>修改 NewsList.js</p> <pre>  render() {   var testData = {     "by" : "bane",     "descendants" : 49,     "id" : 11600137,     "kids" : [ 11600476, 11600473, 11600501, 11600463, 11600452, 11600528, 11600421, 11600577, 11600483 ],     "score" : 56,     "time" : 1461985332,     "title" : "Yahoo's Marissa Mayer could get $55M in severance pay",     "type" : "story",     "url" : "http://www.latimes.com/business/technology/la-fi-0429-tn-marissa-mayer-severance-20160429-story.html"   };     return (       <div className="newsList">         <NewsHeader />         <NewsItem item={testData} rank={1} />       </div>       );  }</pre> <p>这里我们声明一个 testData 作为测试数据传入 NewsItem.</p> <p>修改 NewsItem.js</p> <pre>  render: function () {   return (     <div className="newsItem">       <a className="newsItem-titleLink" href={this.props.item.url}>{this.props.item.title}</a>     </div>   );  }</pre> <p>在这里使用 this.props.item 访问 item 属性.</p> <p>建立 NewsItem.css</p> <pre>  .newsItem {   color: #828282;   margin-top: 5px;   align-items: baseline;   display: flex;    }    .newsItem-titleLink {   color: black;   font-size: 10pt;   text-decoration: none;  }</pre> <p>在 NewsItem.js 中引入</p> <pre>  import './NewsItem.css';</pre> <p>运行看看效果, 显示的标题应该和传入的测试数据中的一样.</p> </li>     <li> <p>NewsItem 来源地址</p> <p>我们现在添加来源地址到标题的末尾. 先在 NewsItem.js 中引入 url 模块</p> <pre>  import URL from 'url';</pre> <p>然后增加一个 getDomain 方法.</p> <pre>  getDomain() {   return URL.parse(this.props.item.url).hostname;  }</pre> <p>然后再增加一个 getTitle 方法, 这个方法会返回一个包含了标题(我们上一节做的事)和地址的组件.</p> <pre>  getTitle() {   return (       <div className="newsItem-title">         <a className="newsItem-titleLink" href={this.props.item.url}>{this.props.item.title}</a>         <span className="newsItem-domain"><a href={'https://news.ycombinator.com/from?site=' + this.getDomain()}>({this.getDomain()})</a></span>       </div>       );  }</pre> <p>修改 render</p> <pre>  render() {   return (       <div className="newsItem">         <div className="newsItem-itemText">           {this.getTitle()}         </div>       </div>       );  }</pre> <p>增加样式</p> <pre>  .newsItem-itemText {   flex-grow: 1;  }    .newsItem-domain {   font-size: 8pt;   margin-left: 5px;  }    .newsItem-domain > a {   color: #828282;   text-decoration: none;  }</pre> <p>好了, 看起来不错, 但是有个问题, 这个项目最终需要从 Hacker News 的 API 取得资讯数据, 而其中有些是没有 url 属性的, 看看我们的 getTitle() 方法, 我们似乎忽略了这个特例, 让我们做些修改.</p> <pre>  getTitle() {   return (       <div className="newsItem-title">         <a className="newsItem-titleLink" href={this.props.item.url ? this.props.item.url : 'https://news.ycombinator.com/item?id=' + this.props.item.id}>{this.props.item.title}</a>         {           this.props.item.url && <span className="newsItem-domain"><a href={'https://news.ycombinator.com/from?site=' + this.getDomain()}>({this.getDomain()})</a></span>         }       </div>       );  }</pre> <p>试着去掉 testData 的 url 属性, 看看是不是一切正常.</p> </li>     <li> <p>NewsItem 其余部分</p> <p>我们现在加上其余部分, 你已经看过了前两节, 这节应该是没有什么难度的, 我们快速带过.</p> <p>下载 <a href="https://simg.open-open.com/show/7e6bfa0d7419ef49e2a58c199702f9fa.gif" rel="nofollow,noindex">grayarrow.gif</a> , 在 NewsItem.js 中引入</p> <pre>  import ImageGrayArrow from './grayarrow.gif';</pre> <p>修改 NewsItem.js</p> <pre>  getCommentLink() { // 评论链接   var commentText = 'discuss';   if(this.props.item.kids && this.props.item.kids.length) {     commentText = this.props.item.kids.length + ' comment';   }     return (       <a href={'https://news.ycombinator.com/item?id=' + this.props.item.id}>{commentText}</a>       );  }    getSubtext() { // 分数, 作者, 时间, 评论数   return (       <div className="newsItem-subtext">         {this.props.item.score} points by <a href={'https://news.ycombinator.com/user?id=' + this.props.item.by}>{this.props.item.by}</a> {Moment.utc(this.props.item.time * 1000).fromNow()} | {this.getCommentLink()}       </div>       );  }    getRank() { // 序号   return (       <div className="newsItem-rank">         {this.props.rank}.       </div>       );  }    getVote() { // 投票   return (       <div className="newsItem-vote">         <a href={'https://news.ycombinator.com/vote?for='+ this.props.item.id + '&dir=up&goto=news'}>           <img src={ImageGrayArrow} width="10" />         </a>       </div>       );  }    render() {   return (       <div className="newsItem">         {this.getRank()}         {this.getVote()}         <div className="newsItem-itemText">           {this.getTitle()}           {this.getSubtext()}         </div>       </div>       );  }</pre> <p>这里计算时间间距我们使用了 Moment , 如果你要使用你需要安装并引入它, 或者使用你喜欢的实现方法.</p> <p>NewItem.css</p> <pre>  .newsItem-rank {   flex-basis: 25px;   font-size: 10pt;   text-align: right;  }    .newsItem-vote {   flex-basis: 15px;   text-align: center;  }    .newsItem-subtext {   font-size: 7pt;  }    .newsItem-subtext > a {   color: #828282;   text-decoration: none;  }    .newsItem-subtext > a:hover {   text-decoration: underline;  }</pre> </li>    </ol>    <h2>NewsList</h2>    <p>上一节中为了测试 NewsItem , 我们定义了一个测试数据 testData , NewsList 中也只有一个 NewsItem , 而真实的情况不会只有一条资讯, 而应该是一组资讯, 每一条对应有一个 NewsItem , 本节中我们来实现这个功能.</p>    <p>首先我们确定传入的数据是一个数组, 其中每一个元素都是一条资讯, 至于这个数据由哪里传入, 怎么生成我们先不关心, 但我们可以用 this.props.items 获取到. NewsList 对于其中的每一个元素都生成一个 NewsItem .</p>    <p>下面是修改完的 render</p>    <pre>  render() {      return (          <div className="newsList">            <NewsHeader />            <div className="newsList-newsItem">              {                (this.props.items).map(function(item, index) {                  return (                      <NewsItem key={item.id} item={item} rank={index+1} />                      );                })              }            </div>          </div>          );    }</pre>    <p>新建样式 NewsList.css</p>    <pre>  .newsList {    background: #f6f6ef;    margin-left: auto;    margin-right: auto;    width: 85%;  }</pre>    <p>目前的代码是没法运行的, 我们还没有取得数据传入给 NewsList , 这将在下一节完善.</p>    <h2>Hacker News API</h2>    <p>本节中我们使用 Hacker News API 来获取数据, 具体请参考 API 文档.</p>    <p>app.js</p>    <pre>  function get(url) {    return Promise.resolve($.ajax(url));  }    get('https://hacker-news.firebaseio.com/v0/topstories.json').then( function(stories) {    return Promise.all(stories.slice(0, 30).map(itemId => get('https://hacker-news.firebaseio.com/v0/item/' + itemId + '.json')));  }).then(function(items) {    render(<NewsList items={items} />, $('#content')[0]);  }).catch(function(err) {    console.log('error occur', err);  });</pre>    <p>items 就是处理完后的数据, 一个由资讯数据组成的数组, 我们将它作为属性传入 NewsList .</p>    <p>至此, 你已经完成了 Hacker News Front Page, 就像开头所说的, 这篇教程不会使你精通, 但你应该对 React / Webpack / 模块化 有了大概的了解.</p>    <h2>下一步</h2>    <p>现在你已经对 React&Webpack 有了基本的了解了, 下面有一些阅读资源可以帮助你进一步深入.</p>    <ul>     <li><a href="/misc/goto?guid=4959738495335976332" rel="nofollow,noindex">Beginner's guide to Webpack</a></li>     <li><a href="/misc/goto?guid=4959645433631437206" rel="nofollow,noindex">Webpack How To</a></li>     <li><a href="/misc/goto?guid=4959645526507120021" rel="nofollow,noindex">Webpack doc</a></li>     <li><a href="/misc/goto?guid=4958874692283405843" rel="nofollow,noindex">React doc</a> <a href="/misc/goto?guid=4959646963323822460" rel="nofollow,noindex">(中文版)</a></li>     <li><a href="/misc/goto?guid=4959738495525820052" rel="nofollow,noindex">survivejs</a></li>    </ul>    <p> </p>    <p> </p>    <p> </p>