Часть 4 из 5: Проблемы практики кодирования React

Реализация функции поиска в приложении React и создание приложения для чата в реальном времени с помощью React и Firebase.

-Джон Кристи

Реализация функции поиска в приложении React

обычно включает в себя настройку поля ввода для поиска, захват пользовательского ввода и фильтрацию списка элементов на основе условия поиска.

Вот пример того, как реализовать функцию поиска в React:

Создайте состояние для условий поиска и результатов поиска:

import React, { useState } from 'react';

function Search() {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  
  // Dummy data
  const data = [
    { name: 'John', age: 20 },
    { name: 'Jane', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Alice', age: 35 },
  ];
  
  // Function to handle search input changes
  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
  };
  
  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleSearch} />
      {searchResults.map((item) => (
        <div>{item.name} - {item.age}</div>
      ))}
    </div>
  );
}

export default Search;

2. Отфильтруйте данные по поисковому запросу:

import React, { useState } from 'react';

function Search() {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  
  // Dummy data
  const data = [
    { name: 'John', age: 20 },
    { name: 'Jane', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Alice', age: 35 },
  ];
  
  // Function to handle search input changes
  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
    const results = data.filter((item) =>
      item.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setSearchResults(results);
  };
  
  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleSearch} />
      {searchResults.map((item) => (
        <div>{item.name} - {item.age}</div>
      ))}
    </div>
  );
}

export default Search;

Отображение результатов поиска в пользовательском интерфейсе:

import React, { useState } from 'react';

function Search() {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  
  // Dummy data
  const data = [
    { name: 'John', age: 20 },
    { name: 'Jane', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Alice', age: 35 },
  ];
  
  // Function to handle search input changes
  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
    const results = data.filter((item) =>
      item.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setSearchResults(results);
  };
  
  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleSearch} />
      {searchResults.length > 0 ? (
        searchResults.map((item) => (
          <div>{item.name} - {item.age}</div>
        ))
      ) : (
        <div>No results found</div>
      )}
    </div>
  );
}

export default Search;

Это базовая реализация функции поиска в React. Вы можете настроить его в соответствии со своими конкретными потребностями, например добавить дополнительные параметры поиска, сортировать результаты поиска или обрабатывать запросы API.

Если вы хотите использовать внешнюю библиотеку для упрощения реализации функции поиска, вы можете использовать такую библиотеку, как React-Select или React-Search-Box.

React-Select — это гибкий и простой в использовании элемент управления вводом выбора с расширенными возможностями поиска и фильтрации. Он поддерживает навигацию с помощью клавиатуры, специальные возможности и может быть оформлен в соответствии с дизайном вашего приложения.

React-Search-Box — это простой компонент окна поиска с поисковыми подсказками в реальном времени, нечетким сопоставлением и настройками для задержки устранения отказов, заполнителя и значка поиска. Он также прост в использовании и настройке.

Чтобы использовать любую из этих библиотек, вы можете установить их через NPM и импортировать в свой компонент React. Вот пример использования React-Select:

import React, { useState } from 'react';
import Select from 'react-select';

function Search() {
  const [selectedOption, setSelectedOption] = useState(null);

  // Dummy data
  const options = [
    { value: 'John', label: 'John' },
    { value: 'Jane', label: 'Jane' },
    { value: 'Bob', label: 'Bob' },
    { value: 'Alice', label: 'Alice' },
  ];

  // Function to handle select option changes
  const handleChange = (option) => {
    setSelectedOption(option);
  };

  return (
    <div>
      <Select
        value={selectedOption}
        onChange={handleChange}
        options={options}
        isSearchable={true}
        placeholder="Search..."
      />
    </div>
  );
}

export default Search;

Это всего лишь базовый пример того, как использовать React-Select. Вы можете дополнительно настроить компонент в соответствии со своими конкретными потребностями, например, стилизовать его с помощью CSS или предоставить дополнительные реквизиты isMulti или menuPlacement.

Таким образом, реализация функции поиска в React может быть достигнута путем настройки поля ввода поиска, захвата пользовательского ввода, фильтрации списка элементов на основе условия поиска и отображения результатов поиска в пользовательском интерфейсе. Вы можете использовать внешнюю библиотеку, например React-Select или React-Search-Box, чтобы упростить реализацию и добавить дополнительные параметры поиска.

Создайте приложение для чата в реальном времени с помощью React и Firebase

Создание приложения для чата в реальном времени с помощью React и Firebase можно выполнить в несколько шагов:

Настройте проект Firebase и создайте новое приложение Firebase.
Установите зависимости Firebase и инициализируйте Firebase в своем приложении React:

