
Show HN: The Road to learn React – Build a Hacker News App on the Way - rwieruch
http://www.robinwieruch.de/the-road-to-learn-react/
======
acemarke
The previous tutorial posts by Robin are fantastic, and cover topics like
React, Redux, MobX, Flow, and ESLint ([0]). This book looks to be even better.
I'm going to preemptively recommend it without having even read it yet,
because I know it'll be extremely well written.

As a similar note and bit of a self-plug: I keep a big list of links to high-
quality tutorials on React, Redux, and related topics, at [1]. Specifically
intended to be a great starting point for anyone trying to learn the
ecosystem, as well as a source of quality info on more advanced topics. I've
also been blogging at [2] on React and Redux usage, and just posted "Practical
Redux Part 5: Loading and Displaying Data" [3], the latest in a tutorial
series intended to demonstrate some intermediate to advanced usages of React
and Redux.

[0] [http://www.robinwieruch.de/](http://www.robinwieruch.de/)

[1] [https://github.com/markerikson/react-redux-
links](https://github.com/markerikson/react-redux-links)

[2] [http://blog.isquaredsoftware.com/](http://blog.isquaredsoftware.com/)

[3] [http://blog.isquaredsoftware.com/2016/12/practical-redux-
par...](http://blog.isquaredsoftware.com/2016/12/practical-redux-
part-5-loading-and-displaying-data/)

~~~
brianyu8
Do you know of any high quality Vue tutorials such as the one in OP?

~~~
rmason
Here's a great series on Vue 2:

[https://www.youtube.com/watch?v=vzSjlLzGB1A&list=PLwAKR305CR...](https://www.youtube.com/watch?v=vzSjlLzGB1A&list=PLwAKR305CRO_1yAao-8aZiQnBqJeyng4O)

Egghead also has got a Vue 2 series but I've yet to watch it though it comes
recommended.

[https://egghead.io/courses/develop-web-apps-with-vue-
js](https://egghead.io/courses/develop-web-apps-with-vue-js)

------
tzury
Love this book, the flow, the levels, and the rhythm!

The only thing I stay apart from, is the implicit approach of ES6.

IMHO, explicit is better than implicit. Therefore:

    
    
        return (<div>...</div>)
    

Is better than

    
    
        {
          <div>...</div>
        }
    

and

    
    
        this.state = { list: list };
    

Is better than

    
    
        this.state = { list};
    

Everyone these days seems to take the implicit ES6 way though.

~~~
bryanrasmussen
Well, explicit is better than implicit when there is a very real chance of
missing the implicit, especially when just going over the code quickly. The
return example is a good case of this, reading over code you can easily miss
that those particular brackets are supposed to be a return.

I think though that this.state = { list}; is just as easily understandable as
this.state = { list: list }; once you are familiar with the syntax, and may be
even more easy to understand due to the being easier to read.

------
Steeeve
Two days ago I made a comment about HN evangelizing React, but never posting
any good/current getting started points. I officially stand corrected.

I'm still curious about reasons to invest time in learning it over plain old
javascript.

~~~
acemarke
The React docs were recently rewritten by Dan Abramov ([0]). He's also spent a
lot of time building Create-React-App ([1]), a project creation tool that
provides all the build handling for you so you can just jump in and start
writing code. CRA has been compared to a boilerplate, but unlike most
boilerplates, it's designed so that you can keep upgrading one dependency and
get all the build updates as they come out ([2]). It's a great way to start
using React.

Besides the React docs, the authors of a book called Full Stack React are
currently doing a tutorial series called "30 Days of React" ([3]), which has
been excellent so far. Covers a lot of key topics. Also see my main comment
above for my list of links to React tutorials and resources.

As for reasons to use React: I could talk about it for quite a while, but I'll
stick with just one for now. Going from imperatively poking around at the DOM
and toggling things to simple declaring what the UI output should be based on
props this component was given and state this component controls is a huge
improvement. It takes some time to switch your mind around to thinking in that
style, but once you do, your code becomes much more predictable and
straightforward.

[0] [https://facebook.github.io/react/](https://facebook.github.io/react/)

[1] [https://github.com/facebookincubator/create-react-
app](https://github.com/facebookincubator/create-react-app)

[2]
[https://www.reddit.com/r/reactjs/comments/5gt2c4/you_dont_ne...](https://www.reddit.com/r/reactjs/comments/5gt2c4/you_dont_need_a_boilerplate/davn6e8/)

[3] [https://www.fullstackreact.com/30-days-of-
react/](https://www.fullstackreact.com/30-days-of-react/)

~~~
securingsincity
I would add in addition to being more predictable it's significantly easier to
test. If you fully embrace having stateless components, those components take
inputs(props) and have a straightforward output (the elements they generate)
which shouldn't have any side effects. A unit test can easily capture this
behavior rather than building up a large test suite to test a button click.

------
vanderreeah
Pedantry alert: small typo - "if you can effort it" should be "if you can
afford it".

------
baristaGeek
Why would you want to teach React without Redux?

I failed on the trap as well, I mean, why would you want to add yet another
'concept' to your stack when you can just get a simpler piece of code do the
same thing as a more complex one?

The truth is that if you're going to build something as simple as a simplified
Hacker News clone, you can just get along using concepts of Redux with plain-
old React without actually using Redux.

However, if you want to build a much more complex frontend system using Redux
does give you a utility.

~~~
rwieruch
I get your point. But I think you have to see it from two directions: real
world developing and teaching.

When I wrote [The SoundCloud Client in React +
Redux]([http://www.robinwieruch.de/the-soundcloud-client-in-react-
re...](http://www.robinwieruch.de/the-soundcloud-client-in-react-redux/)) I
made the mistake to think one could learn everything at once. I agree with
your point that, when you are developing a more complex app, you will need
some external state management eventually. But when you want to teach about
one subject, I learned to stick to that subject and to teach it properly
before students should dive into something else.

I can't agree with your other point to use only Redux without React internal
state management. Once your app grows more complex again, you don't want to
store everything in your global store. (You shouldn't do so from the
beginning.) In a development environment with multiple developers/teams you
want to keep your store tidy. I had to learn that the hard way, because I made
the mistake to learn React + Redux without React's internal state management
in the beginning.

