DEV Community: Hemant Kumar

Achieving Reusability With React Composition

Hemant Kumar — Tue, 17 Jan 2023 07:43:29 +0000

React Composition is a development pattern based on React's original component model where we build components from other components using explicit defined props or the implicit children prop.

In terms of refactoring, React composition is a pattern that can be used to break a complex component down to smaller components, and then composing those smaller components to structure and complete your application.

Accordion Component

import React, { useState } from "react";

const Accordion = () => {
  const [expanded, setExpanded] = useState(false);

  const toggleExpanded = () => {
    setExpanded((prevExpanded) => !prevExpanded);
  };

  return (
    <div>
      <button onClick={toggleExpanded}>
        Header <span>{expanded ? "-" : "+"}</span>
      </button>
      {expanded && <div>Content</div>}
    </div>
  );
};

export default Accordion;

 import React from "react";
import Accordion from "./components/Accordion";

const App = () => {
  return <Accordion />;
};

export default App;

Editable Component

import React, { useState } from "react";

const Editable = () => {
  const [editable, setEditable] = useState(false);
  const [inputValue, setInputValue] = useState("Title");

  const toggleEditable = () => {
    setEditable((prevEditable) => !prevEditable);
  };

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      {editable ? (
        <label htmlFor="title">
          Title:
          <input
            type="text"
            id="title"
            value={inputValue}
            onChange={handleInputChange}
          />
        </label>
      ) : (
        <>Title: {inputValue}</>
      )}
      <button onClick={toggleEditable}>{editable ? "Cancel" : "Edit"}</button>
    </div>
  );
};

export default Editable;

import React from "react";
import Editable from "./components/Editable";

const App = () => {
  return <Editable />;
};

export default App;

Let's explore one similarity between these two components.

Problem: Notice how both the Accordion component and the Editable component share the same functionality, where both are dependent on a boolean and a function to update that boolean — in other words, a toggle functionality.

Solution: We can use a custom hook that will allow us to reuse this toggle logic in both components, and in any new component added in the future.

What is the difference between state and props in React?

Hemant Kumar — Tue, 17 Jan 2023 07:28:08 +0000

Props and state are related. The state of one component will often become the props of a child component. Props are passed to the child within the render method of the parent as the second argument to React.createElement() or, if you're using JSX, the more familiar tag attributes.

<MyChild name={this.state.childsName} />

The parent's state value of childsName becomes the child's this.props.name. From the child's perspective, the name prop is immutable. If it needs to be changed, the parent should just change its internal state:

this.setState({ childsName: 'New name' });

and React will propagate it to the child for you. A natural follow-on question is: what if the child needs to change its name prop? This is usually done through child events and parent callbacks. The child might expose an event called, for example, onNameChanged. The parent would then subscribe to the event by passing a callback handler.

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

The child would pass its requested new name as an argument to the event callback by calling, e.g., this.props.onNameChanged('New name'), and the parent would use the name in the event handler to update its state.

handleName: function(newName) { this.setState({ childsName: newName }); }

props vs state

tl;dr If a Component needs to alter one of its attributes at some point in time, that attribute should be part of its state, otherwise it should just be a prop for that Component.
**
props**
Props (short for properties) are a Component's configuration. They are received from above and immutable as far as the Component receiving them is concerned. A Component cannot change its props, but it is responsible for putting together the props of its child Components. Props do not have to just be data -- callback functions may be passed in as props.
**
state**
The state is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events.

A Component manages its own state internally. Besides setting an initial state, it has no business fiddling with the state of its children. You might conceptualize state as private to that component.

Changing props and state
props state
Can get initial value from parent Component? Yes Yes
Can be changed by parent Component? Yes No
Can set default values inside Component?* Yes Yes
Can change inside Component? No Yes
Can set initial value for child Components? Yes Yes
Can change in child Components? Yes No

Note that both props and state initial values received from parents override default values defined inside a Component.
Should this Component have state?
State is optional. Since state increases complexity and reduces predictability, a Component without state is preferable. Even though you clearly can't do without state in an interactive app, you should avoid having too many Stateful Components.

Component types
Stateless Component Only props, no state. There's not much going on besides the render() function. Their logic revolves around the props they receive. This makes them very easy to follow, and to test.

Stateful Component Both props and state. These are used when your component must retain some state. This is a good place for client-server communication (XHR, web sockets, etc.), processing data and responding to user events. These sort of logistics should be encapsulated in a moderate number of Stateful Components, while all visualization and formatting logic should move downstream into many Stateless Components.

Introduction to React ⚛️

Hemant Kumar — Sat, 27 Nov 2021 16:42:46 +0000

What is React.js?

React… let’s say you are browsing the internet and the content on a page requires some changes according to your inputs, time, or any other factor.. JavaScript seems to be inefficient and complex for handling those changes, hence a library to “react” to those factors and update the content of a page is called React.js ⚛️.

React is component based, meaning it can be used to build simple reusable components of the UI (example: a button) and use it everywhere in your app.
React is state based, implying the app’s state is handled and accordingly the render takes place, this helps to write better and predictable code.
To phrase it properly, React is a free and open-source front-end JavaScript library for building user interfaces or UI components.

History (A small flashback) 📜:-

In 2013, Facebook struggled while handling Facebook Ads and was looking for a way to make small components that build up to make bigger and multifunctional apps. Hence, some basic prototype versions of react were made such as Xhp, and FaxJS. Soon after acquiring Instagram, Facebook built the first stable version of React and deployed it in 2014 as a small part of its User Interface while also open-sourcing it. Many had hopes but were skeptical with thoughts that were along the lines of “HTML in JavaScript? Why?”

But what is App? App is just a function. A JavaScript Function. Yes, React has brought a component based UI system to its bare minimum. I may sound weird, but trust me, it took decades to get here. and React is the finest in history. At least according to most of the web developers.

How to code the “hello world” react App?
Once you have Node.js and NPM installed go ahead and run the following command in your terminal:

npx create-react-app my-app // Sets up a basic react project

Open the folder “my-app” in any of your code editor. This is how the files should look like:

src —Folder where the main core react files will be coded and stored.

public —Folder where you can place your assets and the index.html file.

Please feel free to ignore the following files as we won’t be testing our app or report vitals for time being :)

In every react based project, there will be an index.html containing a div or a section tag with an id of “root”. This div is where we would render or paint our complete react app.

Starting GUI with a Swing..

Hemant Kumar — Sat, 27 Nov 2021 16:09:09 +0000

Java is a powerful programming language that is right at home in standalone desktop applications and complex enterprise-level web applications. It is a popular programming language for computer science students because it incorporates just about every key concept of modern object-oriented programming yet remains relatively easy to learn.

The Swing toolkit offers developers a platform-independent, customizable, configurable, and lightweight solution that can easily be incorporated into practically any Java program. The toolkit offers basic components like buttons and labels as well as advanced features including trees and tables. The entire toolkit is written in Java and is part of the Java Foundation Classes (JFC). The JFC is a collection of packages designed to create fully featured desktop applications. Other components of the JFC include AWT, Accessibility, Java 2-D, and Drag and Drop.