Это будет последовательно, и эта первая часть посвящена тому, как настроить проект React с Parcel и как интегрировать в него Firebase.
ПРЕДПОСЫЛКИ
- Базовые знания о React.
Может помочь создание небольшого проекта, отметьте здесь.
- Dummy React Project, созданный с помощью Parcel (инструкции ниже)
- Глубокая любовь к формам (мы будем их часто использовать)
- Горящее пламя внутри вас, чтобы изучить Firebase (каламбур)
- Хороший редактор кода (желательно Visual Studio Code)
Чему вы научитесь
- Настройка Firebase в вашем проекте
- Функции CRUD с использованием Firebase
- Маршрутизация с помощью Reach-маршрутизатора
Начиная
Если вы когда-нибудь окажетесь в положении полного стека и вам понадобится простой бэкенд после выполнения задач внешнего интерфейса. Уверяю вас, что лучшее решение — собственная FIREBASE от Google. Теперь, какой лучший инструмент для его интеграции, чем основная среда Frontend, React
Мы собираемся инициализировать наш проект React с помощью сборщика Parcel.
Вы можете найти альтернативный способ сделать это здесь
Приложение React With Parcel
Но давайте посмотрим, как это можно сделать в этой статье.
Создайте приложение React с Parcel.js
Создайте папку, откройте ее в редакторе кода, а затем в каталоге проекта выполните команду (ы)
npm init -y
- При желании вы можете инициализировать Git, чтобы вы могли загрузить его позже, используя
git init
Это инициализирует package.json, и вы выбираете y для да
2. Установите React и react-dom, используя
npm install — save react react-dom
3. Установите Babel и пакет-связку с помощью
npm install — save-dev @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react parcel-bundler
4. Установите реагирующий горячий загрузчик и сохраните его как зависимость, используя
npm i -D react-hot-loader
5. В каталоге проекта создайте файл с именем «.babelrc» и добавьте
{
“presets”: [
“@babel/env”,
“@babel/react”
],
“plugins”: [
“react-hot-loader/babel”,
[“@babel/transform-runtime”]
]
}
6. Создайте новую папку с именем src и создайте в ней файл index.js, добавьте:
import React from ‘react’
import ReactDOM from ‘react-dom’
import App from ‘Components/App’
if (module.hot) {
module.hot.accept()
}
ReactDOM.render(
<div>
<App />
</div >, document.getElementById(‘root’))
ReactDOM.render(<App />, document.getElementById(‘root’))
7. Создайте файл HTML с синтаксисом:
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8" /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0" /> <meta http-equiv=”X-UA-Compatible” content=”ie=edge” /> <title>React with Parcel.js</title> </head> <body> <h1>Hello, World!</h1> <div id=”root”></div> </body> </html>
8. Найдите package.json и добавьте в него:
“scripts”: {
“start”: “parcel index.html”
}
9. Создайте папку с именем Components и создайте в ней файл с именем App.jsx. Если вы знакомы с реакцией, вы знаете, что это основное приложение для любых подкомпонентов, которые мы создадим, а также для маршрутизации. Если вы не знакомы с React, возможно, вы захотите наверстать упущенное.
Не стесняйтесь проектировать его так, как вам нравится, но, поскольку это функциональный компонент, он будет выглядеть так:
import React, {useEffect, useState} from ‘react’
export default function App(props) {
return (
<div>
# add code or classes here
</div>
)
}
Запустите npm run start и приступим.
Целевая страница
Любая настройка, которую вы выберете, в порядке, но создайте фиктивные компоненты, которые будут хранить данные, которые вы сохраняете в своей базе данных Firebase.
Совет. Создайте для этого компонент, а затем вызовите его в своем App.js, так как в этом вся прелесть React, Components!
Я использую Bootstrap для этого проекта, чтобы узнать, как правильно настроить Bootstrap в React, нажмите ниже:
Использование Bootstrap с ReactJs (правильный путь)
Настройка Firebase
Прежде чем мы сможем сделать что-либо еще, мы должны настроить Firebase в нашем проекте.
Если у вас нет учетной записи Firebase, первым шагом будет создание учетной записи Firebase здесь:
Консоль Firebase
Вам будет предложено зарегистрироваться / войти, после чего вы увидите свою панель инструментов.
Что-то похожее на изображение выше.
Затем вы можете инициализировать новый проект; выберите подходящее имя, а затем включите аналитику (в данном случае необязательно).
И за несколько секунд!
Слева от недавно найденной панели инструментов откройте боковую навигацию и нажмите Cloud Firestore.
Примечание. Знаете ли вы, что у меня есть учебник, который поможет вам создать подобную боковую навигацию в React? Нажмите здесь, чтобы узнать, как это сделать:
Как сделать боковую панель навигации в ReactJS
Нажмите «Создать базу данных», запустите ее в тестовом режиме, поскольку наше приложение еще не готово к работе, а затем выберите любое местоположение, наиболее предпочтительно оставив выбор по умолчанию.
Наконец, мы переходим к настройкам проекта, щелкнув значок шестеренки на панели навигации (вверху справа), а на вкладке «Общие» прокрутите вниз и щелкните значок, как показано ниже.
Затем это ведет на эту страницу:
Назовите свое приложение и пока не нажимайте Firebase Hosting, мы настроим его позже. Зарегистрируйте свое приложение, и SDK — это Firebase комплекта разработки, который мы можем использовать для установки firebase. Нашим предпочтительным вариантом будет:
Запустите npm install firebase, затем
Затем мы идем в корень нашей папки и создаем файл с именем firebase.js и вставляем его
import “regenerator-runtime/runtime”
import { initializeApp } from “firebase/app”;
import { getFirestore } from “@firebase/firestore”;
import React, { useState, useEffect } from ‘react’
// Authentication
const firebaseConfig = {
apiKey: “xxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxx-xxx-xx”,
authDomain: “xxxxxxxxxxxxxxxxxxxxxxxx.firebaseapp.com”,
projectId: “xxxxxxxxxxxxxxxxx-xxxxxx”,
storageBucket: “xxxx-xxxxxxxxxxx-xxxxx.xxxxxx.com”,
messagingSenderId: “xxxxxxxxxxxx”,
appId: “1:104449724706:web:xxxxxxxxxxxxxxxxx”,
measurementId: “x-xxxxxxxxxxx”
}
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth()
export default getFirestore()
Замените объект firebaseConfig на тот, который предлагает вам firebase, потому что он уникален для каждого проекта.
В первой строке я продолжал сталкиваться с ошибкой времени выполнения регенератора, поэтому установка пакета и его импорт, похоже, решают проблему, поэтому установите его, используя:
npm I regenerator-runtime
И с этим мы все готовы начать выполнять операции CRUD в нашем приложении Firebase.
Если у вас возникнут какие-либо вопросы или проблемы, с которыми вы столкнетесь, я буду рад помочь вам их исправить, поэтому оставляйте их в комментариях! Давайте отлаживать.
Если вы успешно пройдете это без заминок, то сможете переходить к следующей части.
