Галерея веб-изображений с React и Firebase - PullRequest
0 голосов
/ 04 ноября 2019

Я новичок в React, и я хотел бы сделать веб-страницу портфолио для клиента, где он может показать свои работы по графическому дизайну. Я установил приложение React, подключил его к базе данных Firebase Real-time, загрузил и получил несколько тестовых сообщений. Код на данный момент:

import React, { Component } from "react";
import "../styles/Body.css";

import firebase from "firebase/app";
import "firebase/database";

import config from "../config";

firebase.initializeApp(config);

class Work extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  componentDidMount() {
    const ref = firebase.database().ref("Testposts");
    ref.on("value", snapshot => {
      let posts = snapshot.val();
      let newState = [];
      for (let post in posts) {
        newState.push({
          id: post,
          name: posts[post].name,
          value: posts[post].value
        });
      }
      this.setState({
        posts: newState
      });
    });
  }

  render() {
    return (
      <React.Fragment>
        <div className="container">
          <div className="row">
            {this.state.posts.map(post => {
              return (
                <div key={post.id} className="col-4">
                  <h3>{post.name}</h3>
                  <p>{post.value}</p>
                </div>
              );
            })}
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Work;

Я также настроил Firebase Storage и загрузил туда несколько примеров изображений через панель Firebase. Теперь я хотел бы получить эти изображения из хранилища и отобразить их на странице клиентов.

Я думаю, что мне нужно отредактировать существующий код, но, поскольку я новичок, я точно не знаюкак. Могут ли более опытные разработчики React помочь коллеге в создании? Я искал в Интернете и на YouTube учебники, но не могу найти ничего полезного, только сотни учебников, объясняющих, как создать страницу загрузки файла, которая мне сейчас не нужна.

ИВторой вопрос ... Могу ли я отредактировать существующий код, чтобы избавиться от цикла for? Может быть с оператором спреда?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...