Fundamentals of React
In this post I am going to explain fundamentals in React
React is a famous JavaScript library. As a beginner, you may question what we will build by react. Basically, react is a declarative, efficient, and flexible JavaScript library used for building user interfaces (UI). What we can see in the web application or the browser is called user interface (UI). In this article, I will discuss the fundamentals of react.
React is not a Framework.
React is not a framework. There are many debates about react. Is it a framework or a library? React is not exactly a framework. The framework is a complete solution. Everything you need to make your application is built-in. A framework usually wants you to code everything a certain way. If you try to defer from that way, the framework usually ends up fighting you about it. But in react, you don’t have everything to build your application. You have to plugin another library to complete your task. Libraries are more flexible to work with.
React is declarative
We describe UIs with React and tell it what we want. React will take care of how to do whatever we want. It translates our declarative description to UI in the browser. It is a common language between developers and browsers that allows developers to describe UIs and manage their state declaratively.
JSX IN REACT
We can make HTML elements by using Javascript. But it’s quite a hassle to do. React js make it easy for us. You can make HTML elements by using JSX. JSX is basically a syntax extension of regular JavaScript and is used to create React elements. JSX syntax look like HTML syntax. What we write in JSX render in react DOM. Before displaying in the browser, JSX is compiled by a compiler to React. JSX power full then Javascript template string.
- It performs optimizations while translating to regular JavaScript.
- It makes it easier for us to create templates.
- Instead of separating the markup and logic in separated files, React uses components for this purpose.
Components
components are the building blocks of all the React apps, from the basics to more complex applications that will compose of one to many components.
Think of it in Javascript as the class or the functions that can accept inputs and returns elements based on how the UI should look like.
There are 2 different components to React, and these are:
- Class Components — is a stateful component. Class is one of the most common ways to create a component because it gives a wider range of functionalities and more control especially when it comes to using lifecycle methods.
- Functional Components — the simplest and the most basic component is the functional component that can be written into 2 ways, you can use the old way or simply use ES6’s arrow function syntax. Functional component is stateless.
Virtual DOM
Virtual DOM is a lightweight copy of actual DOM. It is saved in the memory. When some parts of DOM are changes, react compares the changed DOM with Virtual DOM that is saved in the memory. To compare, it uses the deffer algorithm. The algorithm can identify where changes happened and only update that part of the DOM. Changing or updating the whole DOM in a bit slower. Virtual DOM swiftly changes the DOM.
HOOKS
Hooks are a special kind of function that is used in react components. Some of them can be used to provide a functional component with stateful elements like useState. Othe can be used to managed side effects like useEffect. All hooks function begins with the word “use.” React hook functions can only be used in functional components. You can use them in class components.
State
State is an object that holds some information that may change over the lifetime of the component. A state is an observable object used for holding data and can be changed in the future. State only can use in class-based components. The event handler can change a state.
Props
React allows us to pass information to a Component using something called props (stands for properties). Props are basically kind of global variable or object. We can pass props to any component as we declare attributes for any HTML tag. Props can be used in both class-based and functional components.
useState
This is used specifically on Functional component, functional component as I have mentioned is stateless, and by using useState, functional components can become stateful.
useEffect
The useEffect also specifically made for Functional components, it helps functional components make use of the lifecycle hooks that were only available for class components before.
setState
This is probably the only valid way or the best way to update the state of your application.
Component Lifecycle Methods
Every react component has its lifecycle. There are several lifecycle methods that you need to fully understand, read about them from documentations and find tutorials, remember to understand how they work, how they function, which one to use, and most importantly know their timings.
- componentWillMount()
- componentDidMount()
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- componentDidUpdate()
Lists and keys
List and keys are the basics that should be doing should that include React CRUD.
Advanced ReactJS
- Context
This is where the passing of data comes in place into different components and this where Redux comes into play. Here is when we can create global variables so you can easily skip the component tree when you are passing props you don’t have to pass it manually on every level, it is like jumping off from Grandparent components to child component.
2. Higher-Order Components
This is an advanced trick in React about reusing component logic, this happens when a component function which you will then call a higher-order component takes a component and returns a new component.
3. Refs
Refs lets you access the DOM. One of the most important rules in React is to not imperatively manipulate the DOM, however, there are instances wherein you have to, so here comes ‘refs’ to the rescue.
4. Error Boundaries
This helps catch errors to be able to properly setup UI fallback if there are any exceptions, because of React’s different way of handling the DOM, the catching of errors will also be handled differently.
5. Portals
Portals help you render UI that is outside the root element of your React app. The best way to imagine this is to think of a doorway that will bring you to magical places in different locations or countries of your like.
6. HTTP Requests
Here comes API. You can either use fetch or a tool like Axios to help handle GET and POST requests.
Conclusion
In this post, I have explained, fundamentals in ReactJS, what are components, Virtual DOM, Hooks, jsx, State, Props and how and where to use them in React.
In my next post I am going to describe Getting started with React
This post is part of “React-Step by step”.