7 ms·

Learn React by building a web app

298 points by DimitriMikadze 8y ago

cleung2010 8y ago
This looks neat, thanks for sharing!
sugarpile 8y ago
Does anyone have an opinion on how this compares to React for Beginners (https://reactforbeginners.com/ https://reactforbeginners.com/)? Besides the price tag, of course.
matte_black 8y 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.
- zcoyle 8y ago
  I've been using nwb for that https://github.com/insin/nwb https://github.com/insin/nwb
  - matte_black 8y ago
    Awesome, I might really enjoy this.
- DimitriMikadze 8y ago
  Hey! I have edited create-react-app to build React libraries with it, it has exactly same features as CRA. https://github.com/DimiMikadze/create-react-library https://github.com/DimiMikadze/create-react-library
  - matte_black 8y ago
    Looks good, though I would like a better support for github pages out of the box.
- vmware513 8y ago
  You can build a complex application with zero configuration if you follow this tutorial: http://yoember.com http://yoember.com
- amk_ 8y ago
  Extracted boilerplate from some of my libs: https://github.com/alexkrolick/react-lib-quickstart https://github.com/alexkrolick/react-lib-quickstart Want to port this to a CLI eventually, too
nkkollaw 8y 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.
- Sakes 8y 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>
  - nkkollaw 8y ago
    Transitions are fine, I'm more worried about how to give an indication that a panel has been open or similar. I'll check it out, though! If you have a mailing list feel feel to add me: me@nbrogi.com :-) EDIT: I think your comment below is too deeply nested and it doesn't let me reply. However: I think a mailing list is useful even for personal project. In the event that the project gets traction, it would allow you/motivate you to keep working on it and improve it (I'm a professional side project creator). As for nested animations, it might make sense to chain them..? Not sure.
    - Sakes 8y ago
      Sure! Will do. Honestly, I was just building it for myself, so no mailing list. But I'd be excited to see how you like it. The problem I'm aiming to solve is nested route animations, and allowing for different animations to be applied depending upon the previous route in history.
    - Sakes 8y ago
      Good advice, I'll set it up. The problem I ran into with react-router-redux was the requirement of using location to provide the value for a key on CSSTransition. I had to use this implementation to solve the problem of the missing exit animation. https://reacttraining.com/react-router/web/example/animated-transitions https://reacttraining.com/react-router/web/example/animated-... This uncovered a new problem for nested animations. The high-level page transition animation occurs even when the url root does not change. So I need to be able to ignore animations on Route components located high in the VirtualDOM, and apply animations (sometimes different animations) on Route components located further down. Maybe you already know of an elegant solution to solve this problem? If so let me know! In the meantime, I'll keep bang'n on this. Edit: Concerning giving an indication that a panel has been opened, I'd just use CSSTransition wrapped around whatever element that is going to be introduced to show that it has been opened. Then define your 'enter' animation in css. If that seems like overkill, and you can't use did mount to determine if the animation should be applied, then I'd just add a css className to your element to introduce some animation defined in CSS. Obviously, I may be misunderstanding your use cases here. The above are just knee-jerk thoughts on it.
amriksohata 8y ago
I fear that by the time I'm good enough at react, another library will come out
- deleted 8y ago
  [deleted]
- ng12 8y 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.
  - ascagnel_ 8y ago
    I would argue React will be around a while for two reasons: - The core language has gotten a lot better with ES5+ features. Async, fetch promises, etc., are all now built-ins on modern browsers, and have learned lessons from the pain points the initial implementations in libraries like jQuery. - React itself is only a view layer with minimal concern about the form of your data -- you can use an array of other libraries on top of it to help with shared states, network requests, etc. Will someone come along and do a view layer better than React? Probably. Will it be as big of a leap as what we've seen over the past few years with ES5/6/7 & React? I don't think so.
  - txsh 8y ago
    I feel this way about React but Redux seems awkward and worthy of replacement. Am I in the minority on this?
    - beefalo 8y ago
      You are not alone. After trying out GraphQL with Apollo, going back to Redux is painful.
    - rozenmd 8y ago
      There are tons of options for State Management before you even need Redux. Check out: Context API: https://reactjs.org/docs/context.html https://reactjs.org/docs/context.html Unstated: https://github.com/jamiebuilds/unstated https://github.com/jamiebuilds/unstated MobX: https://github.com/mobxjs/mobx https://github.com/mobxjs/mobx
