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...
For further actions, you may consider blocking this person and/or reporting abuse
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
Thanks for this Dave, I'm pretty frustrated with react development, what you say though, learn:
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.
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.
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 .
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.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...)
Shouldn't one learn the basic ES6 React app structure nowadays?
Sure, that seems like a good idea. What do you mean by ES6 app structure, and how does it differ from the advice above?
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:
Now class Hello is a React.Component and has a render function. It's similar to what the official react tutorial teaches.
Ahh I see what you mean.
It's a little confusing because there are 3 different ways to write React components:
const MyThing = () => <div>whatever</div>
orfunction 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 extendingReact.PureComponent
instead ofReact.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".
This is a great learning guideline for just about everything. Thank you for sharing!
Thanks, yeah totally - it applies to much more than just React :)
Yeah, definitely.
Hey great article, You can learn react from visualpath.in/ReactJs-Training-in-...
Hey great article, You can learn react from letsfindcourse.com/react