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...
For further actions, you may consider blocking this person and/or reporting abuse
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
Ah, thank you so much!!!
Agreed, this shows that React doesn't need to get too complicated in order for it to work. Simple, fancy and functional :D
Not something I needed to hear preparing for my new job where they use React extensively :O
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.
Ah thank you so much!! Glad it was helpful!
Great article!
I've noticed a small thing - today's approach with methods is not to write
in constructor function, but simply define methods with arrow functions like that:
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!
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!
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.
Good catch! Thanks!!
@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:2The problem was using "babel-core" instead of "babel-standalone". Link
Thank you!! Will fix!
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🙌)
Gooshh! Just what I needed! Thank you so much!
This is perfect, I start doing my react app next week!
Nice article!
You used a class format a lot in the article. However, there is a format called functional component
Which one is better?
Since React launched React Hooks, we should advise beginners learn functional components instead of class components.
Great article. Thanks!
This is fantastic, I've been looking for a write up like this. Thank you so much!!
thank you for reading!
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.
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.
Very nice article! Congratulations and thanks for sharing that
Very depth explaination
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.
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.
Ali, thanks for sharing.
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
Thank you!!
Good job!
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.
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 :)
haha thanks for reading!
An extraordinary guide for beginners. Love it.
Thanks a zillion.
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
😊🤠
Not bad! I like it
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 ☹️
Ty so much for the article<3. It was very helpful to me. I'm learning React now and I'm in love!
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 👍
Nice tutorial, just started learning React. Thanks for sharing.
sooo good :) thank you!
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 ?🤔
Cooolll coolll!!! like reading this article 😉
thanks for tutorial
@aspittel , I think you meant 'team' here:
right?
Good catch, thanks!
super awesome :). luv it.
Awesome One
Thank you! this is exactly what I was looking for ^