Code Monkey home page Code Monkey logo

hackernews-client's Introduction

โ›”๏ธ Deprecated

This is the old version of The Road to React with React class components and without React Hooks. Check out the new The Road to React which teaches React Hooks.

The Road to learn React [Book]

Official repository for The Road to learn React. If you want to leave a review, please do it on Amazon or Goodreads.

Translations of the book into Leanpub

The Road to learn React is also available in other languages. Thanks for all translators for their awesome work!

Updates, Help and Support

Contribute

You can help to improve the book by opening Issues and Pull Requests (PR).

You can open up any PR that corrects spelling or explains a certain lesson with more detail. When writing such a technical book, you get fast blind on what needs more explanation and on what is already explained well.

In addition, you can open Issues when you run into problems. In order to make the fix for the Issue as easy as possible, please provide a couple of details such as error log, screenshot, which page of the book it happened, your node version (command line: node -v) and a link to your own repository. Not all of these details are mandatory, but most of them help to fix the Issue and to improve the book.

Thanks a lot for your help!

hackernews-client's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hackernews-client's Issues

Snapshot test fails if we don't use isomorphic-fetch

Error is:

TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror ......

Solution is install isomorphic-fetch:

yarn add isomorphic-fetch

and import it.

import fetch from "isomorphic-fetch";

in App.js.

Wrong Links at the end of Error Handling section in Chapter 3

Links at the end of Error Handling section in Chapter 3 point to commit of Client Cache section.
This patch fixes the problem:

Index: manuscript/chapter3.md
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- manuscript/chapter3.md	(date 1553926587000)
+++ manuscript/chapter3.md	(date 1554154244000)
@@ -1218,8 +1218,8 @@
 
 ### Exercises:
 
-* Confirm your [source code for the last section](http://bit.ly/2HoLAGY)
-  * Confirm the [changes from the last section](http://bit.ly/2HquJnd)
+* Confirm your [source code for the last section](http://bit.ly/2Ukfao7)
+  * Confirm the [changes from the last section](http://bit.ly/2HS0gzu)
 * Read about [React's Error Handling for Components](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html)
 
 ## Axios instead of Fetch

Include use of <label> inside <form> [improved UX]

If you add <label>, this will associate the label "Search" with its input. This creates a "bigger target".

const Search = ({ value, onChange, children }) => (
  <form>
    <label>
      {children}
        <input type="text" value={value} onChange={onChange} />
    </label>
  </form>
);

Use of outline: none [accessibility]

Regarding the Basics in React chapter, Styling Components section:
There are two occurrences of outline: none in index.css. This style choice is problematic for people who navigate with the keyboard. Would you please remove? Thank you.

reference: WCAG Guideline 2.4

UnhandledPromiseRejectionWarning on Node 7.7.2 Bug

Error

npm start:

(node:36647) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: "listener" argument must be a function
(node:36647) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Environment

  1. node -v:
v7.7.2
  1. npm -v:
4.1.2
  1. npm ls react-scripts:
  1. OS:
macOS Sierra version 10.12.5

Setting state directly in componentDidMount

First of all, thank you for this great tutorial. I'm a new learner and it's a great opportunity to see tutorials like yours.

To set searchKey as searchTerm we are setting the state in componentDidMount. But, if we do that first setState triggers the render. After that our ajax call triggers again.

Why don't we set searchKey as DEFAULT_QUERY in the constructor state as we do for searchTerm?

Also our onChange state change triggers render every time, but I think this is out of context right know :) As a new learner I'm looking a neat solution for this.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.