npm install firebase
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/messaging';
import 'firebase/compat/firestore';
import 'firebase/compat/database';

const firebaseConfig = {
  apiKey: "AIzaSyAUS18XUeQwRmeBI3lm7QTETXaN1G-IcxM",
  authDomain: "react-interview-challenges.firebaseapp.com",
  projectId: "react-interview-challenges",
  storageBucket: "react-interview-challenges.appspot.com",
  messagingSenderId: "27647234037",
  appId: "1:27647234037:web:ece129ef7486651cbd9abc",
  measurementId: "G-CNFE0KVC67"
};
firebase.initializeApp(firebaseConfig);

const database = firebase.database();

export { firebase, database };

3. Создайте компонент чата, который отображает сообщения чата и позволяет пользователям отправлять новые сообщения:

import React, { useState, useEffect, useContext } from 'react';
import { database } from '../firebase/firebase';
import { FirebaseContext } from '../index';

function Chat() {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');
  const firebase = useContext(FirebaseContext);

  // Get messages from Firebase Realtime Database on component mount
  useEffect(() => {
    const messagesRef = database.ref('messages');
    messagesRef.on('value', (snapshot) => {
      const messagesData = snapshot.val();
      if (messagesData) {
        const messages = Object.entries(messagesData).map(([key, value]) => {
          return { id: key, ...value };
        });
        setMessages(messages);
      }
    });
  }, []);

  // Function to handle sending new message to Firebase Realtime Database
  const handleSendMessage = (event) => {
    event.preventDefault();
    const messagesRef = database.ref('messages');
    messagesRef.push({ text: newMessage, userId: firebase.auth().currentUser.uid, timestamp: Date.now() });
    setNewMessage('');
  };

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          {message.text} - {message.userId}
        </div>
      ))}
      <form onSubmit={handleSendMessage}>
        <input type="text" value={newMessage} onChange={(e) => setNewMessage(e.target.value)} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

export default Chat;

Ваш App.js будет выглядеть следующим образом:

import React, { useState, useContext } from 'react';
import { firebase } from './firebase/firebase';
import { FirebaseContext } from './index';
import Chat from './components/Chat';

function App() {
  const [user, setUser] = useState(null);
  const firebaseInstance = useContext(FirebaseContext);

  // Function to handle signing in with Google account
  const handleSignIn = () => {
    const provider = new firebaseInstance.auth.GoogleAuthProvider();
    firebaseInstance.auth().signInWithPopup(provider);
  };

  // Function to handle signing out
  const handleSignOut = () => {
    firebaseInstance.auth().signOut();
  };

  // Listen for changes in user authentication state
  firebaseInstance.auth().onAuthStateChanged((user) => {
    setUser(user);
  });

  return (
    <div>
      {user ? (
        <div>
          <h1>Welcome, {user.displayName}!</h1>
          <button onClick={handleSignOut}>Sign Out</button>
          <Chat />
        </div>
      ) : (
        <div>
          <h1>Please sign in to continue.</h1>
          <button onClick={handleSignIn}>Sign In with Google</button>
        </div>
      )}
    </div>
  );
}

export default App;

В этом файле мы начинаем с импорта необходимых для работы компонента модулей, включая модуль React, а также хуки useState и useContext из библиотеки react.

import React, { useState, useContext } from 'react';

Затем мы импортируем модуль firebase из локального файла firebase.js, объект FirebaseContext из файла index.js в корневом каталоге и компонент Chat из локального файла Chat.js.

import { firebase } from './firebase/firebase';
import { FirebaseContext } from './index';
import Chat from './components/Chat';

Эта строка определяет функциональный компонент с именем App.

