Создайте свое первое приложение React за 5 минут!

Объяснение терминологии:

Давайте начнем

Сначала создайте новое приложение React с помощью инструмента create-react-app. Откройте терминал и введите следующую команду:

npx create-react-app my-app

Замените «my-app» на имя, которое вы хотите дать своему проекту.

Установка зависимостей и настройка:

Затем установите необходимые зависимости. Мы будем использовать Firebase для аутентификации и Chart.js для создания панели бизнес-аналитики. Запустите следующую команду в своем терминале

npm install firebase chart.js

Создайте новый проект Firebase и включите функцию аутентификации. Вам нужно будет создать новый проект Firebase, посетив консоль Firebase (https://console.firebase.google.com/). После создания проекта перейдите в раздел Аутентификация и включите метод аутентификации по электронной почте и паролю.
Настройте Firebase в своем приложении React. Откройте консоль Firebase и перейдите на страницу настроек проекта. Прокрутите вниз до раздела фрагмента кода Firebase SDK и выберите параметр «Конфигурация». Скопируйте объект конфигурации Firebase SDK и вставьте его в новый файл в своем приложении React с именем firebase.js.

import firebase from 'firebase/app';
import 'firebase/auth';
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};
firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();

Обязательно замените значения заполнителей собственными значениями проекта Firebase.

Погружение в приложение:

Создайте компонент страницы входа. В папке src создайте новую папку с именем pages. Внутри этой папки создайте новый файл с именем LoginPage.js. Этот файл будет содержать компонент страницы входа. Вот пример того, как это может выглядеть:

import { useState } from 'react';
import { auth } from '../firebase';
const LoginPage = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const handleEmailChange = (e) => setEmail(e.target.value);
  const handlePasswordChange = (e) => setPassword(e.target.value);
  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await auth.signInWithEmailAndPassword(email, password);
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <form onSubmit={handleLogin}>
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" value={email} onChange={handleEmailChange} />
      <label htmlFor="password">Password:</label>
      <input type="password" id="password" value={password} onChange={handlePasswordChange} />
      <button type="submit">Login</button>
    </form>
  );
};
export default LoginPage;

2. Создайте компонент страницы информационной панели. В папке src создайте новый файл с именем DashboardPage.js. Этот файл будет содержать компонент страницы панели мониторинга. Вот пример того, как это может выглядеть:

import { useState, useEffect } from 'react';
import { auth } from '../firebase';
import Chart from 'chart.js/auto';
const DashboardPage = () => {
  const [user, setUser] = useState(null);
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => setUser(user));
    return unsubscribe;
  }, []);
useEffect(() => {
    if (user) {
      // Use Chart.js to create yourconst createChart = () => {
    const ctx = document.getElementById('myChart').getContext('2d');

    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'Sales',
            data: [12, 19, 3, 5, 2, 3, 8],
            borderColor: 'rgb(255, 99, 132)',
            fill: false,
          },
          {
            label: 'Expenses',
            data: [5, 3, 2, 7, 8, 1, 5],
            borderColor: 'rgb(54, 162, 235)',
            fill: false,
          },
        ],
      },
    });
  };

  useEffect(() => {
    if (user) {
      createChart();
    }
  }, [user]);

  if (!user) {
    return <p>You need to be logged in to access this page.</p>;
  }

  return (
    <>
      <h1>Welcome to the Dashboard, {user.email}!</h1>
      <canvas id="myChart" width="400" height="200"></canvas>
    </>
  );
};

export default DashboardPage;

Этот код определяет функцию createChart, которая использует Chart.js для создания линейного графика. Функция вызывается в хуке useEffect, который запускается при изменении состояния user. Компонент DashboardPage также отображает приветственное сообщение и холст линейного графика.

Настройте маршрутизацию для страниц входа и панели инструментов. В файле App.js импортируйте LoginPage и DashboardPage из соответствующих файлов и используйте компоненты BrowserRouter и Switch для настройки маршрутизации. Вот пример того, как может выглядеть ваш файл App.js:

import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { auth } from './firebase';
import LoginPage from './pages/LoginPage';
import DashboardPage from './pages/DashboardPage';

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

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => setUser(user));

    return unsubscribe;
  }, []);

  return (
    <BrowserRouter>
      <Switch>
        <Route path="/login">
          <LoginPage />
        </Route>
        <Route path="/">
          <DashboardPage user={user} />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

Этот код устанавливает два маршрута: один для страницы входа и один для страницы панели инструментов. Компонент страницы панели управления получает состояние user в качестве реквизита.

Вот и все! Теперь у вас есть приложение React с аутентификацией и панелью управления для бизнес-аналитики.

Создайте свое первое приложение React за 5 минут!

Вопросы по теме