acemarke 8y 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-learn-react/ http://blog.isquaredsoftware.com/2017/12/blogged-answers-lea... [1] https://github.com/markerikson/react-redux-links https://github.com/markerikson/react-redux-links [2] https://reactiflux.com https://reactiflux.com
- philfrasty 8y ago
  If one enjoys learning by video I can recommend "The Net Ninja" on YouTube. He has a series on React.js (as well as many other languages and frameworks): https://www.youtube.com/playlist?list=PL4cUxeGkcC9i0_2FF-WhtRIfIJ1lXlTZR https://www.youtube.com/playlist?list=PL4cUxeGkcC9i0_2FF-Wht...
latchkey 8y 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 8y 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.
  - amk_ 8y ago
    Here's one: https://medium.com/@mbaranovski/quick-guide-to-tdd-in-react-81888be67c64 https://medium.com/@mbaranovski/quick-guide-to-tdd-in-react-...
    - latchkey 8y ago
      No offense, but I feel like this is not a good example to follow. The first examples are better off with just using snapshots. Even if the author is trying to explain the concepts, it is really poor to show bad examples that could be covered by a simpler solution. If I read that and didn't know about snapshots, I'd think to myself, "why am I testing strings?" and then skip testing entirely. Mocking Axios also seems like the wrong way to approach things. I'd extract the networking code from the presentation code. Possibly by using mobx-state-tree (which is an epic solution to a hard problem). This way, I wouldn't even need to mock Axios at all and I could then just take advantage of snapshots again by providing actual mock data to my components directly.
  - latchkey 8y ago
deleted 8y ago
[deleted]
sujee 8y 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.
- DimitriMikadze 8y ago
  Thanks!
learnReact 8y 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 8y 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.
cutler 8y 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.
- DimitriMikadze 8y ago
  Thanks!
kgoutham93 8y ago
What are the prerequisites for this tutorial?
- DimitriMikadze 8y ago
  Hi, i think before learning any Framework or library you should have good knowledge of language itself, in this case Javascript.
jamdav16 8y ago
Nice tutorial! Nice site too, would love to see more tutorials for Angular, Vue and more.
- DimitriMikadze 8y ago
  Thanks!

cleung2010 8y ago

This looks neat, thanks for sharing!

Does anyone have an opinion on how this compares to React for Beginners (https://reactforbeginners.com/ https://reactforbeginners.com/)? Besides the price tag, of course.

matte_black 8y 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.

zcoyle 8y ago
I've been using nwb for that https://github.com/insin/nwb https://github.com/insin/nwb
- matte_black 8y ago
  Awesome, I might really enjoy this.
DimitriMikadze 8y ago
Hey! I have edited create-react-app to build React libraries with it, it has exactly same features as CRA. https://github.com/DimiMikadze/create-react-library https://github.com/DimiMikadze/create-react-library
- matte_black 8y ago
  Looks good, though I would like a better support for github pages out of the box.
vmware513 8y ago
You can build a complex application with zero configuration if you follow this tutorial: http://yoember.com http://yoember.com
amk_ 8y ago
Extracted boilerplate from some of my libs: https://github.com/alexkrolick/react-lib-quickstart https://github.com/alexkrolick/react-lib-quickstart Want to port this to a CLI eventually, too

nkkollaw 8y 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.

Sakes 8y 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>
- nkkollaw 8y ago
  Transitions are fine, I'm more worried about how to give an indication that a panel has been open or similar. I'll check it out, though! If you have a mailing list feel feel to add me: me@nbrogi.com :-) EDIT: I think your comment below is too deeply nested and it doesn't let me reply. However: I think a mailing list is useful even for personal project. In the event that the project gets traction, it would allow you/motivate you to keep working on it and improve it (I'm a professional side project creator). As for nested animations, it might make sense to chain them..? Not sure.
  - Sakes 8y ago
    Sure! Will do. Honestly, I was just building it for myself, so no mailing list. But I'd be excited to see how you like it. The problem I'm aiming to solve is nested route animations, and allowing for different animations to be applied depending upon the previous route in history.
  - Sakes 8y ago
    Good advice, I'll set it up. The problem I ran into with react-router-redux was the requirement of using location to provide the value for a key on CSSTransition. I had to use this implementation to solve the problem of the missing exit animation. https://reacttraining.com/react-router/web/example/animated-transitions https://reacttraining.com/react-router/web/example/animated-... This uncovered a new problem for nested animations. The high-level page transition animation occurs even when the url root does not change. So I need to be able to ignore animations on Route components located high in the VirtualDOM, and apply animations (sometimes different animations) on Route components located further down. Maybe you already know of an elegant solution to solve this problem? If so let me know! In the meantime, I'll keep bang'n on this. Edit: Concerning giving an indication that a panel has been opened, I'd just use CSSTransition wrapped around whatever element that is going to be introduced to show that it has been opened. Then define your 'enter' animation in css. If that seems like overkill, and you can't use did mount to determine if the animation should be applied, then I'd just add a css className to your element to introduce some animation defined in CSS. Obviously, I may be misunderstanding your use cases here. The above are just knee-jerk thoughts on it.

