An aspiring React developer? One a bit intimidated or just slightly overwhelmed by this JavaScript framework's particularly heavy ecosystem, by its whole mazelike infrastructure of tools and libraries? I know! I've been there, too, and this is precisely why I feel like giving you this friendly advice here: the best way to learn React is “one bite at a time"! No need to desperately “shovel” all the information you'll find on React: you'll only end up with an... “indigestion” and with no in-depth knowledge of the framework itself.
- it's the easiest one to learn, compared to all the other JavaScript frameworks
- it's a robust and effective web development framework for building dynamic apps with
- it's not mandatory that you go entirely “headless” in order to integrate React parts into your Drupal web project (you can always harness the power of the Drupal 8 JsonAPI module): a tremendous convenience for you, a Drupal developer in Canada who's eager to acquire the latest front-end coding techniques and skills, too (aren't you?)
Should I go on with my list of “guesses” on why React makes such a hard to resist to “temptation” to you right now?
No point! Since why you're interested in learning this framework is more than obvious.
Instead, I'll do my best to you present to you and to advocate for the very best way to learn React: the systematic, step-by-step way!
In this respect, here's the 5-stage learning cycle that I recommend to you:
Stage 1: Read the React Documentation, The Best Way to Learn React
Sorry, but there's no way around this!
Jumping straight to building your development environment and skipping going through the terminology and the basic concepts is like... striving to learn how to ride a bike before you learn how to walk!
I know that reading documentation is particularly tedious, yet it's a must!
Make sure you focus your attention on the Quick Start and the Advanced Guides sections and that you re-enforce all that information using the Code Sandbox, too. This way you'll get to maximize this perfect “blend” of theory and practice, to try things out as you read about them!
Furthermore, as you'll advance in your learning efforts and you'll inevitably reach the “Create a New App” section on that very page, my advance is to resit it! To resit the temptation of proving yourself what a quick learner you are by jumping to building your development environment.
Stick to getting a solid grasp of all the needed fundamental concepts first (maximizing Code Sandbox's or CodePen's potential to your full advantage) and leave the “playing with” this tool (“Create a New App”) for later!
Stage 2: Take the React Fundamentals Training Course
Take it as a "reward" for having gone through the “tiresome” docs!
By now all the basic concepts should have gone from “foreign language” to perfectly functional and “meaningful” programming language!
Getting back to our training course now, you should know that it fully covers the basics while getting you familiarized with all the React-specific stuff that you'll depend on for building your first React app. “Stuff” like webpack for instance!
And since this course will practically provide you with all the “bare essentials” in terms of information for architecting your first React app, you could as well stop here.
The best way to learn React could easily be a two-step plan for you!
But (for there is a “but") if you're working on a larger client-based project, then “the show must go on”! You'll need to get your share of information comprised in the next 3 learning stages, too!
Assuming that you stopped here, here's what you would have already assimilated by know (and here I'm referring to what you will have learned specifically from this training course):
- a basic know-how of React's build tools
- how to navigate from one page to another within a React app (or “routing”)
- how to collect async data
- how to handle stateless functional components
Stage 3: Delve Deep into React Bits
Now you can easily say that you've reached an intermediate level as an aspiring React developer. You're no longer “swimming in a sea of unfamiliar concepts and “alien” building tools!
At this level you're just re-enforcing the notions that you will have learned and eventually you're filling in any gaps that you'll “detect”.
And React Bits, that Vasa from WalmartLabs has kindly put up especially for determined “wannabe” React developers like you, come to make the process so user friendly!
For it's not actually a book that you'll go through, but a “bundle” of tips and tricks instead. Moreover, a constantly updated one including a bunch of references for each “bit” of information in case you want to delve deeper into it!
Go through the “Design Patterns and Techniques” section, then dig through the “Anti-Patterns” chapter and then... keep digging!
My suggestion (and this is, in my opinion, the best way to learn React) is to get serious about your learning plan and to go through all of the tips included there instead of just sweeping through and rushing in to the next stage, eager to learn the “complex stuff”.
Stage 4: Get Started With Redux
Here you are, ready to advance from the level of “aspiring” React developer to that of a “junior” React developer! One who's already acquired the bare essentials! The notions and the set of skills that grant you a certain level of independence if your work involves developing simple React apps.
When things get more complicated and, therefore, your app's whole architecture gets more intricate and challenging, it's time you learned Redux! That's right: the best way to learn React it to subsequently learn Redux, too!
It will make all the difference when you get yourself caught in the “spiderweb” of a large React-based project with lots of other developers to work with and lots of moving parts to handle.
An alternative for Redux is MobX, so take your time to go through the prons and cons of the two before you take my recommendation for granted:
- Mobx is easier to learn and this can be a huge asset
- Redux is better “equipped” for handling large projects
In short: your choice should depend on your own goals as a React developer!
Now, getting back to Redux's learning process, it goes without saying that you can't avoid reading the documentation. And assimilating the info there will get tricky if you're not used to the functional programming and its specific syntax.
Still, no need to get discouraged: leave out what you don't understand at first, then you'll see that it will all start to gradually make more sense and to take shape in your mind as you go over the next section, and the next...
Tip: after going through Redux's documentation you might feel like filling in the gaps, again, or simply re-enforcing the newly acquired information. For this you have the “Getting Started with Redux” video series to go through!
Note: mind you don't let yourself tricked into thinking that putting all those concepts together (Actions, Usage with React, The Three Principles,. Reducers, Async Flow, Reducers, Middleware etc.) will go as smoothly as understanding them. Taken separately, they're easy to “decode”, but expect to be challenged to put a bit more effort for “putting all the puzzle pieces together” in your head.
Stage 5: Ramp Up Your Knowledge of Redux
Now that you're familiar with the terminology and the basic concepts, how about moving on? How about expanding your knowledge?
And the best 2 means for you to advance in your learning process are:
By the time you've gone through these 2 resources from cover to cover:
- functional programming won't sound like “alien language” to you anymore
- overall creating a React middleware and architecting a React app will start to come more natural to you
There you go! Now you're all set, “supercharged” with the basic tool set that you'll need for starting to work on your first React app. Moreover, the skills you will have acquired by now, supported by all the React-specific information that you will have “decoded”, will give you the best boost you'll need to take on larger, more complex React projects, too!