使用React编写的字词计数器

字词计数器是一个应用程序，用于计算输入文本中的字母和单词数量，并在输出中给出每个数量（计数）。文本中的每个元素都将被视为一个字母，并且由空格分隔的一组字母将被视为一个单词。使用这种方法，我们实现了计数器功能。

最终输出的预览：

使用React编写的字词计数器

先决条件和技术:

React JS
HTML/CSS
JavaScript

方法：

字词和字母计数器项目利用React JS的功能来创建一个交互式的Web应用程序。重点是提供用户一个易于使用的界面，他们可以轻松地输入文本。当用户在指定区域键入或粘贴文本时，应用程序实时显示两个指标：字词数和字母数。设计简洁、极简主义，确保主要功能突出。此外，响应式状态管理允许不需要刷新即可进行更新。

功能：

一个输入框，用户可以在其中键入或粘贴文本。
用户输入文本时，实时更新字词和字母的计数。

创建项目的步骤

步骤1: 使用以下命令创建一个新的React JS项目

npx create-react-app word-letter-counter

步骤2： 切换到项目目录

cd word-letter-counter

项目结构

使用React编写的字词计数器

示例： 将以下代码写入相应的文件中

App.js: 这是你的React应用的入口点，负责渲染网页的结构。包含WordLetterCounter组件。
App.css: 在这个文件中，你会找到定义网页结构的样式。包括页面标题和包装WordLetterCounter组件的容器等。
WordLetterCounter.js: 这个特定的组件负责处理单词和字母计数功能。
WordLetterCounter.css: 在这个文件中，你会找到所有WordLetterCounter组件的样式。它确定了textarea输入字段和显示单词和字母计数的文本在你的网页上的显示方式。

// App.js 
import React from "react"; 
import WordLetterCounter from "./WordLetterCounter"; 
import "./App.css"; 
  
function App() { 
    return ( 
        <div className="App"> 
            <h1 id="top"> 
            GeeksforGeeks 
            </h1> 
            <h1> 
            Words and Letters 
            Counter 
            </h1> 
            <WordLetterCounter /> 
        </div> 
    ); 
} 
  
export default App;

// WordLetterCounter.js 
import React, { useState } from "react"; 
import "./WordLetterCounter.css"; 
  
function WordLetterCounter() { 
    const [text, setText] = 
        useState(""); 
    const wordCount = text 
        .split(/\s+/) 
        .filter(Boolean).length; 
    const letterCount = text.length; 
  
    const handleTextChange = (e) => { 
        setText(e.target.value); 
    }; 
  
    return ( 
        <div> 
            <textarea 
                placeholder= 
                "Type your text here..."
                onChange={ 
                    handleTextChange 
                } 
                value={text} 
                rows={5} 
                cols={50} 
            /> 
            <p> 
                Word Count: 
                {wordCount} 
            </p> 
            <p> 
                Letter Count:{" "} 
                {letterCount} 
            </p> 
        </div> 
    ); 
} 
  
export default WordLetterCounter;

CSS

/* App.css */
.App { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    background-color: #f0f0f0; 
    height: 100vh; 
} 
  
#top { 
    font-size: 27px; 
    margin: 20px 0; 
    color: #2bc00d; 
} 
h1 { 
    font-size: 27px; 
    margin: 20px 0; 
    color: #4c4e4b; 
}

CSS

/* WordLetterCounter.css */
.container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    font-family: Arial, sans-serif; 
    margin: 20px; 
} 
  
textarea { 
    width: 100%; 
    padding: 10px; 
    height: 300px; 
    margin-bottom: 10px; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    font-size: 25px; 
} 
  
p { 
    font-size: 25px; 
    margin: 5px 0; 
    color: #333; 
}

运行项目的步骤

1. 在终端中键入以下命令。