Установите правила безопасности для запуска в тестовом режиме .

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

ckquote>

Наконец, получите конфигурацию, необходимую для интеграции Firebase в ваше веб-приложение.

Возьмите исходный код из виджета ниже:

Положите ваши учетные данные в файле конфигурации:

  const config = {apiKey: "{ВАШ КЛЮЧ}", authDomain: "{ВАШ КЛЮЧ}  ", databaseURL:" {YOUR KEY} ",} экспорт конфигурации по умолчанию;  

Настройка приложения React

Запустите приложение React с помощью create-response-app :

  npx create-react-app react-firebase-basic  

Затем установите Firebase и Bootstrap (чтобы не писать собственный CSS):

  npm i firebase bootstrap  

Теперь вы можете удалить все из src/, поскольку вам не нужна большая часть шаблонов.

Создание файла config.js

Напишем конфигурацию Firebase в отдельном конфиге. js файл:

  const config = {apiKey: "{ВАШ КЛЮЧ}", authDomain: "{ВАШ КЛЮЧ}", databaseURL: "{ВАШ КЛЮЧ}  ",} экспортировать конфигурацию по умолчанию;  

Вы импортируете эту конфигурацию в свой App.js позже.

Написание файла index.js

Этот файл будет служить точкой входа в React:

  import React  from 'response'; импортировать ReactDOM из 'react-dom'; import 'bootstrap/dist/css/bootstrap.css'; импортировать приложение из './App';ReactDOM.render(, document.getElementById ('  root '));  

Создание приложения

Пришло время написать файл App.js . Давайте инициализируем наше приложение Firebase в конструкторе:

  импортировать React из response; импортировать Firebase из firebase; импортировать конфигурацию из ./config; класс App extends React  .Component {конструктор (реквизиты) {супер (реквизиты);  Firebase.initializeApp (config.firebase);  this.state = {developers: []}}//...  

Затем вы можете написать логику для получения и сохранения данных:

• writeUserdata запишет наше состояние в базу данных.
• getUserData создаст прослушиватель для пути /, а при изменении value мы назначим значение моментального снимка как состояние.

  writeUserData = () => {Firebase.database (). ref ('/'). set (this.state);  console.log ('ДАННЫЕ СОХРАНЕНЫ');} getUserData = () => {let ref = Firebase.database (). ref ('/');  ref.on ('значение', снимок => {const state = snapshot.val (); this.setState (state);});  console.log ('DATA RETRIEVED');}  

Поместите writeUserData и getUserData в componentDidUpdate и componentDidMount соответственно.

  componentDidMount () {this.getUserData ();} componentDidUpdate (prevProps,  prevState) {//проверяем предыдущее состояние//записываем только если оно отличается от нового состояния if (prevState! == this.state) {this.writeUserData ();  }}  

Все, что осталось, это написать render и обработать логику формы отправки. Мы сопоставим наш массив developers с state и поместим каждый элемент в компонент карты. На каждой карточке будет кнопка удаления и обновления. При нажатии кнопки «Удалить» мы отфильтруем конкретный элемент. При нажатии на обновление мы получим данные элемента в форму.

handleSubmit вставит данные, когда uid имеет значение false и обновляет данные, если оно равно true . Мы используем ref для получения данных из входных данных формы.

//... render () {const {разработчики} = this.state;  return (
 
 
 
 Команда разработчиков Firebase 
 
 
 
 
 {developers .map (developer => 
 
 
 {developer.name} 
 
  {developer.role} 
  this.removeData (developer)} className = "btn btn-link"> Удалить   это.  updateData (разработчик)} className = "btn btn-link"> Изменить  
 
)} 
 
 
 
 
 Добавьте сюда нового члена команды 
  
  
  Имя   v> 
  Роль   
 
  Сохранить   
 
 
)} handleSubmit =  (событие) => {event.preventDefault ();  пусть name = this.refs.name.value;  пусть роль = this.refs.role.value;  let uid = this.refs.uid.value;  если (uid && имя && роль) {const {разработчики} = this.state;  const devIndex = developers.findIndex (data => {return data.uid === uid});  разработчики [devIndex] .name = name;  разработчики [devIndex] .role = роль;  this.setState ({разработчики});  } else if (имя && роль) {const uid = new Date (). getTime (). toString ();  const {разработчики} = this.state;  developers.push ({uid, name, role}) this.setState ({developers});  } this.refs.name.value = '';  this.refs.role.value = '';  this.refs.uid.value = '';} removeData = (разработчик) => {const {developers} = this.state;  const newState = developers.filter (data => {return data.uid! == developer.uid;});  this.setState ({разработчики: newState});} updateData = (разработчик) => {this.refs.uid.value = developer.uid;  this.refs.name.value = имя разработчика;  this.refs.role.value = разработчик. роль;}