mking / react-hn Goto Github PK
View Code? Open in Web Editor NEWLearn React by building the Hacker News front page
Learn React by building the Hacker News front page
getTitle
from js/NewsItem.js
isn't clearly specified in the note above the NewsItem subtext section.
Currently someone would have to either move the rendered code up to the getTitle
method before going through the section, or they would have to scroll back through 2 previous sections to piece together the code.
I think it could be done more clearly by including the whole method code in the NewsItem subtext section
getTitle: function () {
return (
<div className="newsItem-title">
<a className="newsItem-titleLink" href={this.props.item.url}>{this.props.item.title}</a>
<span className="newsItem-domain">
({this.getDomain()})
</span>
</div>
);
},
This command doesnt work anymore.
watchify -v -o build/js/NewsItemTest.js js/NewsItemTest.js
I get an:
Error: Parsing file /Users/Chinedum/Documents/Development/Mini-Projects/hackernews/js/newsItemTest.js: Unexpected token (11:15)
Here is my newsItemTest.js file:
var $ = require('jquery');
var NewsItem = require('./newsItem');
var React = require('react');
$.ajax({
url: '/json/sample.json'
}).then(function (items) {
// Log the data so we can inspect it in the developer console.
console.log('items', items);
// Use a fake rank for now.
React.render(<NewsItem item={items[0]} rank={1}/>, $('#content')[0]);
});
when I finished the NewsItem Title, It does not work as you show , there is nothing in my console. The console.log("items",item) doesn't work, I do not know why.
The .ajax call was sending a parse error for me, never calling the .then block.
Here is my corrected version of the .json file, it worked for me:
[
{
"by": "jamesisaac",
"id": 8805053,
"kids": [
8805325,
8805679,
8805195,
8805408,
8805681,
8805650,
8805643,
8805577,
8805469,
8805204,
8805222,
8805498,
8805190,
8805304,
8805569,
8805328,
8805478,
8805350,
8805186,
8805432,
8805318,
8805480,
8805320,
8805601,
8805106
],
"score": 167,
"text": "",
"time": 1419737448,
"title": "Look, no hands",
"type": "story",
"url": "http://looknohands.me/"
},
{
"by": "jcr",
"id": 8805606,
"score": 10,
"text": "",
"time": 1419750879,
"title": "Psychologists Strike a Blow for Reproducibility",
"type": "story",
"url": "http://www.nature.com/news/psychologists-strike-a-blow-for-reproducibility-1.14232/"
},
{
"by": "lelf",
"id": 8802424,
"kids": [
8802475,
8804091,
8802511,
8802500,
8805677,
8802481,
8804771,
8802746,
8804040,
8803150,
8805382,
8802739,
8802597,
8802644,
8802987,
8802722,
8805123,
8805545,
8802484,
8802716,
8802505,
8802687,
8805135,
8803538,
8804569,
8804707,
8802504,
8802499,
8803836,
8803653,
8802781,
8802613,
8803595,
8803216,
8804402,
8802626,
8803875,
8804191,
8802491,
8804898,
8804004,
8803701,
8804551,
8802522,
8802570,
8802877,
8802657,
8802533,
8802636,
8802659,
8802537,
8802827,
8802774,
8803511,
8802905,
8802550,
8802601,
8803205,
8804487,
8802554,
8803290,
8803152,
8804425,
8802686,
8802557,
8802478,
8803004,
8802480,
8804231,
8802494,
8803114,
8802488,
8803737,
8802553,
8804442,
8802816,
8804240,
8803715,
8803112,
8802831,
8803018,
8802498,
8803555,
8803592,
8803231
],
"score": 608,
"text": "",
"time": 1419685280,
"title": "Adblock Plus is probably the reason Firefox and Chrome are such memory hogs",
"type": "story",
"url": "http://www.extremetech.com/computing/182428-ironic-iframes-adblock-plus-is-probably-the-reason-firefox-and-chrome-are-such-memory-hogs"
},
{
"by": "gscott",
"id": 8804127,
"kids": [
8805695,
8804783,
8804448,
8804580,
8805479,
8805141,
8804363,
8804561,
8805227,
8804582,
8804937,
8804696
],
"score": 120,
"text": "",
"time": 1419717862,
"title": "How Colonel Sanders Became Father Christmas in Japan",
"type": "story",
"url": "http://talkingpointsmemo.com/ts/kfc-christmas-in-japan-colonel-sanders-history-12-23-2014"
},
{
"by": "getdavidhiggins",
"id": 8805039,
"kids": [
8805113,
8805501,
8805231
],
"score": 34,
"text": "",
"time": 1419736952,
"title": "Redesiging a Broken Internet: Cory Doctorow [video]",
"type": "story",
"url": "https://www.youtube.com/watch?v=_J_9EFGFR-Y"
},
{
"by": "davidbarker",
"id": 8804691,
"kids": [
8805070,
8805429,
8805035,
8804964
],
"score": 54,
"text": "",
"time": 1419729238,
"title": "A Primer on Bézier Curves (2013)",
"type": "story",
"url": "http://pomax.github.io/bezierinfo/"
},
{
"by": "nkurz",
"id": 8804961,
"kids": [
8805214,
8805634,
8805248,
8805541
],
"score": 27,
"text": "",
"time": 1419734983,
"title": "How Google Cracked House Number Identification in Street View",
"type": "story",
"url": "http://www.technologyreview.com/view/523326/how-google-cracked-house-number-identification-in-street-view/"
},
{
"by": "superfx",
"id": 8804824,
"score": 10,
"text": "",
"time": 1419731802,
"title": "Jeff Hawkins: Brains, Data, and Machine Intelligence [video]",
"type": "story",
"url": "https://www.youtube.com/watch?v=cz-3WDdqbj0"
},
{
"by": "danso",
"id": 8802676,
"kids": [
8803169,
8803141,
8804121,
8803753,
8803115,
8803523,
8804504,
8804102,
8803157,
8803733
],
"score": 240,
"text": "",
"time": 1419691704,
"title": "The Wire in HD",
"type": "story",
"url": "http://davidsimon.com/the-wire-hd-with-videos/"
},
{
"by": "theoutlander",
"id": 8804909,
"kids": [
8805693,
8805550
],
"score": 23,
"text": "",
"time": 1419733513,
"title": "Chicago gave hundreds of high-risk kids a job; violent crime arrests plummeted",
"type": "story",
"url": "http://www.washingtonpost.com/blogs/wonkblog/wp/2014/12/26/chicago-gave-hun…t-crime-arrests-plummeted/?Post+generic=%3Ftid%3Dsm_twitter_washingtonpost"
},
{
"by": "moe",
"id": 8803998,
"kids": [
8804028,
8804859,
8804528,
8804521,
8804591
],
"score": 63,
"text": "Tobias Engel demonstrates (amongst other things):
* How to find out the phone numbers of nearby cellphones
* How to track the location of a cellphone that you only know the phone number of
* How intercept outgoing calls of nearby cellphones",
"time": 1419715606,
"title": "SS7: Locate. Track. Manipulate [video]",
"type": "story",
"url": "http://streaming.media.ccc.de/relive/6249/"
},
{
"by": "jwatte",
"id": 8803235,
"kids": [
8803652,
8804123,
8804262,
8804421,
8804287,
8804144,
8803910
],
"score": 114,
"text": "",
"time": 1419702205,
"title": "The Real-time Web: How to Get Millisecond Updates with REST",
"type": "story",
"url": "http://engineering.imvu.com/2014/12/27/the-real-time-web-in-rest-services-at-imvu/"
},
{
"by": "pmoriarty",
"id": 8803498,
"kids": [
8804214,
8805055,
8804229,
8804041,
8804008,
8804753,
8804990,
8804173,
8804042,
8804997,
8803959,
8804450
],
"score": 91,
"text": "",
"time": 1419706531,
"title": "Masscan: Scan the entire Internet in under 5 minutes",
"type": "story",
"url": "https://github.com/robertdavidgraham/masscan"
},
{
"by": "Thevet",
"id": 8804296,
"kids": [
8804610,
8805631,
8804717,
8804483,
8804874,
8804748,
8804475,
8804914,
8804447,
8804790,
8805257,
8804623,
8805051
],
"score": 41,
"text": "",
"time": 1419721241,
"title": "Home for the holidays, and for a 20-year-old issue of PC Magazine",
"type": "story",
"url": "http://www.theverge.com/tldr/2014/12/26/7451295/home-for-the-holidays-and-for-a-20-year-old-issue-of-pc-magazine"
},
{
"by": "lkrubner",
"id": 8803101,
"kids": [
8805105,
8805658,
8804495,
8803794,
8804347,
8805289,
8805524,
8804793,
8804247,
8804968,
8804106,
8805271,
8804665,
8805031,
8804642,
8805434,
8804814,
8803946,
8804259,
8804826,
8804875,
8804013,
8803833
],
"score": 89,
"text": "",
"time": 1419699685,
"title": "When rational thinking is correlated with intelligence the correlation is modest",
"type": "story",
"url": "http://www.scientificamerican.com/article/rational-and-irrational-thought-the-thinking-that-iq-tests-miss/"
},
{
"by": "ColinWright",
"id": 8803138,
"kids": [
8805684,
8803829,
8805200,
8803761,
8804051,
8804965,
8804311
],
"score": 96,
"time": 1419700378,
"title": "Apollo 11 Flight Plan – Final [pdf]",
"type": "story",
"url": "https://www.hq.nasa.gov/alsj/a11/a11fltpln_final_reformat.pdf"
},
{
"by": "r0h1n",
"id": 8805394,
"score": 7,
"text": "",
"time": 1419744647,
"title": "The Slow Death of ‘Do Not Track’",
"type": "story",
"url": "http://nytimes.com/2014/12/27/opinion/the-slow-death-of-do-not-track.html"
},
{
"by": "waffle_ss",
"id": 8804624,
"kids": [
8804895,
8804788,
8804923,
8804784,
8805077,
8805691,
8804729,
8804989,
8804931,
8804763,
8804940,
8804780,
8804764,
8804868,
8804956,
8804982,
8804935
],
"score": 150,
"text": "",
"time": 1419727453,
"title": "James Golick has died",
"type": "story",
"url": "https://twitter.com/jill380/status/548978785404874753"
},
{
"by": "lelf",
"id": 8802290,
"kids": [
8805536,
8803376,
8803757,
8803307,
8803438,
8804667,
8803619,
8803647,
8804264,
8804609,
8804218,
8804222,
8803633
],
"score": 91,
"time": 1419678666,
"title": "Patients do better when cardiologists are away at academic meetings",
"type": "story",
"url": "http://theincidentaleconomist.com/wordpress/patients-do-better-when-cardiologists-are-away-at-academic-meetings/"
},
{
"by": "MichaelAO",
"id": 8801616,
"kids": [
8801839,
8803710,
8802569,
8801827,
8802483,
8804177,
8801852,
8801823,
8802186,
8802059,
8802072,
8803818,
8802058,
8801819,
8802178,
8801828,
8801973
],
"score": 240,
"text": "",
"time": 1419652028,
"title": "Slow, flexible and cheap: Six years of development to create a rubber hexagon",
"type": "story",
"url": "https://medium.com/dome-kit/slow-flexible-cheap-5598ca91fb38"
},
{
"by": "frostmatthew",
"id": 8804934,
"kids": [
8805042,
8805075,
8805120,
8805591,
8805509,
8805056,
8805084,
8805556,
8805224,
8805089,
8805187,
8805061,
8805274,
8805101,
8805193,
8805463,
8805064,
8805338,
8805109,
8805063,
8805071,
8805067
],
"score": 165,
"text": "",
"time": 1419734117,
"title": "On Immigration, Engineers Simply Don’t Trust VCs",
"type": "story",
"url": "http://techcrunch.com/2014/12/27/on-immigration-engineers-simply-dont-trust-vcs/"
},
{
"by": "sanxiyn",
"id": 8802425,
"kids": [
8805417,
8802961,
8803240
],
"score": 116,
"text": "",
"time": 1419685288,
"title": "Robdns – A fast DNS server based on C10M principles",
"type": "story",
"url": "https://github.com/robertdavidgraham/robdns"
},
{
"by": "Petiver",
"id": 8805487,
"score": 3,
"text": "",
"time": 1419747147,
"title": "The Treasure of Nagyszentmiklós",
"type": "story",
"url": "http://en.wikipedia.org/wiki/Treasure_of_Nagyszentmikl%C3%B3s"
},
{
"by": "carljoseph",
"id": 8802485,
"kids": [
8803927,
8805337,
8803869,
8803739,
8804304,
8804966,
8804031,
8803901,
8804886,
8803763,
8805515,
8803577,
8804668,
8804224
],
"score": 76,
"text": "",
"time": 1419687337,
"title": "The Software Scientist",
"type": "story",
"url": "http://www.evanmiller.org/the-software-scientist.html"
},
{
"by": "Vigier",
"id": 8804752,
"score": 7,
"text": "",
"time": 1419730398,
"title": "House Perfect: Is the Ikea Ethos Comfy or Creepy? (2011)",
"type": "story",
"url": "http://www.newyorker.com/magazine/2011/10/03/house-perfect"
},
{
"by": "sethbannon",
"id": 8803844,
"kids": [
8805605,
8805100,
8804211,
8804986,
8804727,
8804055,
8804361,
8805340,
8804301,
8804680,
8804268,
8804225,
8804058,
8804305,
8804379
],
"score": 59,
"text": "",
"time": 1419712871,
"title": "When you have to wake up earlier than usual",
"type": "story",
"url": "http://blog.42floors.com/waking-up-early/"
},
{
"by": "wslh",
"id": 8804979,
"score": 5,
"text": "",
"time": 1419735352,
"title": "How movies embraced Hinduism",
"type": "story",
"url": "http://www.theguardian.com/film/2014/dec/25/movies-embraced-hinduism"
},
{
"by": "aestetix",
"id": 8802138,
"kids": [
8802393,
8802343,
8802215,
8802437,
8802493,
8803188,
8802357,
8804415,
8802383,
8802319,
8802397,
8803608,
8802610,
8802286,
8802197,
8802329,
8802285,
8802271,
8802330
],
"score": 157,
"text": "",
"time": 1419671428,
"title": "31C3 Streaming: Saal 1 – SD Video",
"type": "story",
"url": "http://streaming.media.ccc.de/saal1/"
},
{
"by": "diafygi",
"id": 8803118,
"kids": [
8803351,
8804151,
8803613,
8803234,
8803409,
8803466,
8803454,
8803396,
8803395,
8803413,
8803381,
8803427,
8803926,
8803416,
8803369,
8803587,
8803402,
8803974,
8804261,
8804322,
8804245,
8803140,
8803340,
8803424,
8803897,
8803357,
8803363,
8804917
],
"score": 241,
"text": "",
"time": 1419700057,
"title": "Many Android bugs with 500+ stars closed as obsolete on December 25",
"type": "story",
"url": "https://code.google.com/p/android/issues/list?can=1&q=status:Obsolete&sort=-stars"
},
{
"by": "mrry",
"id": 8802392,
"kids": [
8802474
],
"score": 98,
"text": "",
"time": 1419684021,
"title": "Functional Operating System and Security Protocol Engineering",
"type": "story",
"url": "http://decks.openmirage.org/31c3#/"
}
]
If "margin-left: 40px" written in the ".newsList-more", the "More" will locate at the bottom of the "Rank", rather than the bottom of news list. So it should be put in ".newsList-moreLink" to make it at right place like official HackerNews site. By the way, this tutorial is the best react tutorial I've seen from the past year, thank you.
If you are willing to receive pull requests, I will submit one.
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.