DEV Community

loading...

Starting React today?

Alexandre Valsamou-Stanislawski
I'm Alex and I'm passionate about code, art and everything in between. I'm also an entrepreneur, and JS/react/Gatsby/Algolia freelancer.
・2 min read

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:

  1. pick a small project idea
  2. use only react to build it
  3. feel the pain, if there is no pain then switch project πŸŽ‰
  4. start again and introduce a single library / pattern that will solve a pain point
  5. 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 πŸ˜ƒ

Discussion (4)

Collapse
andrescampuzano profile image
Andres Campuzano

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.

Collapse
bobylito profile image
Alexandre Valsamou-Stanislawski Author

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 :)

Collapse
moikapy profile image
Warren Gates

If you are looking into ReactJS, check out NextJS, it's a React Framework

Collapse
bobylito profile image
Alexandre Valsamou-Stanislawski Author

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 πŸ˜…