Портфельные проекты — ключевая часть собеседования с фронтенд-разработчиком или разработчиком полного цикла. Хотя у вас может быть много небольших проектов, часто бывает лучше иметь только несколько долгосрочных проектов, таких как тиражирование популярных социальных сетей или приложений для обмена сообщениями. Эти долгосрочные проекты показывают рекрутерам, что у вас есть опыт работы с их типом продукта и что у вас есть решимость продолжать работать над ним.
Сегодня мы поможем вам воссоздать Instagram, создав его пользовательский интерфейс с помощью React. К концу этого урока у вас будет отличная отправная точка для вашего следующего проекта по созданию портфолио.
Предпосылки
Для начала на вашем устройстве должны быть установлены как Node, так и Node Package Manager.
Введите следующие команды в командную строку, чтобы подтвердить, что они установлены:
node --version npm --version
Для установки React вам понадобится Node версии 6 или выше. Чтобы установить React, введите в командную строку следующее:
npm install -g create-react-app
Настройка вашего проекта React
Для начала мы создадим наше веб-приложение и назовем его instagram-clone. Введите следующую команду:
create-react-app instagram-clone
Это создаст шаблон приложения по умолчанию, который мы будем использовать в качестве отправной точки. Вы можете просмотреть домашнюю страницу по умолчанию, сначала выбрав каталог приложения и запустив выбранный каталог.
cd instagram-clone npm start
Подождите, пока сервер запустится, затем перейдите localhost:3000в браузере, чтобы увидеть шаблон приложения:
Создание компонентов пользовательского интерфейса
Теперь мы можем приступить к настройке шаблона, чтобы он выглядел как пользовательский интерфейс Instagram. Мы будем использовать веб-компоненты React для создания заголовка приложения, который будет содержать логотип Instagram и название бренда, а также компонент публикации, который будет содержать опубликованное изображение, имя пользователя и подпись.
Напоминаем, что в React есть библиотека предварительно созданных компонентов, которые включают базовую структуру для общего поведения приложения, такого как заголовки или панели поиска. Пользовательские интерфейсы Finish React состоят из множества этих веб-компонентов, которые вы можете индивидуально настраивать и повторно использовать на других страницах или проектах.
Мы начнем с создания и стилизации компонента Header.
Компонент заголовка
Нам нужно сделать componentsпапку в src/каталоге нашего приложения для хранения нашего компонента Header.
Следующая команда выбирает src/каталог, создает в нем новую папку и выбирает эту новую componentsпапку:
cd src mkdir components && cd components
Затем мы создадим и выберем папку для компонента Header, componentsиспользуя:
mkdir Header && cd Header
Отсюда мы создадим наш index.jsфайл, который позволит нам описывать содержимое компонента с помощью JSX, версии HTML с расширением JavaScript.
touch index.js
Теперь откройте index.jsфайл и вставьте следующий код:
// src/components/Header/index.js import React from "react"; class Header extends React.Component{ render(){ return ( <nav className="Nav"> <div className="Nav-menus"> <div className="Nav-brand"> <a className="Nav-brand-logo" href="/"> Instagram </a> </div> </div> </nav> ); } } export default Header;
Этот код создает схему всего содержимого, которое мы будем иметь в компоненте, но не включает никаких стилей.
Чтобы сделать его визуально привлекательным, нам нужно создать таблицу стилей CSS в нашем Headerкаталоге компонентов.
touch Header.css
Откройте свою таблицу стилей CSS и вставьте следующее:
/* src/components/Header/Header.css */ i.Nav { background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.0975); position: fixed; top: 0; width: 100%; z-index: 2; -webkit-transition: height 0.2s ease-in-out; transition: height 0.2s ease-in-out; height: 77px; } .Nav-menus { display: flex; flex-direction: row; height: 77px; width: 70%; margin: 0 auto; padding: 26px 40px; } .Nav-brand-logo { display: block; background-position: -176px 0px; background-image: url(../../logo.png); background-size: 405px 379px; background-repeat: no-repeat; height: 35px; width: 176px; text-indent: -1000% }
background-image импортирует изображение из URL. Вам нужно будет включить URL-адрес логотипа в srcкаталог в следующем формате:[logo.png]()
Сделав соответствующий стиль, обновите index.jsфайл, чтобы он ссылался на таблицу стилей.
// src/components/Header/index.js import React from "react"; import "./Header.css"; class Header extends React.Component{ render(){ return ( <nav className="Nav"> <div className="Nav-menus"> <div className="Nav-brand"> <a className="Nav-brand-logo" href="/"> Instagram </a> </div> </div> </nav> ); } } export default Header;
Теперь мы готовы визуализировать наш компонент и посмотреть, как он выглядит. Просто замените код в вашем src/App.jsфайле следующим кодом:
// src.App.js import React, { Component } from 'react'; import './App.css'; import Header from './components/Header'; class App extends Component { render() { return ( <Header /> ); } } export default App;
По сути, это указывает приложению отображать заголовок как обычную функцию страницы.
Чтобы увидеть, как получился заголовок, start снова откройте приложение и перейдите к нему localhost:3000. Вы должны увидеть наш потрясающий новый заголовок!
Компонент публикации
Теперь добавим компонент «Сообщения». Этот компонент установит формат для дизайна пиктограмм Instagram и позволит пользователям публиковать изображения с подписью под своим именем пользователя.
Как и в случае с этим Header, мы начнем с создания новой папки с именем Postв componentsкаталоге.
cd src/components mkdir Post && cd Post
Затем мы создадим index.jsфайл в Postпапке:
touch index.js
Внутри index.jsфайла вставьте следующее:
// src/components/Post/index.js import React, { Component } from "react"; class Post extends Component { render() { return <article className="Post" ref="Post"> <header> <div className="Post-user"> <div className="Post-user-profilepicture"> <img src="https://t4.ftcdn.net/jpg/02/19/63/31/360_F_219633151_BW6TD8D1EA9OqZu4JgdmeJGg4JBaiAHj.jpg" alt="John D. Veloper" /> </div> <div className="Post-user-nickname"> <span>John Doe</span> </div> </div> </header> <div className="Post-image"> <div className="Post-image-bg"> <img alt="Icon Living" src="[https://cdn-images-1.medium.com/max/1200/1*dMSWcBZCuzyRDeMr4uE_og.png]" /> </div> </div> <div className="Post-caption"> <strong>John D. Veloper </strong> Loving Educative! </div> </article>; } } export default Post;
В этом index.jsфайле выделяются три области содержимого:
- Post Header — который показывает изображение профиля и имя пользователя
- Post Content — отображает размещенное изображение
- А также Post Caption — отображает имя пользователя и подпись
Без стиля это будет выглядеть как беспорядок текста и изображения. Давайте добавим таблицу стилей CSS Post.cssв Postкаталог.
Создайте Post.cssфайл, введя:
touch Post.css
Теперь откройте таблицу стилей CSS и вставьте следующий код:
/* src/components/Post/Post.css */ .Post { border-radius: 3px; border: 1px solid #e6e6e6; background-color: #fff; margin-bottom: 60px; margin-left : 20%; margin-right: 20%; } .Post-user { display: flex; padding: 16px; align-items: center; } .Post-user-profilepicture { width: 30px; height: 30px; } .Post-user-profilepicture img { width: 100%; height: 100%; border-radius: 50%; } .Post-user-nickname { margin-left: 12px; font-family: 'PT Sans', sans-serif; font-weight: bold; } .Post-image-bg { background-color: #efefef; } .Post-image img { display: block; width: 100%; } .Post-caption { padding: 16px 16px; } .Post-caption strong { font-family: 'PT Sans', sans-serif; font-weight: bold; } .vjs-fade-out { display: none; visibility: hidden; opacity: 0; }
Как и раньше, теперь мы добавляем оператор импорта вверху index.jsфайла в Postпапке.
import "./Post.css";
Теперь мы должны указать приложению отрисовать наш компонент Post. Теперь мы отредактируем тот же App.jsфайл, чтобы он выглядел так:
// src/App.js import Post from './components/Post'; class App extends Component { render() { return ( <div> <Header /> <div> <Post /> </div> </div> ); } } export default App;
Наконец, start приложение и перейдите в localhost:3000.
Благодаря этим двум компонентам наше приложение Instagram выглядит довольно реалистично!
Обновление вашего приложения с помощью свойств
В нашей текущей сборке мы используем статические изображения и учетную запись для тестирования компонента Post. Если мы сохраним это так, все наши сообщения будут такими же. Теперь мы добавим propsк нашему Postsкомпоненту, чтобы они могли заполняться динамически.
Свойства или props, по сути, являются переменными внутри компонента, которые позволяют вам обмениваться данными между компонентами. Это помогает сделать компонент многоразовым, потому что нам не нужен новый компонент для каждой публикации.
Обновите index.jsфайл в вашем компоненте Post, чтобы он выглядел так:
// src/components/Post/index.js import React, { Component } from "react"; import "./Post.css"; class Post extends Component { constructor(props){ super(props); } render() { const nickname = this.props.nickname; const profilepicture= this.props.profilepicture; const image = this.props.image; const caption = this.props.caption; return ( <article className="Post" ref="Post"> ... <img src={profilepicture} alt={nickname} /> ... <span>{nickname}</span> ... <img alt={caption} src={image} /> ... <strong>{nickname}</strong>{caption} ... </article> ); } } export default Post;
Это добавляет props, отмеченное фигурными скобками {}, для каждого фрагмента контента в сообщении. Им присваиваются значения при рендеринге, чтобы учесть уникальные сообщения.
В качестве последнего шага нам нужно изменить App.jsпередачу необходимых данных в компонент Post.
// src/App.js import React, { Component } from 'react'; import './App.css'; import Header from './components/Header'; import Post from './components/Post'; class App extends Component { render() { return <div className="App"> <Header /> <section className="App-main"> <Post nickname="John D. Veloper" profilepicture="https://t4.ftcdn.net/jpg/02/19/63/31/360_F_219633151_BW6TD8D1EA9OqZu4JgdmeJGg4JBaiAHj.jpg" caption="Loving Educative!" image="https://cdn-images-1.medium.com/max/1200/1*dMSWcBZCuzyRDeMr4uE_og.png" /> </section> </div>; } } export default App;
Хотя страница будет выглядеть так же localhost:3000, теперь у вас есть интересный пользовательский интерфейс приложения, с помощью которого можно загружать уникальные сообщения!
Следующие шаги для вашего приложения Instagram
Поздравляем с завершением создания пользовательского интерфейса Instagram! Хотя магазин приложений еще не готов, это отличная отправная точка для более длительного проекта вашего профессионального портфолио.
Вот еще несколько функций, которые вы можете добавить рядом, чтобы улучшить свои навыки разработчика:
- Интеграция серверной загрузки с Graph QL или Firebase
- Добавьте функцию Instagram Story в реальном времени
- Создавайте вкладки и страницы учетных записей, которые вытягивают предыдущие сообщения
- Добавить аутентификацию входа с помощью Firestore
- Добавьте функцию Instagram Messenger с поддержкой эмодзи
Если вы застряли, попробуйте загрузить свой проект на Github, чтобы получить отзывы от других разработчиков! Сообщество React очень активно и поможет вам найти ваши следующие шаги.
Чтобы помочь вам продолжить практическое изучение React, компания Educative создала React for Front-End Developers Path. Этот сборник учебных материалов «все-в-одном» научит вас основным навыкам, которые нужны рекрутерам фронтенд-разработчиков. Вы выйдете за рамки простого React и узнаете, как интегрировать свои приложения с другими известными технологиями, такими как Firebase и Redux.
