Рубрики
Без рубрики

Как создать веб-сайт своего портфолио, используя rest.js

После того, как мои друзья отменили наши планы на выходные, я искал что-то, чтобы убить время. Я, наконец, в итоге оказался планом создания веб-сайта портфолио после прохождения моего долгого списка ожидающих списка «желающих». Много часов поиска технологий и шаблонов позже я оказался созданием

Автор оригинала: Dhruv Barochiya.

После того, как мои друзья отменили наши планы на выходные, я искал что-то, чтобы убить время. Наконец, я в конечном итоге покончил с планом создать веб-сайт портфолио после прохождения моего долгосрочного списка «Желание, чтобы сделать»? вещи.

Много часов поиска технологий и шаблонов позже я оказался созданием это Сайт, использующий REVING.JS и развертывание его с помощью страниц GitHub. Вы можете найти код для веб-сайта здесь (Это называется « Web-App » технически, но для этой статьи я буду ссылаться на него как «сайт» … Я надеюсь, что это нормально).

Что вы узнаете

  • Некоторые основные концепции React.js
  • Как использовать Create-React-App с веб-сайта HTML
  • Как развернуть веб-сайт вашего портфолио, используя «GitHub Pages»

Некоторые концепции, которые вам нужно знать, прежде чем начать ..

Что такое отреагировано>

На данный момент достаточно узнать, что Regive.js – это библиотека JavaScript, используемой для создания компонентов интерфейса. Он был создан инженерами Facebook и в наши дни, он качал мир JavaScript ..

Что такое реактивный компонент>

Реагирование позволяет определять компоненты в качестве класса или функции. Вы можете предоставить дополнительные входы в компоненты, называемые « реквизит ‘.

Компоненты позволяют разбить UI в Независимый Разделы, как заголовок, нижний колонтитул и тело. Каждый компонент будет работать независимо, поэтому любой отдельный компонент может быть независимо оказан независимо в Реагировать не затрагивая всю страницу.

Это также приходит с «Методы жизненного цикла «Что позволяет вам определять кусочки кода, вы хотите выполнить в соответствии с состоянием компонента, такого как монтаж, рендеринг, обновление и немоделие.

Компоненты реагирования поставляются со своими собственными компромиссами. Например, мы можем повторно использовать компонент, экспортируя его на другие компоненты, но иногда оно сбивает с толку обрабатыванию нескольких компонентов, разговаривающих и запускающих рендуры друг для друга.

Вот как будет выглядеть компонент!

import React, { Component } from 'react'

export default class Component-name extends Component {
  render() {
    return (
      

        {these code will be rendered into the DOM}
      

    )
  }
}

Что такое страницы GitHub>

С страницами GitHub вы можете легко развернуть ваш сайт, используя GitHub бесплатно и без необходимости настроить любую инфраструктуру. Они предоставили модули, чтобы вам не нужно беспокоиться о многих вещах. Если вы придерживаетесь до конца, вы увидите, что это работает как магия!

Прежде чем идти вперед, убедитесь, что ..

Решите, какой контент вы хотите поставить на свой веб-сайт

Пройдите через последнее резюме один раз (если у вас нет ни одного, тогда Создать один сейчас И отложите этот проект до следующих выходных?). Это поможет вам иметь четкое представление о какой информации вы хотите поставить на ваш веб-сайт портфолио.

Найти вдохновение

Просмотрите сотни шаблонов веб-сайта бесплатных портфолио в Интернете, посмотрите, как и то, что вы можете использовать из них – выньте ручку и бумагу и набросать грубую диаграмму, чтобы получить представление о том, как будет выглядеть ваш сайт. Я буду пользоваться это шаблон для демонстрации.

Собрать некоторые удивительные фотографии себя

Конечно, вы не хотите выглядеть плохо на своем собственном веб-сайте портфолио. Так что копайте свои архивы фотографий, чтобы найти идеальные фотографии для вашего сайта.

Настройтесь в свой любимый плейлист

Легенда имеет это, что Хорошие вещи приходят только с хорошей музыкой … и Вы, безусловно, не хотите пропустить любые великие вещи.

Давайте прыгнем в здание

В следующих разделах я опишу шаги по созданию приложения портфолио Но вам не нужно следовать тот же код, который я использую. Сосредоточьтесь на изучении концепций и показать какое-то творчество! Дальнейшее чтение было разделено на три раздела.

  1. Настройка реактивного приложения
  2. Разбиение HTML-страницы в реагирование
  3. Развертывание вашего приложения на страницах GitHub

