A Complete Beginner's Guide to React

Ali Spittel on August 28, 2018

I want to get back into writing more code-heavy content, and React is one of my favorite technologies, so I thought I would create a React intro!... [Read Full]
markdown guide
 

This is so much like some of the very early React how-tos. Things had gotten way overly complicated since then. People sort of forgot about the basics, but the original tutorials are out of date.

This is just what the space needed 🙂

 

Yes, I love it!

Getting rid of all the tooling to understand the concepts.

I also wrote a tutorial on this topic, without tooling or ES2015 features, to get people up to speed!

React From Zero

 
 

Not something I needed to hear preparing for my new job where they use React extensively :O

 

Agreed, this shows that React doesn't need to get too complicated in order for it to work. Simple, fancy and functional :D

 

I appreciate the amount of efforts put ting this article together: codepen, git diff, cheatsheet, react concepts, etc. for us to read in about 10 minutes. More importantly, how you break down and approach the problems and writing solutions. You are awesome.

 
 

Great article!
I've noticed a small thing - today's approach with methods is not to write

this.metod = this.method.bind(this)

in constructor function, but simply define methods with arrow functions like that:

class Comment extends React.Component {

  handleChange = (event) => {
    this.setState({
      characterCount: event.target.value.length
    })
  }

  render() {}
}

This way our "this" is the method's parent Class.
Please correct me if I'm wrong :)

 

You can do that -- its a Babel feature, so its not implemented in JS, it also has some performance issues. I like the syntax, but its still perfectly valid to bind in the constructor, which IMO is easier to explain.

 

Ok, thank You for an answer :)
I will try to check more about performance (I didn't have problems with that), so thanks for suggestion!

 

Thank you Ali for providing such a great start to React! I noticed that there's a missing closing tag at the end of the browser.js declaration.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js">

 
 

@aspittel, thanks for sharing great article. I noticed when I load the babel script in browser, it give me error in console.

Uncaught TypeError: Cannot read property 'keys' of undefined
    at Object.283.290 (browser.js:19824)
    at s (browser.js:2)
    at browser.js:2
    at Object.273.283 (browser.js:19802)
    at Object.655.273 (browser.js:31886)
    at s (browser.js:2)
    at browser.js:2
    at Object.645.634 (browser.js:30827)
    at s (browser.js:2)
    at browser.js:2

The problem was using "babel-core" instead of "babel-standalone". Link

 
 

Very nice article! Congratulations and thanks for sharing that

 

React, Vue and Angular are all great for building Hello Worlds, the ugliness starts with more complex projects where you'll find yourself reinventing the wheel day-to-day. Probably Angular has it best in this regard.

 

I was (actually, still am, but I'm doing it in parts) working on something similar, a React guide that goes through all the basics. This one is pretty good, congrats, Ali.

 

Thanks for sharing Ali. Great intro. To compliment this, the Syntax podcast recently did a podcast episode on React for beginners for those interested.

Looking forward to your next post!

 
 
 
 

Simple, effective and more interesting!! A clean article that walks us through the basic idea of React and JSX. Thanks a lot @aspittel for your efforts

 
 
 

You're going to have to stop writing these articles Ali, I don't have the time to read them all! Added to the list and I'm looking forward to reading it :)

 
 
 
 

This is perfect, I start doing my react app next week!

 

This is fantastic, I've been looking for a write up like this. Thank you so much!!

 
 
 
 
 

An extraordinary guide for beginners. Love it.

Thanks a zillion.

 
 

Nice tutorial, just started learning React. Thanks for sharing.

 

@aspittel , I think you meant 'team' here:

React is a JavaScript library build in 2013 by the Facebook development teach to make

right?

 
 

Thank you! this is exactly what I was looking for ^

code of conduct - report abuse