over 6 years ago from Adam Rasheed, Frontend Software Engineer
Hi guys, I'm a designer who know html/css/scss and some light jQuery, but I want to learn vanilla JS and ES^ (I was told this is a standard now), and React in the future.
So, where do I start? Whats the best roadmap for me to take?
Learn ES6 first.
THE best resource. This changed my whole game:
Then move into React. Start with this video series. It teaches you React & Redux:
Then read this many times over:
I did this in the complete opposite order, and wish I did it the way I'm telling you now.
I also used this for reference when trying to connect the dots between React & Redux. Simple React & Redux eample
Follow me on twitter if you got more questions @dillonraphael
Nice! Definitely following this!
Thanks for the links. If I were to start here from the beginning.. Do you think you could give me a rough estimate for how long you think it will take me to get through all this? I'm not a fast reader, and I tend to be slightly busy throughout the week..
That's a loaded question. Personally I allocate at least an hour a day to studying.
How is it loaded? I was genuinely curious about the time needed to invest to learn this stuff.. I can't read very fast, and I have a lot of existing responsibilities that I need to take into account.
Is there a different way to ask this question? Would you prefer that people don't ask questions?...
Whoa, thanks for the links!
Can you explain why you suggest doing ES6 first? I'd recommend learning the core, vanilla, JavaScript before anything else. The reason being that there is a large amount of legacy code out there that developers will need to manage.
The idea of learning a language then building apps from scratch can be misleading. I'd say most of my development experience has been about 75% maintaining an existing codebase written in php or js.
Not saying learning ES6 is a bad idea I'm just curious why you'd suggest it without learning the core concepts first.
Honestly, I'd say people that understand Backbone are the most well rounded developers out there right now.
I think the ES6 part is related to the React specific path he's supporting here.
You Dont Know JS up and going teaches the foundation of javascript. It has a mix between ES5, 6 and even 3. But the majority of the book teaches for the future which is ES6.
Great answer. Only thing I'd make sure to mention is;
Have a side-project.
With anything you want to learn; think of a side-project that will make use of whatever it is you want to learn, and have a practical approach. It'll help you leaps and bounds with motivation, but you'll also be producing something and solving real life problems that you'll run in to.
I would say, similar to any other language, the best way to learn is to just dive in with a simple project.
Personally, from a design standpoint, I would play around with something like PaperJS first, just to get used to some JavaScript basics. PaperJS is nice because you can do a bunch of quick, simple projects, that can be pretty rewarding (bonus points in that you can export your work as SVG to use in more traditional design tools).
Once you have some of the basics of JavaScript down, then I would start to tackle larger projects in the area you want to focus in (i.e. UI elements? web design / interaction, etc...).
You can find info on PaperJS here: http://paperjs.org/
A lot of folks are saying to read books about react and the latest and greatest, ES6. Which isn't incorrect but, IMO, there isn't a "one-size-fits-all" correct route out there (and neither is what I'm about to write).
I personally believe the best way to learn JS as anyone (designer/dev) varies from person to person. You may retain more information by reading or maybe watching videos or maybe both or maybe just by building.
If you know jQuery, then you're in a good spot. If you wanted to learn straight up JS. I'd say attempt to recreate some of your jQuery code in vanilla JS. Start there and see how that goes.
If you know basic JS then upgrading to the niceties of ES6 (fat arrow functions for example or implicit/explicit return statements) will be easier to grasp, understand and use.
YDKJS is a great book series and worth its weight. So is How to Learn JS Properly as well as javascriptbook.com. All are wonderful. IMO there is one fault in some of these (not all but some).
They teach you how to use the tools, they don't teach you about the tools. IMO, they feel very similar to "teach-how-to-type" jQuery tutorials that would walk through a simple thing but never exposed the philosophy or thinking behind them.
It may be beneficial to also learn about JS as a whole (the history, the patterns, the environments, the methodologies) which may provide a holistic understanding of the language.
Javascript Patterns Book is a great one. Object Oriented JS is a great book too.
May also be worth it to read the source of your most used libraries (jQuery is a great one) and see how they do things. I've found myself surprised more times than not at how simple and straight forward some of the most popular libraries online are written.
This is the best answer in my opinion.
I have nothing but good things to say about React for Beginners and ES6 for Everyone by Wes Bos.
+1 for ES6 for Everyone
This is a great combination but for a JavaScript n00b?
I'd say teamtreehouse.com, I learned from that and Codecademy.
Make sure you don't skip Javascript: The Good Parts, written by Douglas Crockford, who is kind of a legend in the JS ecosystem. Marvelous introductory book to the nuts & bolts of Javascript.
Watchandcode is really really good, and free! Created by former google engineer. http://watchandcode.com/p/practical-javascript
javascriptbook.com
This is an awesome book to start learning JS
My friend is teaching himself JavaScript and recommends trying Eloquent Javascript [http://eloquentjavascript.net]. Its interactive component allows you to see the results of your code within the website.
Don't get to caught up in Frameworks and Libraries. There are a lot of fundamentals you'll need to have nailed before you can utilize them.
Start with Framerjs.com so you can start to code a little each day. It doesn't matter that it's Coffeescript, you need to starting thinking like a computer.
It's a good idea to pick a small project that you can work towards and stay motivated about. Mine has always been browser based games.
The Meteor framework is super friendly for beginners, and will help you do full stack development.
Ultimately, learning how to code JS is learning programming. It's going to take some years and you'll need to stay motivated!
If you want to play with React then this is the easiest way to get something up-and-running without having to delve in to the world of pain that is Webpack: https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now