Resources for Learning React/Redux

Resources for Learning React/Redux
0
#1

I started learning redux about two months ago and I was really frustrated that I wasn’t getting it. I messaged the creator, Dan Abrimov, and he showed me some helpful resources. I thought it might be useful to share these.

This is basically an order for learning React/Redux with lots of links:

And this is an examples folder on github I downloaded and played around with:

This video compares a small application he builds in react with and without redux:

It’s much easier to understand why it’s useful when you start to scale an application.

Coming Soon Items?
#2

You can signup for a free web series on Redux from Wes Bos here. I haven’t gone thru them yet but I enjoyed his series on flexbox.

#3

Thanks, I’m going to try this.

#4

Hi gwenf,

I just came across these tutorial videos today -

http://learnreact.com/lessons

I am enjoying these - they are a simple intro into React - something I needed just to tide me over until FCC has there React challenges up. Anyway, hope this helps you :slight_smile:

I also had a question for you or anyone else who may know this answer - as I was working through these videos and following along typing my code into codepen, I noticed that with a newer version of React - React.render(); throws an error saying its not a function but when I use the older version used in the videos, my code works. Any ideas why this might be? Here’s a link to my pen so you can see what I’m talking about…

http://codepen.io/GenesisWebDesign/pen/MeKYvx

Right now I’m using the old version - 0.12.0 - and my code works. But when I use version 15.1.0 - it throws the error as I mentioned. I’m super new to React - this is just my second day studying it, but am very familiar with regular javascript. Any help would be appreciated!

Thanks so much,
Jessi

#5

React syntax has changed a lot in the last year. I think JSXTransformer has been depreciated since last summer.
There are several newer ways of writing React.render:

  1. with ReactDOM:

    var ReactDOM = require(‘react-dom’);
    ReactDOM.render(

    Test
    ,document.getElementById(’…’))

  2. With destructuring:

    import { render } from ‘react-dom’
    render(

    Test
    ,document.getElementById(’…’))

So basically, syntax that worked six months or one year ago, may no longer work with newer versions of react.
I work with React everyday at work now, so if you have any more questions, feel free to ask and I can try to help you out.

#6

Wow, okay - that makes sense then. Thanks so much for the help! I really appreciate it :smiley:

#7

Abramov’s own Redux tutorials on egghead.io are excellent. Egghead asks for your email to unlock the lesson, you can just put in anything (these are free lessons)

Here’s the first in the series:

#8

They are excellent, although a little hard to grasp if you are just starting out.

Dan Abrimov also made another redux series on egghead recently:
https://egghead.io/courses/building-react-applications-with-idiomatic-redux

#9

I’ll check it out - thanks! :smiley:

#10

I am very new - I will look at both, thank you so much!:smiley:

#11

Having now watched all 27 of Abramov’s second series (the “idiomatic redux” series), my takeaway is that it isn’t as strong as the first. He went from a single file on jsbin (too simple for real world apps, yes) to a modular architecture that might make sense to its author, but to me feels completely incoherent and highly coupled. I was too distracted by his constant jumping around between files to add various abstractions hither and yon to get any sense of the logic of either the app or the architecture he was aiming at.

It’s not all bad: the explanation of middleware was excellent, but I’d also note the code for that was much more self-contained.

#12

Thanks for the links @gwenf I want to learn React so I’m checking the links.

#13

Thanks @gwenf. I am struggling with React for the past week and can’t find a decent tutorial that I liked. I will have a look into these.

#14

are you struggling with anything in particular?

#15

Just the thinking process in terms of React - when to use/set states, props, etc. Been used to jquery/javascript and HTML/DOM manipulation for so long now, that I am kind of struggling to find a good beginner tutorial that helps with this.

#16

I know that feelings, I have trouble when it comes to functions so I can create the components but actions and data manipulation still gives me a hard time which is why I haven been subconsciously waiting for someone to tutor me even when I try to make progress by myself.

#17

Yeah I can sort of put together components and render but anything more and I make a mess. Been figuring out the initial state (getInitialState) but what I put in it seems to be a prop and not a state to my mind so I get confused. I think I have subconsciously been waiting for some tutoring too. I wonder how others went through the process of learning the very basics of React and completing the first Markdown Previewer project?

#18

It is not free, but I recommend Stephen Grider’s courses on Udemy. I managed to pick them up when they were having a sale ($5 each I think?).

First:


Second:

The first course is through the basics, you basically build 3-4 small applications and each one brings some advancement to skill level. It was also very helpful in learning ES6 as he puts focus on that as well. The second is more advanced tops - unit testing, middleware, and some server side stuff. I enjoyed both thoroughly and they really jump started my knowledge on it.

#19

very good thread learnt new things today .

#20

Hey Kiresuah, would you recommend the first udemy course as a first introduction to React or do you think some other resources before this would be better to start with?