React.js is a JavaScript library useful for building fast and scalable user interfaces. It is one of the most popular JavaScript libraries and easy to get up and running with.
Before you learn React, it is advisable to have a good grasp of JavaScript especially ES6, and the concept of Object Oriented Programming.
The Roadmap
Node
The first step is to download and install node on your local system.
Set up
To get up and running with react, you need to get a copy of the react library. You could do this with npx create-react-app or use alternatives like vite.js.
JSX
JSX is JavaScript HTML. It allows us to write HTML in JavaScript, making its syntax look similar to HTML. It is important to get familiar with this language to start working with the react library.
Components (functional and class)
Everything in React is made up of components, which makes them important to this framework. This is one of the most important React fundamentals you should start with. React has built-in components but you can also create custom components to build your app user interface. Components could either be functional or class-based.
Props and State
Props and state are other important concepts needed for your components. You can pass properties(props) to your components to render differently based on the values of the properties.
State, on the other hand, is any data that components want to use to render themselves. The setState() function is used to render your state.
You should learn these two and also when to use them.
Conditional Rendering
This is no different from conditional statements in JavaScript. If you can use if/else statements and ternary operators, you will have no problem with conditional rendering.
Component Lifecycle
This is another crucial concept in React you should learn about. React provides several lifecycle methods that are used to listen for changes in your component.
Basic Hooks(useState, useEffect)
Hooks are required to keep state in your function components. Hooks are functions that start with "use" and allow you to use various React features like tools for managing state and component lifecycles. As a beginner, you should start by learning how to use the useState and useEffect hooks.
Events
React event handling has some peculiar conventions, such as using camelCase for event names (onclick - onClick). You should also learn these.
Lists and arrays
With the power of JSX, you can create lists of elements by looping through an array. This is an interesting concept you should also know about.
Compositions vs Inheritance
These are object-oriented programming concepts. Inheritance occurs when a child class inherits properties from its parent class while composition describes a class that can refer to one or more objects of another class as instances rather than inheriting properties from a base class. You can use either of the two in React.
To conclude, these are the fundamentals of React to get you started with the library. It is advisable to learn and practice these concepts before moving to advanced ones.
Top comments (0)