DEV Community: Yuya Hirano

How to Understand What Builds the Website You're Seeing

Yuya Hirano — Sun, 11 Jun 2023 04:57:23 +0000

Introduction

Have you ever wondered about the underpinnings of the websites you visit daily? The seamless transitions, the attractive layouts, and the rapid loading speeds - have you ever been curious about what makes all this possible? Or perhaps you've had an innovative idea for a service, but you're unsure what technology you should use as a reference?

In today's digital age, where websites are increasingly complex and rich in functionality, understanding their construction can be an incredibly beneficial skill. Whether you're a budding developer, a product manager, or just a tech enthusiast, gaining insight into the technologies that build the website you're seeing can open up a new world of possibilities.

In this article, we'll introduce two powerful Google Chrome extensions, WhatRuns and Wappalyzer, that can help you uncover the technological layers behind any website. Join us as we delve into the mysterious, intriguing world of website construction.

Unmasking Web Technologies with WhatRuns

One of the simplest and most effective ways to identify the technology behind a website is through the use of browser extensions. The first one we will explore is called WhatRuns.

WhatRuns is a free Google Chrome extension that lets you discover what technologies are used on any website you visit. From server software and analytics tools to programming languages and content management systems, WhatRuns provides a wealth of information at your fingertips.

How to Use WhatRuns

Installation:
First, you'll need to install the WhatRuns extension. Simply go to the Google Chrome Web Store, search for "WhatRuns", and click "Add to Chrome".
Exploring a Website:
Once installed, visit any website you're curious about. Click the WhatRuns icon on your browser toolbar (it will turn blue when you visit a website).
*Understanding the Results: *
A sidebar will appear on the right side of your browser, revealing all the technologies used on the website. These are typically categorized into different sections such as 'Frameworks', 'Programming Languages', 'CMS', 'Web Servers', 'CDN', and more. Clicking on any technology will take you to a more detailed explanation.

WhatRuns also provides a unique feature allowing you to follow websites. If the site updates its technology stack, you will get a notification. This can be especially useful for web developers and tech enthusiasts looking to stay updated with their favorite sites' technology trends.

Remember, while WhatRuns provides an excellent starting point in understanding a website's architecture, it may not capture every detail, as some technologies could be hidden or customized. Nevertheless, it's a handy tool for anyone interested in exploring the world of web technology.

Demystifying Web Stacks with Wappalyzer

Wappalyzer is another invaluable browser extension that identifies technologies used on websites. Similar to WhatRuns, it uncovers the various technologies a site employs, including web frameworks, server software, and even the type of content management system used.

How to Use Wappalyzer

Installation:
To start using Wappalyzer, you'll need to add it to your browser. Go to the Google Chrome Web Store, search for "Wappalyzer", and click "Add to Chrome".
Investigating a Website:
With Wappalyzer installed, navigate to a website you're interested in. Then, click on the Wappalyzer icon in your browser toolbar.
Deciphering the Results:
A popup will appear listing all the detected technologies, categorized by type such as 'CMS', 'Analytics', 'JavaScript Frameworks', etc. Clicking on a particular technology will take you to a description and additional details about it on the Wappalyzer website.

One of Wappalyzer's standout features is its ability to show the popularity and ranking of each detected technology. This can be extremely useful for developers, product managers, or business owners to identify trending technologies in their industry.

Conclusion

In the digital era, understanding the underlying technologies of websites is more than just a valuable skill - it's also a fascinating exploration. Tools like WhatRuns and Wappalyzer make this journey accessible, offering insights into the construction of the websites we browse every day. They not only serve practical purposes for developers and digital professionals but also provide an enjoyable experience for the curious mind.

So the next time you visit a website, take a moment to uncover the technology behind it. You'll gain a deeper appreciation for the digital world around you, and who knows, it might just inspire your next big idea. Happy exploring!

How to Solve Unexpected Margins in HTML and CSS

Yuya Hirano — Sat, 27 May 2023 08:29:36 +0000

Introduction

While working on web development, have you ever encountered unexpected margins appearing and disrupting your layout? How do you handle such a situation? Today, I'm going to introduce a handy CSS trick for addressing this kind of issue.

Margin Issues and How to Deal With Them

