mking / react-hn Goto Github PK

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.

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.

If you are willing to receive pull requests, I will submit one.

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]);
});

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#/"
}
]