WingNews logo WingNews
top | item 16803554

Learn React by building a web app

298 points| DimitriMikadze | 8 years ago |udilia.com

102 comments

order

acemarke|8 years ago

Since this is a "learn React" thread, I'll point to my standard suggested resources for learning React [0], and my React/Redux links list [1]. More aimed at the self-learners out there who learn from blog posts and articles than courses, but the links list especially has a ton of info on React concepts and best practices.

Also, the Reactiflux chat channels on Discord [2] are a great place to get help and learn. We've always got a bunch of people hanging out happy to answer questions. Come on by and join us!

[0] http://blog.isquaredsoftware.com/2017/12/blogged-answers-lea...

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

[2] https://reactiflux.com

amriksohata|8 years ago

I fear that by the time I'm good enough at react, another library will come out

ng12|8 years ago

Eh, React is 5 years old. I've been writing it professionally for 3. I'm not worried.

And honestly -- React doesn't have the same pain points jQuery/Backbone/Angular1 did where I couldn't wait to move on after 6 months. We'd have to see an absolutely massive paradigm shift before I'd regret writing my apps in React.

projectramo|8 years ago

That's why I am going to wait till next year to start learning JQuery. Should be stable and mature by then.

babaganoosh89|8 years ago

Probably next big thing will be straight web components or UI libraries like react or angular converting to web components. So everything should be nicely interoperable in the future, it'd just be a matter of how your modeling your data.

manigandham|8 years ago

It seems that way, but the fundamentals are simple: functional/declarative programming using self-contained components, just like using regular HTML tags where you pass in all the attributes in the tag to customize it, but now with javascript for much more flexibility in what you can pass in via those attributes.

Those fundamentals are useful everywhere, like backend event-sourcing, CQRS, message-driven actor systems, and even all of the other libraries like Vue, Angular, etc. Learning any of these is like learning 80% of the rest.

Also React has some of the best release and upgrade notes along with tooling so that you can take an app through versions very easily.

galieos_ghost|8 years ago

React will be around a while due to the ecosystem and the fact massive companies are using it. Big companies aren't going to rewrite their entire front-end for the next flavor of the month framework. React-native gives it staying power as well.

fouc|8 years ago

You could start with mithril.js, it's a react-like vdom library with a minimal set of api, and vanilla JS for everything else.

I've been using it the past 6 weeks and super happy with it. I'm sticking with the hyperscript form of it, but you can use JSX if you want.

paxys|8 years ago

90% of what you learn will be high-level transferrable concepts, that you can already apply to Vue or Elm or whatever else.

syndacks|8 years ago

i fear that eventually you'll be able to just design something in Sketch and press a button for the rest...

latchkey|8 years ago

Not a single lesson titled: "How to write tests"

With snapshots, while not perfect, they do catch a lot and are easy to do (and more importantly, easy to update when things change). React components are relatively easy to further test with enzyme and jest.

Without a focus on instructing people how to do testing, people never bother.

lowtolerance|8 years ago

I’ve been through a few “intro to react” courses like this now, and I have not come across a single one that talks about testing at any length, which seems insane to me. When I was learning Rails many years ago, test-driven development was all the rage.

React, with it’s declarative approach, stateless components, immutable state, etc. seems purpose-built for testability. TDD with React should be ridiculously easy, but I wouldn’t know, because no one seems to want to talk about it.

cutler|8 years ago

Fantastic tutorial. Easily-understood bite-sized chunks instead of tedious, hour-long lessons. Got me through React after several failed attempts. Well done Dimi.

learnReact|8 years ago

Hey this is awesome. I had no idea what React is. And i was overwhelmed with the volume i had to learn for these many years, for which i delayed. When I saw this tutorial is around 2 hours, I decided to give a try. I am around part-8. I am very much impressed the way it is structured and presented. 1. I would like to know, if there are any such "free" tutorials related to web development, which are short and in-depth, and covers a breadth and depth of knowledge.

2. Are there any live coding walk-through tutorials of real world projects/examples, that helps you get complete understanding of development process?

By watching professionals in action, we can learn a lot from them, such as best practices, thought process, handling issues and problems and much more.

learnReact|8 years ago

Hey this is awesome. I had no idea what React is. And i was overwhelmed with the volume i had to learn for these many years, for which i delayed. When I saw this tutorial is around 2 hours, I decided to give a try. I am around part-8. I am very much impressed the way it is structured and presented.

1. I would like to know, if there are any such "free" tutorials related to web development, which are short and in-depth, and covers a breadth and depth of knowledge.

2. Are there any live coding walk-through tutorials of real world projects/examples, that helps you get complete understanding of development process?

By watching professionals in action, we can learn a lot from them, such as best practices, thought process, handling issues and problems and much more.

sujee|8 years ago

This is awesome course. I'm watching the videos and coding last 2 hours. Very happy with what I was able to do in such a short period.

jamdav16|8 years ago

Nice tutorial! Nice site too, would love to see more tutorials for Angular, Vue and more.

cleung2010|8 years ago

This looks neat, thanks for sharing!

kgoutham93|8 years ago

What are the prerequisites for this tutorial?

DimitriMikadze|8 years ago

Hi, i think before learning any Framework or library you should have good knowledge of language itself, in this case Javascript.

matte_black|8 years ago

The number one thing I’d like to strengthen is the process of building a react component for publishing on NPM. It’s way different from building something with create-react-app. I need a solution that has zero config, has HMR, the latest JavaScript and automatic deployment for demos on github pages. I have so many components I could publish, but just can’t be bothered to figure this out.

nkkollaw|8 years ago

One thing completely missing from courses is how to handle animations.

Most React apps have no animations whatsoever (including mine, because I have no idea how to implement them), but they're important for usability IMHO.

wuliwong|8 years ago

I was just reading a bit about animations in react, i honestly hadn't thought much about it before. It was because of an HN post about this library https://github.com/kutlugsahin/react-smooth-dnd. But just quickly looking back it seems they use CSS transitions for animations. That is an option, not sure how limiting it may or may not be.

Sakes|8 years ago

I'm literally working on a lib to solve this right now, specifically to be used with react-router. If you want I can contact you when finished and you can give it a whirl.

Implementation will look something like <TransitionGroupRoutes><CSSTransitionRoute path="..."/><CSSTransitionRoute path="..."/></TransitionGroupRoutes>

lpghatguy|8 years ago

I really like React Motion [0] because the API is really simple and the concepts are pretty easy to grasp. If you like the concept of Pose (springs), React Motion might be more predictable.

[0] https://github.com/chenglou/react-motion

DimitriMikadze|8 years ago

Hey, sorry to hear that, i thought it was more of a CSS topic then React's and because of that i have not recorded lesson regarding animations. I don't know if it help you, but in most cases i use CSS transitions with classname manipulations and lifecycle methods if needed.

_qbjt|8 years ago

Class names and CSS transitions have worked just fine in my experience. That said, I'm much more in favor of external stylesheets than coupling styles with components themselves. It seems like the trend with React is to do the opposite.