Firstly, take a look at the image below. It's a webpage layout displaying news articles, but you can see some margin on the right side.

This margin is caused by certain elements spreading beyond the width of the page. But how can we identify which element is causing the problem?

The solution is to add an outline to all elements. The following image shows the result.

This red outline is applied with the following CSS code:

*{
    outline: 1px solid red;
}

This code adds an outline to all elements on the page. This way, it's easy to see which elements are overflowing on the right side.

Conclusion

This CSS technique is a great tool for identifying the cause of unexpected margins in your layout. Once you've identified the problematic element, you can solve the issue by adjusting the styling for that element.

However, remember that this CSS snippet is a debugging tool and should be removed after debugging is complete.

So, that's one way to detect and deal with unexpected margins in HTML and CSS. Remember this technique, and you'll be able to quickly handle margin issues when they arise. Enjoy your web development journey!

Finally, I created a my first CRUD web application with React and Supabase!

Yuya Hirano — Mon, 15 May 2023 21:23:31 +0000

Introduction

I have created a web application that can do CRUD.
The name of the application is Motive Diary.
This application is sort of a diary application, but it is intended to help you achieve your goals and stay motivated.
Users set a goal and the number of days to achieve it, and record their daily progress. The daily record can then be easily reviewed.

Features

Easy Goal Setting and Daily Logging:

Motive Diary allows users to easily set goals and log their daily progress. Users can specify their goals and the desired timeframe for achievement, making it effortless to track their progress through the application.

Sustaining Motivation and Reflection:

Motive Diary facilitates the recording of daily progress and encourages users to reflect on their goals. Users can conveniently review their progress and visualize their accomplishments within the application. This feature not only provides a sense of achievement but also helps users maintain motivation towards their goals.

Motivation Behind Development

I also used the hashtag "100daysofcode" on Twitter. However, even if I achieved 100 days, could not easily look back at our progress later. (Because other people use the same hashtag and I tweet other things)
So I decided to create a Motive Diary, something that would make it easier to keep track of my days and something I could easily look back on later.

I wanted to create a solution that would not only simplify the process of keeping track of daily progress but also provide a centralized platform for easy review and reflection in the future. With the Motive Diary, users could have a dedicated space to record their daily activities, milestones, and achievements, making it effortless to look back and see how far they had come.
And also you can get cheer from other people who challenging their own challenge.

Built With

Motive Diary is created with React, Supabase, Material UI.
I chose ReactJS why is easily created front-end.
I utilized React component-based state management capabilities to develop a responsive and interactive user interface that seamlessly captured user input and displayed the progress.

In addition to react, I chose Supabse.
Supabase offered a real-time database with built-in authentication and authorization features, which greatly simplified the development process.
I utilized Supabase database functionality to store and manage user data, including goals, daily progress, and achievements.

release and feedback

I used Vercel for release.
I chose it because it was the easiest and I was a little familiar with its use.
You can easily send feedback from the app.(you need sign in)
Please try it. And I look forward to receiving lots of feedback.

in the future

This application is still in the testing phase, so updates will be made daily, mostly to adjust the look and feel and add new function.
Please do not worry and use it.
I intend to develop features such as rankings of those who are still challenging for long time, and notifications of what you need to do today.
I am also looking for someone to support me as I am not familiar with the UI/UX and web design.

In conclusion

If you have any inquires, please contact me via email.
yuyahirano.dev(at)gmail.com

Motive Diary.

Thank you.

The Benefits of Functional Programming in React

Yuya Hirano — Mon, 10 Apr 2023 00:13:04 +0000

1. What is functional programming?

Functional programming is a programming paradigm that emphasizes the use of pure functions and immutable data. A pure function is a function that given the same input, always returns the same output and has no side effects. Immutable data refers to data that cannot be modified once it has been created.

Here's an example of a pure function:

function square(num) {
  return num * num;
}

And here's an example of immutable data:

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4];

2. Improved code readability

One of the main benefits of using functional programming in React is that it can lead to improved code readability. Here's an example of how functional programming can make our code more readable:

// Imperative approach
function Button(props) {
  const handleClick = () => {
    props.onClick();
  };

  return <button onClick={handleClick}>{props.label}</button>;
}

// Functional approach
function Button({ onClick, label }) {
  return <button onClick={onClick}>{label}</button>;
}

