Basic Programming with React

React is a JavaScript library for user interfaces (UI) and is the most widely used among professional developers, according to a 2024 Stack Overflow survey. It was created by Facebook in 2013 to address the growing complexity of their applications, which led to various issues in managing the UI. Since its development, React has been increasingly adopted by major tech giants such as Netflix, Airbnb, PayPal, Instagram, WhatsApp, Uber, and domestic tech companies like Tokopedia and Traveloka.

Basic Principles of React

Declarative

React uses a declarative approach that focuses on what a program should do, rather than how to do it. This allows developers to focus on what needs to happen in the UI, instead of writing code to manipulate the DOM to achieve the desired result.

Example of declarative code in React:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

Component-Based

React follows a component-based approach, where data or information contained in a component is encapsulated, making the development process modular. Each component can have as many subcomponents as necessary. This way, a complex UI can be built from components and subcomponents, which can be reused across different parts of the application or even in other apps. A common subcomponent is a button, which can be used for actions like submit, open, close, read more, etc. Without components, the same button code would need to be written repeatedly. With React, you only need to create one button component and reuse it throughout the app.

Virtual DOM

React uses a virtual DOM to manage state changes in the application instead of using the real DOM as in standard JavaScript. In the real DOM, every time there’s a change, the affected element and its descendants are re-rendered, which can degrade performance and slow down the app.

To address this, React uses a virtual DOM, a lightweight copy of the real DOM. Changes are made in batches on the virtual DOM and then synchronized with the real DOM. This process is handled through reconciliation, which stores a visual representation of the UI in memory.

React Ecosystem

ReactDOM

ReactDOM is a package used to manage DOM elements in web-based applications.

React Native

React Native is an open-source framework for building mobile applications for both Android and iOS.

React Developer Tools

A browser extension for debugging and inspecting component hierarchies, props, and state in real-time.

Testing

React provides tools such as Jest for unit testing and React Testing Library for component testing.

Setting Up the React Development Environment

Create React App (CRA)

Previously, CRA was the most commonly used tool for creating React projects. However, it is no longer recommended, although it’s not deprecated yet—it is just no longer maintained.

Some drawbacks of this tool include performance limitations because CRA uses Webpack, which is slower in bundling. Additionally, CRA creates relatively large bundles and requires extra configuration to optimize performance. Moreover, the React team has shifted focus to developing React’s ecosystem around Server Components and concurrent rendering features.

Command to create a React app using CRA:

npx create-react-app
npm run start

Vite

Vite is a tool for modern web project creation, designed to provide a fast and lightweight development experience. It offers two major advantages: Hot Module Replacement (HMR), which allows API updates without reloading the web page and losing the application state, and bundling with Rollup, a module bundler for JavaScript that compiles small source code into more complex code such as a library.

Command to create a React app using Vite:

npm create vite@latest
npm install
npm run dev

Weaknesses of React

Although React is a popular choice for modern web application development, it has some shortcomings:

SEO (Search Engine Optimization)

React relies primarily on client-side rendering (CSR), a method where JavaScript is used to load a web app by sending the required resources to the user’s browser and loading content based on the user’s actions. This method makes it harder for search engine bots and crawlers like those used by Google and Bing to index the site, which is typically easier in server-side rendered apps.

Rapid Changes

The React ecosystem evolves rapidly, requiring developers to constantly learn and adapt to new features. Tools or libraries that are quickly evolving or no longer maintained can pose security risks for applications. Some examples of features and libraries that are no longer recommended in React include:

•	Create React App (CRA) - Switch to Vite, Next.js, or Parcel
•	Class components - Switch to functional components
•	Lifecycle Methods - Switch to the useEffect hook

---

The beauty of programming is that there's always something new to learn. The learning process is never-ending, and that's what keeps it exciting. This is my ongoing journey into the world of programming. I'm constantly learning and growing, and I'm excited to share my experiences with you as I progress.

const developerName = "Ano Jumisa"