DEV Community

Learning React? Start Small.

Dave Ceddia on June 21, 2017

Hi dev.to! I thought this would be a good first post here, as it seems to be a thing a lot of newcomers to React struggle with. I saw this comment...

Read full post

nihar • Jun 22 '17 • Edited

Learn React here: hackr.io/tutorials/learn-react
About the process of being productive in REACT.JS:

1) Learning only ReactJS doesn't make sense in 2016

Generally, React must be paired with Redux in order to make a functional single-page-app, the right way (or other similar solutions like MobX or CerebralJS).

When learning only React has sense? When you have an Angular/Ember/etc app where you want to add a single React component - I don't see other use cases where you shall learn only React.

2) You can be productive in less than 7 days

Do you have experience in making web apps in other technologies like jQuery/Angular etc? Then, in most cases you will be productive and hireable in React+Redux in less than 7 days if you will follow the instructions about how to learn it, below.

3) What do you need to know about EcmaScript 6 (ES6) and JavaScript

Topics and resources that may help you to master your foundation before learning React:

Higher-order functions
JavaScript Arrays in Depth (Map)
Reduce Data with Javascript Array
Closures
Currying
Recursion
Promises
ES6/ES7 syntax

Scott Spence • Jun 21 '17 • Edited

Thanks for this Dave, I'm pretty frustrated with react development, what you say though, learn:

import React from 'react';
import ReactDOM from 'react-dom';

class Hello = () => <div>Hello</div>

ReactDOM.render(<Hello/>, document.querySelector('#root'));

Learn it, learn it, learn it...

How often will a developer find themselves doing this in their job though?

Please don't take this as negative I have watched so many react tutorials and to be honest if it's a fundamentals course or it's at the beginning my eyes glaze over.

I'm willing to do anything to learn how to dev, I was even considering a £400 Udemy course this afternoon.

Also, the speed at which react is changing frustrates me, as projects I made a few months back are broken once dependencies are updated.

Dave Ceddia • Jun 21 '17

How often will a developer find themselves doing this in their job though?

You're right, of course. Once you know it so well that it's boring, you make a snippet so your editor can type it out for you ;)

This particular bit of code is just one example though. The larger suggestion is to learn what all the code in your app does, and how to write it yourself without having to peek at docs or StackOverflow or a tutorial constantly. Sure there will be things that you don't write out often, or you that you forget because you've been automating it for a while, but the underlying understanding is still there. I guess what I'm saying is that "knowing how to type those lines out from memory" is a proxy for understanding what they mean and do.

I'll be real with you for a sec though: you say "I'm willing to do anything to learn how to dev" and you've watched a ton of tutorials. How many things have you built? How many different tiny/small/medium/large things? It takes time and practice to learn development and I'm sorry to say there aren't many shortcuts out there. There are better and worse learning paths of course, but ultimately you've gotta put in the work to walk the chosen path.

Scott Spence • Jun 21 '17

I understand I have a long way to go still, thank you Dave.

And thanks for the advice, that is something I'll be trying out .

Arden de Raaij • Dec 26 '17

Thanks for sharing Dave! It seems that everyone has their preferred ways of learning React, but I'd really like to stress how important it is to understand the basic React.createElemnet API. As soon as you understand that JSX is just a syntax over that API, things get a lot clearer. Two of my favorite beginners resources are React Enlightenment and Kent C. Dodds The beginners guide to React on egghead.io.

Ben Brewer • Oct 10 '17

I am a big believer in learning by doing. Here is a compilation of the best, newest, and FREE-est ReactJS and React-Native tutorials out there. Happy coding!

React_Tutorials_Library (github.com/BenBrewerBowman/React_T...)

Thorsten Hirsch • Sep 10 '17

Shouldn't one learn the basic ES6 React app structure nowadays?

Dave Ceddia • Sep 13 '17

Sure, that seems like a good idea. What do you mean by ES6 app structure, and how does it differ from the advice above?

Thorsten Hirsch • Sep 14 '17 • Edited

Well, actually I don't understand Scott's Hello class. It looks like a mixture of the ES6 version (due to the class syntax) and the old functional react style. Since the class lacks a render function one could argue that it's not a real react component.

I would use the following one instead:

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}

ReactDOM.render(<Hello/>, document.querySelector('#root'));

Now class Hello is a React.Component and has a render function. It's similar to what the official react tutorial teaches.

Dave Ceddia • Sep 14 '17

Ahh I see what you mean.

It's a little confusing because there are 3 different ways to write React components:

with React.createClass
with ES6 classes (as in your example)
with plain functions, either as arrow functions or long-form functions (const MyThing = () => <div>whatever</div> or function MyThing() { return <div>whatever</div> }.

The first one, React.createClass, is deprecated. Old news.

Between the other two, most advice recommends that if the component is stateless, to write it as a function instead of a class. (Scott's example should say "const" instead of "class" but the rest is fine)

Stateless functional components are just as "real" as class components. They're a little more lightweight to write, and they signal the intent of being stateless. They also can't use lifecycle methods. For simple things like Buttons, Headers, etc, they're a great choice.

ES6 class components are best when you know you need to keep track of state, and/or you need to respond to lifecycle methods like componentWillReceiveProps and such. They're also very simple to make "pure", by extending React.PureComponent instead of React.Component.

You can have the best of both worlds (less to type AND things like lifecycle methods) by using the recomponse library, though I still generally prefer to turn things into ES6 classes once they need to do more than just "be pure".