In the imperative approach, we are defining a separate handleClick function and using it inside the Button component. This can make the code harder to read and understand. In the functional approach, we are passing the onClick and label props directly to the button element. This makes the code more concise and easier to understand.

3. Improved scalability

Functional programming can also lead to improved scalability in React applications. Here's an example of how functional programming can make our code more scalable:

// Imperative approach
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount() {
    this.setState({
      count: this.state.count + 1,
    });
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.incrementCount.bind(this)}>Increment</button>
      </div>
    );
  }
}

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

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

In the imperative approach, we are using a class component to manage the state of the counter. This can make our code harder to reason about and maintain as the application grows. In the functional approach, we are using the useState hook to manage the state of the counter. This makes our code more modular and easier to reason about.

4. Improved testability

Functional programming can also lead to improved testability in React applications. Here's an example of how functional programming can make our code more testable:

// Imperative approach
function Greeting(props) {
  const { name } = props;

  if (name) {
    return <h1>Hello, {name}!</h1>;
  } else {
    return <h1>Hello, World!</h1>;
  }
}

// Functional approach
function Greeting({ name }) {
  const greeting = name ? `Hello, ${name}!` : 'Hello, World!';

  return <h1>{greeting}</h1>;
}

In the imperative approach, we are using a conditional statement to render a different message depending on whether or not the name prop is provided. This can make our code harder to test since we need to test both code paths. In the functional approach, we are using a ternary operator to conditionally set the greeting variable. This makes our code more modular and easier to test.

5. Improved modularity

Functional programming can also lead to improved modularity in React applications. Here's an example of how functional programming can make our code more modular:

// Imperative approach
class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/users')
      .then(response => response.json())
      .then(data => {
        this.setState({
          users: data,
        });
      });
  }

  render() {
    return (
      <ul>
        {this.state.users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    );
  }
}

// Functional approach
function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/users')
      .then(response => response.json())
      .then(data => {
        setUsers(data);
      });
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

In the imperative approach, we are using a class component to fetch and display a list of users. This can make our code harder to test and reuse since the logic for fetching and rendering the list of users is tightly coupled together. In the functional approach, we are using the useEffect hook to fetch the list of users and the useState hook to manage the state of the users. This makes our code more modular and easier to reuse.

6. Conclusion

In conclusion, functional programming can offer a number of benefits when used in conjunction with React. It can lead to improved code readability, scalability, testability, and modularity. By using pure functions and immutable data, we can create more predictable and maintainable code. The examples provided in this article should give you a good starting point for incorporating functional programming into your own React projects.

Don't misunderstand the Array.【JavaScript】

Yuya Hirano — Tue, 28 Mar 2023 09:14:16 +0000

When I was building my app, I tried to use an empty array for an IF statement.
I'd like to share with you all the misunderstanding that occurred there.

Example

const arr = [];

if (arr) {
    console.log("True");
} else {
    console.log("False");
}

// result
True

I expected "False" that return value that statement.
However, It returned "True".

Why?

I read developer references again.
Truthy

As it turns out, an empty array is used as a true value.

what do we do now?

const arr = [];

if (arr**.length**) {
    console.log("True");
} else {
    console.log("False");
}

// result
False

The answer is simple. I'll give it to it using ".length".

In addition, check the object.

const obj = {};

if (obj) {
    console.log("True");
} else {
    console.log("False");
}

// result
True

object cannot use "length' property simply.
You can use "keys" property instead of it.

const obj = {};  // 空のオブジェクト

if (Object.keys(obj).length) {
    console.log("True");
} else {
    console.log("False");
}

// result
Bye

Let's take another look at the arrays and objects that we use somewhat on a daily basis to avoid misunderstandings.
If there are any errors in this article or if you know of a better way,
I would appreciate your comments.
If you like this article, please give me a like button.

How to display line breaks in React for the "\n" newline character.

Yuya Hirano — Sun, 12 Mar 2023 06:42:54 +0000

In React, displaying the newline character "\n" as a line break in HTML can be tricky as it won't be interpreted as a newline character. However, React provides a way to display line breaks for string with "\n" characters in HTML.
For example, to display a newline code contained in a value received from the API, etc. as a newline, one function must be interspersed.

