thejian / build-a-hn-front-page Goto Github PK
View Code? Open in Web Editor NEWLearn React & Webpack by building a hacker news front page
Learn React & Webpack by building a hacker news front page
接下来测试一下开发环境是否搭建完成.
打开 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'
看了教程受益非浅,十分感谢!只是有个问题请教一下:我按照教程操作,可是图片路径就是没法正确显示,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>
);
}
}
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/也是提示服务没启动 请问这个问题遇到过吗
因为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)就会报错,我就修改代码成为
重新打包运行之后正确显示了来源地址。
不知道是不是这块儿代码确实有问题,还是我理解有误。
(我也是刚刚开始学,有不对的地方请指出,谢谢)
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>
);
}
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.