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?
- How to pass data (+ JSX elements and components) to components using props and when to do so
- 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
useEffect. Others are documented in the Hooks API Reference.
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
3.Get yourself boosted in Building blocks of web
- Basic data structures: variables, objects, and arrays
- Array methods and working with array data:
- Be very familiar with functions and a little bit with classes
- 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
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.
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