Настройка React-App

Мы будем использовать Create-React-App – Модуль, предоставленный Facebook – это помогает нам с легкостью создавать реактированные приложения и без беспокойства о сборке инструментов.

  • Перейти к консоли и запустить NPM Установка Create-React-App Чтобы установить этот модуль через NPM (убедитесь, что вы установили NPM Перед использованием его – Следуйте за Это Ссылка для получения дополнительной информации).
  • Сейчас беги NPM Create-raction-App $ {Project-name} Который будет привлекать сценарии сборки и создать файловую структуру, которая будет выглядеть так.
my-portfolio-app
├── README.md (description of the project for GitHUb)
├── node_modules (stores all dependent modules for the project)
├── package.json (stores all meta information of the prokect like dependencies,version,revisions etc.)
├── .gitignore (files declared here will be ignored while uploading to GitHub like node_modules 
├── public (here you will store all images,JS,CSS files) 
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json 
└── src (our main code for app lies here)
    ├── {create component folder here}
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

Создать Компоненты папка под SRC каталог. Здесь мы будем хранить наши компоненты в будущем.

  • Скопируйте все изображения, шрифты, файлы HTML и CSS из HTML шаблон Вы решили работать в публичный папка.

Теперь ваш каталог проекта должен выглядеть так.

  • Запустите NPM установить Команда, которая будет устанавливать зависимые модули под Node_Module каталог.
  • Если у вас есть прямо до сих пор, а затем запустить NPM начать Команда начнет приложение React на локальный . Перейти к https://localhost:3000 И вы должны быть в состоянии увидеть страницу стартера реактивного приложения.

Разломание страницы HTML в реагирование.

Помните Компонент папка, которую мы создали под сортировка Справочник на предыдущем шаге, теперь мы сломаем страницу шаблона HTML на компоненты и объединяем эти компоненты, чтобы сделать наше приложение React-App.

  • Во-первых, вам необходимо определить, какие компоненты вы можете создать из монолитного HTML-файла – как заголовок, нижний колонтитул и свяжитесь со мной. Вы должны быть немного креативным здесь !!
  • Ищите теги, такие как Раздел/Div который не вложен в некоторые другие Раздел/Div Отказ Они должны содержать код об этом конкретном разделе страницы, которая не зависит от других разделов. Попробуйте смотреть в мой Github Repo Чтобы получить лучшее представление об этом. Подсказка: используйте « проверять элемент «Инструмент для воспроизведения с кодом и обратите внимание на эффект изменения в браузере.
  • Эти кусочки HTML-кода будут использоваться в Render () Способ компонента. Render () Способ вернет этот код всякий раз, когда компонент отображается в реактоз. Посмотрите на блоки кода, приведенные ниже для справки.

    

        
    


import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      

        

            

                
            

        

      

    )
  }
}

Подсказка: если вещи сбиваются с толку на стороне RACT – попробуйте сосредоточить внимание на концепции «Как идентифицировать как быть компонентами из HTML-кодовой базы». После комфортной реакции реагировать, реализация будет частью пирога.

Вы заметили, что в HTML-код есть некоторые изменения? Класс Стал классное значение Отказ Эти изменения требуются, потому что реагирование не поддерживает HTML? – Они придумали свой собственный HTML-подобный синтаксис JS, который называется Jsx Отказ Итак, нам нужно изменить некоторые части HTML-кода, чтобы сделать его JSX.

Я столкнулся с этим HTML к JSX Converter Во время этого проекта, который преобразует HTML-код в JSX для вас? Я настоятельно рекомендую использовать это, а не изменение вашего кода вручную.

Через некоторое время вы должны придумать некоторые разные компоненты. Теперь Endgame близко!! Объедините эти разные компоненты под одним App.js Компонент (да !! Вы можете сделать один компонент из другого компонента!) И приложение вашего портфолио будет готово.

import React, { Component } from 'react';
import './App.css';
import Sidebar from './components/sidebar'
import Introduction from './components/introduction'
import About from './components/about'
import Projects from './components/projects'
import Blog from './components/blog'
import Timeline from './components/timeline'

class App extends Component {
  render() {
    return (
      

        

		
		

			
			
			
			
			
          	

      	

      

    );
  }
}

export default App;

