React is intimidating, daunting even. And yet it is very simple. That's a paradox, right? And it is pretty annoying for beginners, and for me as everyone takes me for a fool. So let's talk about why it feels so damn hard to learn, and how I would start again today.
TL;DR: react is not hard, the ecosystem is. And the ecosystem is like that because it has to answer the many questions React left unanswered. If you're starting today, start a small project with just React, feel the pain, restart the project, add a library, feel other problems, repeat :D
Why does React feel so hard to learn?
But first, what is React anyway? React is a JavaScript library for building user interfaces, UI for short. If you've tried to learn React, you might know that already 😃 What this library does is build HTML and allow you to "react" to user interactions. And that's it, it doesn't even come with a way to deal with data from any source.
Even though, it does "little" it does it very clearly. The library enforces the concept of component. The components can either "draw" HTML tags or other components. Of course, the sub components can do the same. Therefore we end up with a tree structure that builds our UI.
React does contain other concepts, but really that's the gist. And that's the issue. Because it only does the UI, it does not answer the needs for a fully fledged Single Page Application. And thus, the community began to address them which led to the creation of the React Ecosystem. Each piece of the ecosystem comes with its own limitations which led to other patterns and libraries, and so on and so forth...
With this plethora of libraries, best practices and patterns, how does one create solid basis for learning React?
Start like it's 2013 🤘
There is no better way to start learning a new tool than when it is rudimentary. Unfortunately for you, it's not the case anymore with React. But you can still emulate that with create-react-app 👍
# make sure you have node installed
npx create-react-app learning-iteration-1
cd learning-iteration-1
npm start
The recipe is quite straightforward:
- pick a small project idea
- use only react to build it
- feel the pain, if there is no pain then switch project 🎉
- start again and introduce a single library / pattern that will solve a pain point
- repeat from 3.
Here are some challenges that you want to solve in your project:
- synchronize two components that are not parent / children
- load data from the web
- make a big tree and have only few components update
- leave your best idea in comments 😍
With this method, you will build up your knowledge rather than being overflowed by contradictory information. You will be able to forge your own mind on which solutions to adopt.
Hope you will find those suggestions useful 🙇♂️
And follow me if you want to read more react things 😃
Top comments (4)
I just started to learn react and I think is knid of hard at the very beginning because I was accustomed to make web pages just with HTML, CSS and a little bit of JavaScript. But react brings so much code and other stuff I'm learning. It's challenging and that makes react interesting and funny at the same time. Thanks for your post.
Thanks for your comment Andres. I didn't mean to be disrespectful by saying is easy. I overlooked the fact we have to learn our first JS framework somehow :) I wish you the best of luck in your learnings :)
If you are looking into ReactJS, check out NextJS, it's a React Framework
Yes indeed. That's a good way to get started. I like Gatsby as well, but it might be too complex if you just want to learn React 😅