Reactjs укрепил свои позиции в мире интерфейсов за последние несколько лет, и в последние месяцы наблюдается рост спроса на разработчиков reactjs. Стремясь повысить ваши шансы на получение позиции фронтенд-веб-разработчика, я пишу эту статью сегодня, чтобы показать простой способ создать собственное портфолио разработчика в reactjs и бесплатно разместить его на страницах Github.
Ваше окончательное портфолио будет выглядеть следующим образом: -
Итак, начнем:
1) Сначала скачайте бесплатный шаблон резюме по следующей ссылке:
Https://www.styleshout.com/free-templates/ceevee/
Распакуйте zip-папку в подходящее место. Мы будем называть эту папку папкой шаблонов во всем руководстве.
2) Затем установите модуль npm create-response-app либо с помощью yarn, либо с помощью диспетчера пакетов npm:
npm install -g create-react-app yarn global add create-react-app
3) Создайте новый проект резюме:
create-react-app resume cd resume npm start
4) Теперь скопируйте папки CSS, изображений и js из папки шаблона (Ceevee10), чтобы возобновить = ›общедоступную папку в вашем проекте.
3) Затем добавьте следующие строки в тег head файла index.html в папке resume = ›public следующим образом:
<link rel="stylesheet" href="%PUBLIC_URL%/css/default.css"> <link rel="stylesheet" href="%PUBLIC_URL%/css/layout.css"> <link rel="stylesheet" href="%PUBLIC_URL%/css/media-queries.css"> <link rel="stylesheet" href="%PUBLIC_URL%/css/magnific-popup.css"> <script src="%PUBLIC_URL%/js/modernizr.js"></script> <title>Sample resume</title>
Аналогичным образом добавьте следующую строку под div с идентификатором root:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/magnific-popup.js"></script>
<script src="js/init.js"></script>
Это должно позаботиться обо всех дополнительных ресурсах, необходимых для проекта, и теперь мы можем сосредоточиться на разработке ядра React js.
4) Теперь нам нужно создать отдельные компоненты, разделив различные разделы в файле index.html в папке загруженного сайта на модули.
Сначала создайте папку компонентов в папке resume = ›src следующим образом:
Начнем с шапки. Сначала скопируйте часть заголовка из файла index.html в папку шаблона (Ceevee10), а именно:
<body> <!-- Header ================================================== --> <header id="home"> <---Copy from this section ... ... </header> <--Till here ... </body>
Теперь вставьте код из html в конвертер jsx, как этот:
Https://magic.reactjs.net/htmltojsx.htm
Конвертер удалит лишние комментарии, добавит соответствующие закрывающие теги и сделает соответствующий отступ в коде. Затем создайте новый класс в файле header.js в папке заголовка resume = ›src =› и вставьте сгенерированный код в функцию рендеринга следующим образом:
import React, { Component } from 'react';
export default class Header extends Component {
render() {
return (
<React.Fragment>
{/*generated code*/}
<header id="home">
....
</header>
</React.Fragment>
);
}
}
Аналогичным образом преобразуйте другие компоненты и добавьте их в соответствующие файлы.
5) Затем импортируйте компоненты в файл App.js следующим образом:
import React, { Component } from 'react';
import Header from './components/header/header';
import About from './components/about/about';
import Resume from './components/resume/resume';
import Portfolio from './components/portfolio/portfolio';
import Testimonials from './components/testimonials/testimonials';
import ContactUs from './components/contactus/contactus';
import Footer from './components/footer/footer';
class App extends Component {
render() {
return (
<div className="App">
<Header />
<About />
<Resume />
<Portfolio />
<Testimonials />
<ContactUs />
<Footer />
</div>
);
}
}
export default App;
Если вы теперь запустите команду «npm start» из терминала, вы сможете увидеть свой веб-сайт в реальном времени и работающий нормально. Теперь вы можете самостоятельно редактировать отдельные детали в каждом компоненте или передавать эти детали в качестве реквизита для каждого компонента из родительского компонента. Мы собираемся использовать второй подход, но вы можете пропустить этот шаг, если хотите, и перейти к шагу размещения кода.
5) Теперь давайте передадим наши собственные данные в качестве реквизита каждому компоненту из родительского компонента следующим образом:
Сначала создайте файл resumeData.js в папке resume = ›src следующим образом:
let resumeData = {
"imagebaseurl":"http://localhost:3000/",
"name": "Your name",
"role": "Frontend Developer"
}
export default resumeData
Затем импортируйте файл, как в App.js, и передайте его в качестве свойств дочерним компонентам следующим образом:
import React, { Component } from 'react';
....
import resumeData from './resumeData';
class App extends Component {
render() {
return (
<div className="App">
<Header resumeData={resumeData}/>
....
Затем используйте реквизиты в файле заголовка следующим образом:
import React, { Component } from 'react';
export default class Header extends Component {
render() {
let resumeData = this.props.resumeData;
return (
<React.Fragment>
{/*generated code*/}
<header id="home">
....
<div className="row banner">
<div className="banner-text">
<h1 className="responsive-headline">I am {resumeData.name}.</h1>
<h3>I am a {resumeData.role}.{resumeData.roleDescription}
</h3>
<hr/>
...
</header>
</React.Fragment>
);
}
}
Точно так же добавьте другие детали и передайте реквизиты другим компонентам для настройки вашего сайта. Не стесняйтесь обращаться к проекту GitHub, упомянутому в конце руководства, если у вас возникнут какие-либо проблемы.
Наконец, у вас будет собственное портфолио разработчиков, созданное в полностью готовом React.
6) Теперь пора развернуть код на страницах github. Если у вас уже есть учетная запись GitHub, создайте репо your-profile-name.github.io или зарегистрируйтесь. Для получения более подробной информации перейдите по этой ссылке: Github Pages
Затем перейдите в resumeData.js и измените атрибут `imagebaseurl` на URL-адрес вашего репозитория github.io.
Например, если имя репо - «techonoeticsclub.github.io», тогда baseurl будет: -
let resumeData = {
"imagebaseurl":"https://techonoeticsclub.github.io/",
...
}
...
Затем выполните следующую команду, чтобы сгенерировать сборку проекта:
npm run build
7) Теперь клонируйте репозиторий github локально, используя команду:
git clone <your-repo-url>
8) Скопируйте содержимое из папки resume = ›build в папку репо.
9) Отправьте свои изменения в github, используя команды в папке репо:
git add . git commit -am "resume changes" git push origin master
Теперь вы можете увидеть свое портфолио вживую, посетив URL-адрес веб-сайта github Pages.
Вы можете получить весь исходный код проекта по следующей ссылке: Github
Оригинальное вдохновение для этого проекта исходит от этого репо: - Github. Проверьте это тоже.
На этом урок на сегодня. Я надеюсь, что вы попробуете и создадите свои потрясающие резюме в будущем. Вы можете связаться со мной в Twitter или LinkedIn, чтобы получить помощь или общие рекомендации по разработке интерфейса.
Удачного кодирования: D