function App() {

Эта строка инициализирует переменную состояния с именем user в null с помощью хука useState. Он также определяет функцию setUser, которую можно использовать для обновления переменной состояния user.

 const [user, setUser] = useState(null);

Эта строка инициализирует переменную с именем firebaseInstance с помощью хука useContext. Он извлекает объект FirebaseContext, который используется для доступа к экземпляру Firebase в приложении.

const firebaseInstance = useContext(FirebaseContext);

Это определяет функцию под названием handleSignIn, которая используется для входа пользователя в свою учетную запись Google. Сначала он создает экземпляр GoogleAuthProvider с помощью объекта firebaseInstance, а затем использует метод signInWithPopup для входа пользователя в систему с использованием этого провайдера.

const handleSignIn = () => { 
const provider = new firebaseInstance.auth.GoogleAuthProvider(); 
firebaseInstance.auth().signInWithPopup(provider); };

Это определяет функцию с именем handleSignOut, которая используется для выхода пользователя из приложения. Он использует метод signOut, предоставляемый объектом firebaseInstance.

const handleSignOut = () => {
    firebaseInstance.auth().signOut();
  };

Это устанавливает прослушиватель, который следит за изменениями в состоянии аутентификации пользователя и соответствующим образом обновляет переменную состояния user.

firebaseInstance.auth().onAuthStateChanged((user) => {
    setUser(user);
  });

Наконец, это возвращает JSX, который будет отображаться на экране. Оператор return включает тернарный оператор, который проверяет, является ли переменная состояния user null или нет, и соответственно отображает соответствующий JSX. Если пользователь вошел в систему, он отображает приветственное сообщение, кнопку выхода и компонент Chat. Если пользователь не вошел в систему, отображается сообщение, предлагающее пользователю войти в систему, и кнопка для запуска функции handleSignIn.

 return (
    <div>
      {user ? (
        <div>
          <h1>Welcome, {user.displayName}!</h1>
          <button onClick={handleSignOut}>Sign Out</button>
          <Chat />
        </div>
      ) : (
        <div>
          <h1>Please sign in to continue.</h1>
          <button onClick={handleSignIn}>Sign In with Google</button>
        </div>
      )}
    </div>
  );

Эта строка экспортирует компонент App для использования в других частях приложения.

export default App;

Это простой пример того, как создать приложение для чата в реальном времени с помощью React и Firebase. Вы можете дополнительно настроить компонент чата, чтобы добавить более продвинутые функции, такие как аутентификация пользователя, чаты или редактирование и удаление сообщений. Вы также можете изучить другие сервисы Firebase, такие как Cloud Firestore, Firebase Authentication или Firebase Hosting, чтобы создать более полное приложение для чата.

Дополнительная настройка

Вот несколько ссылок и инструкций о том, как получить необходимые ключи для Firebase:

Перейдите в консоль Firebase и создайте новый проект Firebase: https://console.firebase.google.com/
Добавьте новое веб-приложение в свой проект Firebase и зарегистрируйте его с именем пакета вашего приложения и отпечатком SHA-1: https://firebase.google.com/docs/web/setup#register-app
В панели управления вашего веб-приложения перейдите в «Настройки проекта» и найдите раздел «Фрагмент Firebase SDK». Выберите «Config» и скопируйте объект конфигурации Firebase, который содержит следующие ключи:

APIKey
authDomain
URL-адрес базы данных
идентификатор проекта
хранилищеВедро
идентификатор отправителя сообщений
идентификатор приложения

Вставьте объект конфигурации Firebase в код инициализации вашего приложения React, как показано в предыдущем примере.
Включите базу данных Firebase Realtime в своем проекте Firebase и настройте ее правила безопасности: https://firebase.google.com/docs/database.
Чтобы защитить свой проект Firebase, вы можете настроить аутентификацию Firebase, чтобы пользователи должны были войти в систему, прежде чем они смогут получить доступ к приложению чата: https://firebase.google.com/docs/auth
Чтобы развернуть приложение React и проект Firebase, вы можете использовать Firebase Hosting и интерфейс командной строки Firebase: https://firebase.google.com/docs/hosting https://firebase.google.com/docs/cli

Обратите внимание, что Firebase предоставляет щедрый бесплатный уровень для использования своих сервисов, но за его использование может потребоваться оплата. Дополнительную информацию о ценах на Firebase можно найти здесь: https://firebase.google.com/pricing.

Кроме того, вот еще несколько ресурсов, которые вы можете использовать, чтобы узнать больше о создании приложения для чата в реальном времени с помощью React и Firebase:

Документация Firebase по созданию приложения чата с базой данных Firebase Realtime: https://firebase.google.com/docs/database/web/start
Документация Firebase по интеграции Firebase с React: https://firebase.google.com/docs/web/setup
Документация Firebase по защите вашего проекта Firebase с помощью Firebase Authentication: https://firebase.google.com/docs/auth/web/start
Учебное пособие по созданию приложения для чата в реальном времени с помощью React и Firebase на FreeCodeCamp: https://www.freecodecamp.org/news/how-to-build-a-real-time-chat-app-with-react- и-firebase/
Видеоруководство по созданию приложения для чата в реальном времени с помощью React и Firebase на YouTube: https://www.youtube.com/watch?v=zQyrwxMPm88

Я надеюсь, что эти ресурсы помогут вам создать приложение для чата в реальном времени с помощью React и Firebase. Удачи в вашем путешествии!

ССЫЛКИ НА ОКОНЧАТЕЛЬНЫЙ КОД:

Джон Кристи

Джонкристи.нет