amriksohata 8y ago

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

deleted 8y ago
[deleted]
ng12 8y 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.
- ascagnel_ 8y ago
  I would argue React will be around a while for two reasons: - The core language has gotten a lot better with ES5+ features. Async, fetch promises, etc., are all now built-ins on modern browsers, and have learned lessons from the pain points the initial implementations in libraries like jQuery. - React itself is only a view layer with minimal concern about the form of your data -- you can use an array of other libraries on top of it to help with shared states, network requests, etc. Will someone come along and do a view layer better than React? Probably. Will it be as big of a leap as what we've seen over the past few years with ES5/6/7 & React? I don't think so.
- txsh 8y ago
  I feel this way about React but Redux seems awkward and worthy of replacement. Am I in the minority on this?
  - beefalo 8y ago
    You are not alone. After trying out GraphQL with Apollo, going back to Redux is painful.
  - rozenmd 8y ago
    There are tons of options for State Management before you even need Redux. Check out: Context API: https://reactjs.org/docs/context.html https://reactjs.org/docs/context.html Unstated: https://github.com/jamiebuilds/unstated https://github.com/jamiebuilds/unstated MobX: https://github.com/mobxjs/mobx https://github.com/mobxjs/mobx

acemarke 8y 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-learn-react/ http://blog.isquaredsoftware.com/2017/12/blogged-answers-lea... [1] https://github.com/markerikson/react-redux-links https://github.com/markerikson/react-redux-links [2] https://reactiflux.com https://reactiflux.com

philfrasty 8y ago
If one enjoys learning by video I can recommend "The Net Ninja" on YouTube. He has a series on React.js (as well as many other languages and frameworks): https://www.youtube.com/playlist?list=PL4cUxeGkcC9i0_2FF-WhtRIfIJ1lXlTZR https://www.youtube.com/playlist?list=PL4cUxeGkcC9i0_2FF-Wht...

latchkey 8y 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 8y 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.
- amk_ 8y ago
  Here's one: https://medium.com/@mbaranovski/quick-guide-to-tdd-in-react-81888be67c64 https://medium.com/@mbaranovski/quick-guide-to-tdd-in-react-...
  - latchkey 8y ago
    No offense, but I feel like this is not a good example to follow. The first examples are better off with just using snapshots. Even if the author is trying to explain the concepts, it is really poor to show bad examples that could be covered by a simpler solution. If I read that and didn't know about snapshots, I'd think to myself, "why am I testing strings?" and then skip testing entirely. Mocking Axios also seems like the wrong way to approach things. I'd extract the networking code from the presentation code. Possibly by using mobx-state-tree (which is an epic solution to a hard problem). This way, I wouldn't even need to mock Axios at all and I could then just take advantage of snapshots again by providing actual mock data to my components directly.
- latchkey 8y ago

deleted 8y ago

[deleted]

sujee 8y 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.

DimitriMikadze 8y ago
Thanks!

learnReact 8y 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 8y ago

cutler 8y 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.

DimitriMikadze 8y ago
Thanks!

kgoutham93 8y ago

What are the prerequisites for this tutorial?

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

jamdav16 8y ago

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

DimitriMikadze 8y ago
Thanks!