devpapa

Learning React in 2023

I applied for and got accepted to the Andela Learning Program to learn React. It's a partnership between Andela, Meta and Pluralsight to teach tech skills for free to young people in Africa. I will be documenting my progress and writing notes and thoughts here. I'm not a terribly consistent person so I hope I will do better this time. This is not my first learning scholarship, the others didn't work out for various reasons but I'm hopeful this time.

What is React?

React is fundamentally a UI creation [tool | library]. It uses the component model where each UI element is component. So a textbox is a component, a button is a component. These primitive components can but composed to create more elaborate components.

Components as Trees

Components are the building blocks of the UI we create with React. A React app is represented as a tree of components that has a root. All React apps start by rendering a single component. Each component is a child of the root component.

Components in code

In JavaScript code, components are represented as either a class or a function. The functional representation is preferred these days but the class representation is still found in codebases and equally works.

Developing React Apps

You can write React apps locally or on the web. Services like codesandbox.io provide a development environment on the web without requiring you to install anything locally.

If you prefer to develop on your local machine, you have a few options. Let's look at two: NextJS or Vite.

NextJS is a React Metaframework endorsed by the Facebook for developing React applications. While React itself is a library, NextJS is a framework which comes with tools beyond what React provides.

Vite is a build tool. It is fast and comes with a React boilerplate. These days it is favoured over Create-React-App.

VSCode is a popular code editor to write code on, there's also SublimeText, use whatever you prefer. There are a few plugins you may want to get.

On the browser, you may want to get the React Devtools extension for your browser of choice.

React has a simple API. The React-specific information you need to learn are few compared to other libraries and frameworks. There's a large community, a lot of sample code and components already available for almost anything you want to build. Because React is mostly JavaScript, improving your JS knowledge improves your React skills and vice versa.

#react