DEV Community

A Complete Beginner's Guide to React

Ali Spittel on August 28, 2018

React is one of my favorite technologies, so I thought I would create a React intro. This post requires knowledge of HTML and JavaScript -- I am of...

Read full post

Ben Halpern • Aug 28 '18

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 🙂

K • Aug 28 '18

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

Ali Spittel • Aug 28 '18

Ah, thank you so much!!!

Juan F Gonzalez • Aug 28 '18

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

Žane Suhadolnik • Aug 29 '18

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

Rattanak Chea • Aug 28 '18

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.

Ali Spittel • Aug 28 '18

Ah thank you so much!! Glad it was helpful!

Roman Batsenko • Sep 4 '18

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

Ali Spittel • Sep 4 '18

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.

Roman Batsenko • Sep 5 '18

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!

Nick Taylor • Aug 28 '18

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

Wes Bos

@wesbos

Big React episode on @syntaxfm today! Bringing it back to the basics and covering all the fundamental ideas and concepts of React. Enjoy!

syntax.fm/show/066/the-r…

14:04 PM - 15 Aug 2018

74 377

Looking forward to your next post!

Patrick Cole • Aug 28 '18

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

Ali Spittel • Aug 28 '18

Good catch! Thanks!!

Effene Herry • Aug 29 '18

@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

Ali Spittel • Aug 30 '18

Thank you!! Will fix!

Vesi Staneva • Jul 3 '20

A very extensive and insightful post, kudos!👏

My team just completed an open-sourced Content Moderation Service built Node.js, TensorFlowJS, and ReactJS that we have been working over the past weeks. We have now released the first part of a series of three tutorials - How to create an NSFW Image Classification REST API and we would love to hear your feedback(no ML experience needed to get it working). Any comments & suggestions are more than welcome. Thanks in advance!
(Fork it on GitHub or click🌟star to support us and stay connected🙌)

Michael Learns • Aug 28 '18

Gooshh! Just what I needed! Thank you so much!

Donita • Aug 28 '18

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

hj2100 • May 5 '20

Nice article!
You used a class format a lot in the article. However, there is a format called functional component
Which one is better?

Calvin • May 26 '20

Since React launched React Hooks, we should advise beginners learn functional components instead of class components.

Dimitar Palyov • Aug 28 '18

Great article. Thanks!

Charlyn Gonda • Aug 28 '18

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

Ali Spittel • Aug 28 '18

thank you for reading!

Comment deleted

Felipe Galvão • Aug 29 '18

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.

Lauri Elias • Sep 3 '18 • Edited

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.

Paulo Roberto Elias • Sep 3 '18

Very nice article! Congratulations and thanks for sharing that

Sai gowtham • Aug 28 '18

Very depth explaination

Dhanush Bhat • Dec 5 '19

Hi Ali. I am a beginner on React. i dont have proper knowledge on JS. How do i go about this? I am losing interest as there are a lot of things here which i am not able to understand. Could you please guide me in the right direction. I am an Intern and have deadlines on this Technology.

Iamsbharti • Jan 21 '20

I am heading to a shift my knowledge and expertise from basis web apps structure and php to react ,your article is just awesome.In beginning i was thinking the transitions would be difficult but thanks to you ,your efforts are much appreciated.

Leo Lanese • Oct 14 '19

Ali, thanks for sharing.

Hemanth kumar • Jun 14 '19

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

Ali Spittel • Jun 14 '19

Thank you!!

BLAKIT IT Solutions • Sep 26 '18

Good job!

Yousef Elreda • Sep 29 '20

This is great Ali, just what I needed as I get my hands into react. Where should I head to next in my journey to learning react? I am thinking react hooks. I feel like I now understand components, state, and classes.

In the comments below, I'm reading advise from some folks to learn about functional components "instead of" class components (rather than "in addition to"). Generally speaking, I take a OO approach to programming rather than functional, so I like the class approach here.

I'll take suggestions, but I'll look into functional components as well.

Ross Henderson • Aug 28 '18

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

Ali Spittel • Aug 28 '18

haha thanks for reading!

Abul Kalam Azad • Oct 13 '19

An extraordinary guide for beginners. Love it.

Thanks a zillion.

Pankaj Sharma • Apr 12 '20 • Edited

Hey, I would like to thank you for this amazing post of React, it helps me a lot to know about react.
Here what I made after inspiring from you: insta-post.netlify.com
😊🤠

Wolfdebug • May 25 '19

Not bad! I like it

Dave Parr • Jan 31 '21

This is great content, as always.

I'm also really keen to read your 2020 hooks update too but I got a 404 on the link ☹️

Sielle Tech • Sep 16 '20

Ty so much for the article<3. It was very helpful to me. I'm learning React now and I'm in love!

Fidel Amendola • Sep 12 '20

Woow, amazing tutorial Ali, I love it. I'm in the process of learning React, JavaScript and more and I really appreciate this kind of works. Thanks for share your knowledge 👍