When dealing with strings that contain newline characters (\n) in React, you may want to convert them to
tags to display line breaks in the UI. However, simply replacing \n with
in the string won't work as expected in JSX, since the string
will be rendered as text rather than as a line break.

// const text = "Apple\nOrange\nBanaa";
const element = ({ text }) => {
  const newlineText = text.replace(/\n/g, '<br />');
  return <div>{newlineText}</div>;
}

The results is here:

Apple<br />Orange<br />Banana

Here is an example of how to display line breaks in React for the "\n" newline character:

import React from 'react';

function TextWithLineBreaks(props) {
  const textWithBreaks = props.text.split('\n').map((text, index) => (
    <React.Fragment key={index}>
      {text}
      <br />
    </React.Fragment>
  ));

  return <div>{textWithBreaks}</div>;
}

export default TextWithLineBreaks;

In this example, the TextWithLineBreaks component splits the input text string into an array of substrings using the split() method with "\n" as the separator. It then maps over each substring, adding a
element after each substring to represent the newline.

The React.Fragment component is used to group multiple elements returned from the map() function into a single element.

Here is how the TextWithLineBreaks component can be used to display text with line breaks:

import React from 'react';
import TextWithLineBreaks from './TextWithLineBreaks';

function App() {
  return (
    <div>
      <TextWithLineBreaks text="Hello\nWorld" />
    </div>
  );
}

export default App;

In this example, the TextWithLineBreaks component is passed the string "Hello\nWorld" and will display it with a line break between "Hello" and "World".

Using this method, you can easily display text with line breaks in React for the "\n" newline character.

The sample code in this article is partially modified from the one generated by openAI.

The Essential Skill for Web Development【JS】

Yuya Hirano — Thu, 23 Feb 2023 08:02:30 +0000

JavaScript is one of the most widely used programming languages in the world, and for good reason. It's a versatile, powerful, and easy-to-learn language that provides developers with a range of tools and libraries to build web applications that are engaging and dynamic.

Here are some reasons why JavaScript is so useful and why every developer should learn it:

It's Everywhere

JavaScript is a ubiquitous language on the web, and for good reason. From simple website interactions to complex web applications, JavaScript is the backbone of the modern web. It's the most widely used programming language on the web, and is supported by all modern web browsers. In addition, it's used on the server-side with Node.js, making it one of the most versatile programming languages around.

JavaScript's ability to run in a browser environment makes it perfect for creating engaging and interactive user experiences on the web. With JavaScript, developers can create dynamic content that responds to user interactions in real-time, allowing them to build websites that are fun and engaging.

It's Easy to Learn

JavaScript is an easy language to learn, especially for beginners. The language has a straightforward syntax and does not require the installation of any additional software or tools. This makes it easy to get started with, and allows developers to quickly build simple programs or web applications.

In addition, JavaScript is a dynamically-typed language, which means that developers do not need to specify data types when declaring variables. This makes it easier to write code quickly, as developers do not need to spend time defining data types for their variables.

JavaScript's ease of use makes it a great language for developers who are new to programming, as well as for experienced developers who want to quickly build prototypes or experiments.

It's Flexible

JavaScript is a flexible language that allows developers to build applications for a wide range of platforms, including web browsers, mobile devices, and even desktop applications. The language has a vast ecosystem of tools and libraries that can be used to build almost anything you can imagine.

With JavaScript, developers can build web applications that are compatible with a range of platforms and devices, allowing them to reach a wider audience. JavaScript's flexibility also makes it a great choice for building complex applications, as developers can use a range of libraries and frameworks to simplify their code and make it more maintainable.

It's Powerful

JavaScript has evolved significantly over the years, with the introduction of features like arrow functions, destructuring, and async/await making it a powerful language for building complex applications. The language is also very performant, with modern JavaScript engines like V8 (used in Google Chrome) and SpiderMonkey (used in Firefox) providing lightning-fast execution speeds.

JavaScript's performance is a major advantage when it comes to building web applications, as it allows developers to build highly responsive and interactive applications that are fast and reliable. This makes it possible to create engaging user experiences that are highly responsive and fun to use.

It's a Great Choice for Web Development

