August 2, 2021

The Path with React

React is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications.

React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.

1. Learning React fundamentals

 React can be used as a base in the development of single-page or mobile applications. However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing. React Router is an example of such a library.

What React fundamentals do you need to know?

  • React is all about components
  • What the flux is JSX?
  • You can use JavaScript expressions anywhere in JSX
  • How to pass data (+ JSX elements and components) to components using props and when to do so
  • You can write React components with JavaScript classes
  • Events in React: Two Important Differences

Hooks were a great improvement. They made React apps simpler, more powerful, and allow us to write less code. What’s important for you to know is the five core React hooks.

2. The best part of React: React Hooks

Hooks are functions that let developers “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes. React provides a few built-in hooks like useState, useContextuseReducer and useEffect. Others are documented in the Hooks API Reference. useState and useEffect, which are the most used, are for controlling state and side effects respectively.
Here below are some React Hooks listed which you may find useful.

  • useState: it is a Hook (function) that allows you to have state variables in functional components.
  • useContext: Context provides a way to pass data through the component tree without having to pass props down manually at every level. components more easily [rather than passing props]
  • useCallback: Returns a memoized callback.
  • useEffect: The Effect Hook lets you perform side effects in function components
  • useRef: useRef can holds a mutable value in it.
  • useReducer: Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. 

3.Get yourself boosted in Building blocks of web

The main building blocks of web are HTML, CSS and Javascript. A developer trynna be good at React must know these. React makes use of them to help you create apps. if you have already learnt all these then this will be a good start for you.

What JavaScript concepts should you know for React?

  • Basic data structures: variables, objects, and arrays
  • Array methods and working with array data: .map().filter(), and .reduce()
  • Be very familiar with functions and a little bit with classes
  • Asynchronous JavaScript: promises, making HTTP requests with Fetch API, async/await syntax can help
  • The DOM: learn to create, select and modify HTML elements as well as their attributes
  • Object and array destructuring are helpful for working with data

Many developers claim that you should know “ES6/ES7/ES8/ESNext JavaScript” (in other words, the latest JavaScript features) to better learn React. Knowing more JavaScript can help, but new features can also serve as a distraction for new learners. First, become confident with the JavaScript concepts I’ve listed above by building some small projects that require JavaScript. After that, you can take a look at some newer features of the language.

4. React Components

React code is made of entities called components. Components can be rendered to a particular element in the DOM using the React DOM library. When rendering a component, one can pass in values that are known as “props”.
The two primary ways of declaring components in React is via functional components and class-based components.
Functional Component – Functional components are declared with a function that then returns some JSX.
Class-based components – Class-based components are declared using ES6 classes.

5. The JSX and it’s Role

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. We will come back to components in a further section, but if you’re not yet comfortable putting markup in JS, this talk might convince you otherwise.

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

6. The Virtual DOM

In React, for every DOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation of a DOM object, like a lightweight copy. A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.

Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house. When you render a JSX element, every single virtual DOM object gets updated. This sounds incredibly inefficient, but the cost is insignificant because the virtual DOM can update so quickly.

Once the virtual DOM has updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update. By comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed. This process is called “diffing.” Once React knows which virtual DOM objects have changed, then React updates those objects, and only those objects, on the real DOM. In our example from earlier, React would be smart enough to rebuild your one checked-off list-item, and leave the rest of your list alone.

7. React Lifecycle Methods

Every component in React goes through a lifecycle of events. Just like to think of them as going through a cycle of birth, growth, and death.

  • Mounting –Birth of your component
  • Update – Growth of your component
  • Unmount – Death of your component

React and Future Development

Project status can be tracked via the core team discussion forum. However, major changes to React go through the Future of React repository issues and pull requests. This enables the React community to provide feedback on new potential features, experimental APIs and JavaScript syntax improvements.