
Learn React by building a web app - DimitriMikadze
https://udilia.com/courses/learn-react-by-building-a-web-app
======
acemarke
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...](http://blog.isquaredsoftware.com/2017/12/blogged-answers-learn-react/)

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

[2] [https://reactiflux.com](https://reactiflux.com)

~~~
philfrasty
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-
Wht...](https://www.youtube.com/playlist?list=PL4cUxeGkcC9i0_2FF-
WhtRIfIJ1lXlTZR)

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

~~~
ng12
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.

~~~
txsh
I feel this way about React but Redux seems awkward and worthy of replacement.
Am I in the minority on this?

~~~
rozenmd
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)

~~~
egeozcan
There's also Baobab:

[https://github.com/Yomguithereal/baobab](https://github.com/Yomguithereal/baobab)

[https://github.com/Yomguithereal/baobab-
react](https://github.com/Yomguithereal/baobab-react)

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

~~~
DimitriMikadze
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
Looks good, though I would like a better support for github pages out of the
box.

------
latchkey
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
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_
Here's one: [https://medium.com/@mbaranovski/quick-guide-to-tdd-in-
react-...](https://medium.com/@mbaranovski/quick-guide-to-tdd-in-
react-81888be67c64)

~~~
latchkey
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.

------
cutler
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
Thanks!

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

~~~
eat_veggies
Pose [0] was posted on HN a few days ago. I haven't tried it, but its API
looks super clean. HN Discussion [1]

[0] [https://popmotion.io/pose/](https://popmotion.io/pose/)

[1]
[https://news.ycombinator.com/item?id=16701756](https://news.ycombinator.com/item?id=16701756)

~~~
hakanito
I got excited about Pose but when I tried it out I saw a lot of unexpected and
undocumented behavior. Seems promising but docs needs more work and examples!

~~~
SirHound
Creator here - have you got any specific examples of this behaviour? I’d be
glad to hear of them

~~~
hakanito
I was trying to create a slide down animation, but could not figure out if
Pose is dependent on the height property or not. Some times transforms worked-
ish and sometimes not.

~~~
SirHound
Hmm probably because height and width are converted to transforms as FLIP
animations. Maybe I’ll look into making that opt-in. Thanks dude.

------
learnReact
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
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
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
Thanks!

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

~~~
DimitriMikadze
Thanks!

------
sugarpile
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.

------
cleung2010
This looks neat, thanks for sharing!

------
kgoutham93
What are the prerequisites for this tutorial?

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

