thejian / build-a-hn-front-page Goto Github PK

因为app.js在当前app的文件夹下。如果entry path书写为app/app.js
在app目录下打包的时候打包目录会被映射为xxx/app/app/app.js

所以entry path应该书写为./app.js

NewsItem中第2项NewsItem 来源地址最后去掉了testdata里面的url之后，重新打包看到网页中没有出现来源地址，我修改下面这两部分代码之后可以了。
这是原文中的代码


最终的页面上并没有出现第一个代码块写的那个span标签，我觉得是因为｛｝包含的代码会被解析成js代码，并不会展示出来，然后我把｛this.props.item.url && ｝删除了，只留下了后面的span标签。
再次运行之后，报错，我查看了以下报错原因是在上面的第二张图片中，因为我们已经删除了testdata里面的url，所以URL.parse(undefined)就会报错，我就修改代码成为

重新打包运行之后正确显示了来源地址。
不知道是不是这块儿代码确实有问题，还是我理解有误。
（我也是刚刚开始学，有不对的地方请指出，谢谢）

看了教程受益非浅，十分感谢！只是有个问题请教一下：我按照教程操作，可是图片路径就是没法正确显示，url-loader file-loader已安装，webpack.config.js也配置正确，请赐教！
import React from "react";

import imageLogo from "./y18.gif";

export default class NewsHeader extends React.Component{

    getLogo(){

        return (

            <div className="newsHeader-logo">

                <a href="#"><img src={imageLogo} /></a>

            </div>

        );

    }

    getTitle(){

        return (

            <div className="newsHeader-title">

                <a class="newsHeader-textLink" href="#">Hacker News</a>

            </div>

        );

    }

    render(){

        return (

            <div className="NewsHeader">

            {this.getLogo()}

            {this.getTitle()}

            </div>

        );

    }

}

这是webpack的配置：

这是什么情况呢？配置错了么？

接下来测试一下开发环境是否搭建完成.

打开 app.js, 修改内容为:

// app.js

import React from 'react';
import { render } from 'react-dom';

class HelloWorld extends React.Component {
render() {
return (

render(, $('#content')[0]);

少写了import $ from 'jquery'

我是将源码运行webpack-dev-server命令后出现错误

请问怎么解决？

this.getLogo is not a function

// NewsHeader.js

import React from 'react';
import imageLogo from './y18.gif';
import './NewsHeader.css';

export default class NewsHeader extends React.Component {
    getLogo() {
        var url='https://news.ycombinator.com/';
        return (
            <div className="newsHeader1-logo">
                <a href={url}><img src={imageLogo} /></a>
            </div>
        );
    };
    getTitle() {
        var url='https://news.ycombinator.com/';
        return (
            <div className="newsHeader-title">
                <a className="newsHeader-textLink" href={url}>Hacker News</a>
            </div>
        );
    };
    render() {
        return (
            <div className="newsHeader">
                I am NewsHeader.
            </div>
        );
    };
}

// 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="newsHeader">
        {this.getLogo() }
        {this.getTitle() }
      </div>
    );
  }
}

E:\workspace\learnReact\webpackandreact>webpack-dev-server --port 8888
http://localhost:8888/webpack-dev-server/
webpack result is served from /
content is served from E:\workspace\learnReact\webpackandreact
E:\workspace\learnReact\webpackandreact>

我输入命令后 访问http://localhost:8888/webpack-dev-server/ 好像服务没启动，访问http://localhost:8888/也是提示服务没启动 请问这个问题遇到过吗