When it comes to web development, JavaScript is the language of choice. It allows developers to build dynamic, interactive web applications that can be easily integrated with other web technologies like HTML and CSS. This makes it possible to create websites that are engaging and fun to use.

JavaScript's ability to work in a browser environment makes it perfect for building web applications that are highly responsive and interactive. With the help of libraries like React, Angular, and Vue.js, developers can build highly sophisticated web applications that are fast and reliable.

It's Constantly Evolving

JavaScript is constantly evolving, with new features being added to the language on a regular basis. This means that developers can always stay up to date with the latest tools and techniques, and can leverage these new features to build even more powerful and efficient web applications.

One of the most significant changes to the language in recent years has been the introduction of ES6 (ECMAScript 2015), which introduced a range of new features and syntax to the language. ES6 added features like arrow functions, template literals, and let and const variables, making the language even more powerful and efficient.

In addition, the JavaScript community is constantly creating new libraries and tools to help developers build better web applications. This means that there is always something new to learn and explore in the world of JavaScript.

Conclusion

JavaScript is a versatile, powerful, and easy-to-learn programming language that every developer should learn. Its ubiquity on the web, ease of use, flexibility, power, and constantly evolving nature make it the perfect language for web development.

By learning JavaScript, developers can build engaging and dynamic web applications that are fast, responsive, and fun to use. With a range of libraries and tools available, JavaScript is a great choice for building everything from simple website interactions to complex web applications.

Whether you are a beginner or an experienced developer, learning JavaScript is a must if you want to build engaging and dynamic web applications that are responsive and fun to use.

Interface vs Type in TypeScript

Yuya Hirano — Sun, 12 Feb 2023 04:49:49 +0000

TypeScript, the statically typed superset of JavaScript, provides developers with various ways to define the shape of data. Two of the most commonly used options are interface and type.

Interface in TypeScript allow you to define a blueprint for objects. They are used to specify the structure of objects that have a set of named properties, with specific types and optional values. For example:

interface User {
  name: string;
  age: number;
  isAdmin?: boolean;
}

const user: User = {
  name: "John Doe",
  age: 30
};

Type, on the other hand, can be used to describe any type in TypeScript, including primitives, objects, and even functions. The syntax for defining a type is similar to an interface, but it uses the type keyword instead:

type UserType = {
  name: string;
  age: number;
  isAdmin?: boolean;
};

const user: UserType = {
  name: "John Doe",
  age: 30
};

The main difference between interface and type is that interface can be extended and merged, while type cannot. For example, you can create a new interface that extends an existing interface:

interface AdminUser extends User {
  role: string;
}

const adminUser: AdminUser = {
  name: "Jane Doe",
  age: 35,
  role: "Administrator"
};

In conclusion, both interface and type serve the purpose of defining the shape of data in TypeScript. However, the choice between the two depends on the specific use case. If you want to create a blueprint for objects and extend it, use interface. If you want to describe any type in TypeScript, use type.

TypeScript Type Inference

Yuya Hirano — Wed, 08 Feb 2023 01:00:51 +0000

TypeScript Type Inference

TypeScript is a statically typed programming language that builds upon JavaScript by adding optional types. It is becoming increasingly popular among developers due to its ability to provide a type-safe and scalable coding environment. One of the key features that sets TypeScript apart from other languages is its type inference capability.

Type inference is the process of automatically deducing the type of an expression based on the way it is used in the code. In TypeScript, this means that the compiler can determine the type of a variable or expression without the need for explicit type annotations. This leads to cleaner, more readable, and less verbose code.

For instance, consider the following example:

let name = "John Doe";

Without type inference, you would need to specify the type of the name variable, like this:

let name: string = "John Doe";

But with type inference, TypeScript can deduce that name is a string based on the assignment, so you don't need to specify the type.

Type inference is not only convenient but also helps prevent errors in your code. For example, if you mistakenly assign a number to a variable that should be a string, TypeScript will generate a compile-time error.

Another situation where type inference is useful is when working with functions. Consider the following example:

function greet(name: string) {
  return `Hello, ${name}!`;
}

With type inference, you can omit the type annotation on the parameter, like this:

function greet(name) {
  return `Hello, ${name}!`;
}

In this case, TypeScript can infer the type of the name parameter based on how it is used within the function body.

