loading...

Learning React? Start Small.

dceddia profile image Dave Ceddia Originally published at daveceddia.com ・3 min read

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 on Reddit the other day:

I have been trying to learn React for the past year now, on and off. No matter how much I try, I just cannot seem to get off the tutorials. The code just isn't intuitive.

It is seriously frustrating to work through a tutorial, come out with a glimmer of hope, and have that hope smashed to bits when you realize you don't really understand enough to make your own app.

If that's you, I have some advice: start small. I mean really small.

Do Little Experiments

What kinds of things have you tried to build on your own? How "big" are they?

I didn't fully grok props and state until I built a few really small apps with React. I think "experiments" would be a better term.

Experiments are throwaways. Experiments aren't scary. There's very little at stake. There's no architecture to worry about, no design, no grand vision. There are only a handful of discrete steps and if you screw up badly enough you can literally delete the thing and start over.

Tiny little experiment apps like this:

  • render "hello world"
  • render a few nested plain old HTML elements to get a feel for JSX
  • "refactor" hello world into 2 components, Hello and World. Nest them inside HelloWorld.
  • make World accept an optional prop, the "name" to display, and render it.
  • create a static array of things, like const items = [{id: 1, name: "one"}, {id: 2, name: "two"}]. Create a component that takes "items" as a prop and uses items.map(...) to render the list of items.
  • Make a counter. Initial state: count = 0. Have a "+" button and a "-" button that change the count by setting state.
  • Put the counter state in the root component, and put the buttons that increment/decrement it in a child a few levels below. Pass the increment/decrement functions down as props so that the children can update the parent's state.

You get the idea. Really small things. Incremental things. These barely qualify as "apps," but they are exactly what will get you from the frustration of doing tutorials and having the knowledge slip through your fingers, to actually writing your own app.

These tiny experiments could even live under the same folder, as components within a larger app, but I like the idea of making separate ones because it drills the basics into your fingers.

Muscle Memory

Nobody talks about this, and it might seem stupid, but I think it's really important to learn the basic "React app" structure cold. I'm talking about the basic "boilerplate" to make an app:

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

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

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

Sure, you can rely on create-react-app to generate it for you. But you can't fool your brain. It knows that you have no idea what those imports do, and that if they suddenly vanished you wouldn't know how to write them from scratch. That little bit of fear is paralyzing.

So shine a light in those dark corners: learn those lines cold, learn what they do, and make sure you can write them blindfolded.

Use create-react-app, but delete everything under src and recreate index.js by hand for 3-5 apps in a row until it sticks. I think there's a lot of cognitive overhead when you look at a file and think "I can't touch those generated lines because I don't know what they do."

Go Practice!

React is a skill like any other, and nobody is born knowing how to be a frontend developer. Put in some quality time practicing, making little experiments, and you will improve. Then you'll be ready to tackle the app idea in your head.

Any time you run into another tricky part, practice it in isolation.

Learning Redux? Spin up a little sandbox app where you can mess around without breaking anything.

Not sure how to make a layout with React Bootstrap? Don't mangle up your main project -- that's just disheartening, and you have to undo all the failed work. Make an experiment app instead.

Practice new skills in isolation.

This article was originally posted on daveceddia.com.

Discussion

pic
Editor guide
Collapse
niharmore33 profile image
nihar

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

Collapse
spences10 profile image
Scott Spence

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.

Collapse
dceddia profile image
Dave Ceddia Author

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.

Collapse
spences10 profile image
Scott Spence

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 .

Collapse
ardennl profile image
Arden de Raaij

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.

Collapse
maestromac profile image
Mac Siri

This is a great learning guideline for just about everything. Thank you for sharing!

Collapse
dceddia profile image
Dave Ceddia Author

Thanks, yeah totally - it applies to much more than just React :)

Collapse
ben profile image
Ben Halpern

Yeah, definitely.

Collapse
benbrewerbowman profile image
Ben Brewer

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

Collapse
zacanger profile image
Zac Anger

I love this! I try to do something similar whenever I'm learning a new thing. I think I've written tiny Markdown editor apps a dozen times now, when experimenting with different things.

Collapse
thorstenhirsch profile image
Thorsten Hirsch

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

Collapse
dceddia profile image
Dave Ceddia Author

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

Collapse
thorstenhirsch profile image
Thorsten Hirsch

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.

Thread Thread
dceddia profile image
Dave Ceddia Author

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

Collapse
diveshjain25 profile image
DIVESH SANKHLA

Hey great article, You can learn react from letsfindcourse.com/react

Collapse
rajesh36923908 profile image
rajesh

Hey great article, You can learn react from visualpath.in/ReactJs-Training-in-...

Collapse
jamessmith23 profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
JamesSmith23

Just to add to the lovely resources shared here, check out reactdom.com/react for React Tutorials & Books to get instantly started with.