DEV Community

Cover image for A Complete Beginner's Guide to React

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...
Collapse
 
ben profile image
Ben Halpern

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 🙂

Collapse
 
kayis profile image
K

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

Collapse
 
aspittel profile image
Ali Spittel

Ah, thank you so much!!!

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

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

Collapse
 
zasuh_ profile image
Žane Suhadolnik

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

Collapse
 
rattanakchea profile image
Rattanak Chea

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.

Collapse
 
aspittel profile image
Ali Spittel

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

Collapse
 
rbatsenko profile image
Roman Batsenko

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

this.metod = this.method.bind(this)
Enter fullscreen mode Exit fullscreen mode

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() {}
}
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
aspittel profile image
Ali Spittel

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.

Collapse
 
rbatsenko profile image
Roman Batsenko

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!

Collapse
 
nickytonline profile image
Nick Taylor

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!

Collapse
 
patrickcole profile image
Patrick Cole

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

Collapse
 
aspittel profile image
Ali Spittel

Good catch! Thanks!!

Collapse
 
effene profile image
Effene Herry

@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

Collapse
 
aspittel profile image
Ali Spittel

Thank you!! Will fix!

Collapse
 
veselinastaneva profile image
Vesi Staneva

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

Collapse
 
imronlearning profile image
Michael Learns

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

Collapse
 
doni profile image
Doni

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

Collapse
 
hj2100 profile image
hj2100

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

Collapse
 
cv2k10 profile image
Calvin

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

Collapse
 
dpalyov profile image
Dimitar Palyov

Great article. Thanks!

Collapse
 
charlyn profile image
Charlyn Gonda

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

Collapse
 
aspittel profile image
Ali Spittel

thank you for reading!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
felipegalvao profile image
Felipe Galvão

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.

Collapse
 
lauriy profile image
Lauri Elias • 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.

Collapse
 
prelias profile image
Paulo Roberto Elias

Very nice article! Congratulations and thanks for sharing that

Collapse
 
sait profile image
Sai gowtham

Very depth explaination

Collapse
 
dhanushbhat9 profile image
Dhanush Bhat

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.

Collapse
 
iamsbharti profile image
Iamsbharti

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.

Collapse
 
leolanese profile image
Leo Lanese

Ali, thanks for sharing.

Collapse
 
slhemanthkumar profile image
Hemanth kumar

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

Collapse
 
aspittel profile image
Ali Spittel

Thank you!!

Collapse
 
blak_it profile image
BLAKIT IT Solutions

Good job!

Collapse
 
yousefcodes profile image
Yousef Elreda

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.

Collapse
 
scottishross profile image
Ross Henderson

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

Collapse
 
aspittel profile image
Ali Spittel

haha thanks for reading!

Collapse
 
techiewasp profile image
Abul Kalam Azad

An extraordinary guide for beginners. Love it.

Thanks a zillion.

Collapse
 
starboysharma profile image
Pankaj Sharma • 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
😊🤠

Collapse
 
wolfdebug profile image
Wolfdebug

Not bad! I like it

Collapse
 
daveparr profile image
Dave Parr

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 ☹️

Collapse
 
sielle40679268 profile image
Sielle Tech

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

Collapse
 
fidelamendola1976 profile image
Fidel Amendola

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 👍

Collapse
 
sneezeaway profile image
Garyyyyyyy

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

Collapse
 
puleta profile image
Puleta

sooo good :) thank you!

Collapse
 
safinghoghabori profile image
Safin Ghoghabori

I loved this post too. But i have one confusion, what about the "previousState" and from where it comes ? What is the value of it ?🤔

Collapse
 
nbanitama profile image
Novandi Banitama

Cooolll coolll!!! like reading this article 😉

Collapse
 
mrsetiawan profile image
Muhamad Rahmat Setiawan

thanks for tutorial

Collapse
 
arximughal profile image
Muhammad Arslan Aslam

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

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

right?

Collapse
 
aspittel profile image
Ali Spittel

Good catch, thanks!

Collapse
 
jshamg profile image
jshamg

super awesome :). luv it.

Collapse
 
shubham_st profile image
shubham_tiwari

Awesome One

Collapse
 
vuanhnguyeen profile image
Vũ Anh

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