In conclusion, TypeScript's type inference capability is a valuable tool that can help make your code more concise, readable, and error-free. Whether you're just starting out with TypeScript or are an experienced user, it's definitely worth taking the time to understand and make use of this feature.

Understanding TypeScript Data Types

Yuya Hirano — Mon, 06 Feb 2023 08:03:29 +0000

TypeScript is a statically typed language, meaning that every variable in TypeScript has a type. It is important to understand these types to write clean, efficient, and error-free code. This article covers the basic and most commonly used data types in TypeScript, as well as a few additional types that are useful to know.

Number: Used to represent numeric values, such as integers or floating-point numbers.

let a: number = 42;
let b: number = 3.14;

String: Used to represent a sequence of characters.

let name: string = "John Doe";

Boolean: Used to represent true or false values.

let isTrue: boolean = true;
let isFalse: boolean = false;

Array: Used to represent a collection of values of the same type.

let numbers: number[] = [1, 2, 3, 4];
let names: string[] = ["John", "Jane", "Jim"];

Tuple: Used to represent a data structure similar to an array with multiple types.

let user: [string, number] = ["John Doe", 32];

Enum: Used to give named identifiers to numbers or strings.

enum Color {Red, Green, Blue};
let c: Color = Color.Green;

Any: Used to represent any TypeScript type.

let value: any = 42;
value = "Hello";

Void: Used to indicate a function that does not return a value.

function sayHello(): void {
    console.log("Hello!");
}

Never: Used to indicate an error or termination state.

function throwError(): never {
    throw new Error("Something went wrong");
}

These are just a few of the additional TypeScript data types that are available. It's important to understand these types and choose the appropriate one for your specific use case to write efficient and maintainable code.

Super useful a state management library "Recoil"

Yuya Hirano — Mon, 06 Feb 2023 07:34:04 +0000

Have you ever used a state management library called Recoil?

This is super useful and easy to understand.

This article explains the basics of Recoil.
Please click the Like button and Save button if you like this article.

What you will learn in this article

RecoilRoot
Atom
Selectors

What is Recoil?

Recoil is a React state management library created by Facebook.
This is an experimental state management framework for React.
Not officially released yet.

RecoilRoot

To use Recoil, you need to enclose the outside of the target scope with a RecoilRoot component.
If you're enclosing the root component with a RecoilRoot component allows for global State management.

import React from 'react';
import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

Atom

Atom is necessary for state management.
Atom set a unique ID for each Atom with key and an initial value with default.

export const textState = atom({
  key: 'textState',
  default: '',
});

Components that need to read from and write to an atom could use three way.
If you only want to get the value, you can use useRecoilValue.
If you only want to set the value, you can use useSetRecoilValue.
You can use useRecoilState () to both retrieve and update the state.

Here is how to use useRecoilState.

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  /* useRecoilState determines from which Atom to retrieve
 the value by passing the Key specified in Atom as an
 argument.*/
 // [value, setValueFunction] = useStateRecoil(Key)
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

Here is how to use useSetRecoilValue and useRecoilValue.

function TextInput() {

  const text = useRecoilValue(textState);

  const setText = useSetRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

Selector

Selector can return values processed from Atom state, or process and update Atom state.
Like Atom, each Selector is assigned a unique ID using key.
The "get" function returns the processed value of the state, and the "set" function processes the state and updates it.
Each time Atom is updated, it is render.

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

Conclusion

Recoil can be used to manage values globally or only between specific components.
While Redux and others have complex syntax and take time to get used to, Recoil is simple and easy to use for state management.

ref: Recoil

Resolve error that occur when importing image file in React with TypeScript

Yuya Hirano — Sat, 10 Dec 2022 04:32:10 +0000

Overview

When using TypeScript on React, an error occur when trying to import an image.
So, fix the error that occurs when importing images in React.

What should I do ?

Create a type definition for the image to be used

#1 Install React with TypeScript

npx create-react-app my-app --template typescript

#2 Directory structure

#3 Place the image to be used

#4 Create a type definition

declare module "*.jpg";

#5 import type definition file

import "./App.css";
import "./types/image.d.ts";
import sample_image from "./assets/sample.jpg";

function App() {
  return <img src={sample_image} alt="sample"/>;
}

export default App;

done.