Я новичок в 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
? Может быть с оператором спреда?