Уведомление в вышеуказанном коде, который нам нужно сначала Импорт компоненты для того, чтобы использовать их в Render () раздел. И мы можем использовать компоненты, просто добавляя <Компонентное имя> или просто <Компонентное имя/> Тег в методе рендера.

  • Беги NPM начать С вашего терминала, и вы сможете увидеть изменения, отраженные на сайте. Вам не нужно снова запускать эту команду, если вы сделали больше изменений в коде, он будет отражен автоматически при сохранении этих изменений. Вы можете сделать немного молнии быстрого развития благодаря Горячая перезагрузка характерная черта .
  • Играйте с HTML и CSS, чтобы изменить контент в соответствии с вашим резюме и сделать свой портфель даже прохладнее, изменив содержимое, пробуя разные шрифты, изменяя цвета и добавление фотографий по вашему выбору.

Развернуть React-App на страницы GitHub

Ладно, так вы пережили до этого момента … Потратьте момент, чтобы оценить вашу тяжелую работу. Но вам все еще нужно завершить свое развертывание, чтобы вы могли поделиться своей крутой работой с друзьями, которые бросили в эти выходные планы.

  • Во-первых, вам нужно установить NPM библиотеку страниц GitHub. Чтобы установить, запустите эту команду NPM Установите GH-Pages на вашем терминале.

Теперь вам нужно сделать следующие изменения в вашем манифест .json файл:

  • Добавьте Главная страница Полевое значение будет в следующем формате – https://{github_id} .github.io/{github_repo}
  • Добавить предоплата и Развертывание поля под скрипты

Теперь ваш манифест. Джонс должен выглядеть так:

{
	"name": "portfolio-app",
	"version": "0.1.0",
	"private": true,
	"homepage": "https://Dhruv34788.github.io/me",
	"dependencies": {
		"gh-pages": "^2.0.1",
		"react": "^16.8.3",
		"react-dom": "^16.8.3",
		"react-scripts": "2.1.5",
		"yarn": "^1.13.0"},
	"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build",
		"predeploy": "yarn run build",
		"deploy": "gh-pages -d build",
		"test": "react-scripts test",
		"eject": "react-scripts eject"},
	"eslintConfig": {
		"extends": "react-app"},
	"browserslist": [
		">0.2%",
		"not dead",
		"not ie <= 11",
		"not op_mini all"
	]
}

Теперь иди к терминалу, запустите NPM запустить развертывание И ждать магии !! Ваше приложение будет развернуто после успешного выполнения скриптов развертывания. Убедитесь, что ваше приложение развернуто или нет, посещая ссылку, которую вы предоставили в Главная страница поле.

Осторожно: Пожалуйста, будьте осторожны при развертывании чего-либо на Интернете. Выполните проверки безопасности, такие как удаление внутренних ссылок, паролей или чего-либо, что вы не хотите быть там в руках умных людей.

Если вы собираетесь внести изменения часто …

Домашнее задание для тебя ..

Поздравляю! Вы наконец создали и развернули свое портфолио приложение. Если вы заинтересованы, то вы можете добавить эти функции на свой веб-сайт

  • Функция блога: Создайте свой собственный блог, используя Node.js и базу данных NoSQL, такую как Mongodb, и объединить его на этот веб-сайт портфолио.
  • Галерея: Добавьте раздел на страницу, где вы можете показать сценарий последних фотографий с веб-сайтов в социальных сетях.
  • Twitter Feed: Добавьте раздел, показывая последние твиты.
  • Случайная цитата: Добавить раздел, показывающий некоторые случайные мотивационные цитаты.

Если вы реализуете любую из этих функций, поделитесь своей работой со мной. Я был бы более чем счастлив помочь? ( если я могу ?)

Упаковка ..

Я хотел бы занять момент, чтобы признать работу людей, которые дали мне вдохновение и знания, чтобы завершить эту статью.

  • Quincy Ларсон, Сахат Ялкабы & сообщество: Для создания FreeCodeCamp – Платформа, в которой вы можете узнать и получать знания почти в целом, связанные с веб-технологиями; Использование практических учебных пособий и все без оплаты сборов. ?
  • ColorLib: Для обеспечения состояния художественных шаблонов, которые были огромным вдохновением для моего веб-сайта портфолио. ?
  • Даниэль Ло Нигро & сообщество: Для создания HTML к JSX Компилятор, который оказался удобным при преобразовании блоков HTML в код JSX. ?
  • Мои дорогие друзья: Кто помог мне в исправлении моих ошибок.
  • Вы: Для прилипания, я надеюсь, что у вас было продуктивное время. Продолжайте изучать и строить удивительные вещи!

Оригинал: “https://www.freecodecamp.org/news/portfolio-app-using-react-618814e35843/”

Читайте ещё по теме: