Создайте личный блог с помощью React

внешний интерфейс React.js CSS Redux

адрес проекта:GitHub.com/smashed g ZL/smashed…

Если вы считаете проект хорошим, нажмите «звездочку» в правом верхнем углу, чтобы поддержать его, большое спасибо! ~(≧▽≦)/~

Онлайн адрес:guozeling.cn/blogs

предисловие

В прошлом я использовал hexo + next для создания своего собственного блога, но после недавнего изучения React меня глубоко увлекли его идеи разработки на основе компонентов.У меня было время во время зимних каникул, поэтому я использовал React для создания блога. моего собственного. . React на самом деле соответствует только слою представления в MVC.Для создания полноценного приложения одного React недостаточно, нам также нужны другие библиотеки или фреймворки, такие как redux для управления данными, и react для реализации front-end роутинга -router и так далее на.

стек технологий

внешний интерфейс

  • react
  • axios: асинхронный запрос
  • react-router-dom: внешняя маршрутизация
  • redux: управлять всеми данными приложения
  • redux-thunk: промежуточное ПО для избыточности, в основном используемое для обработки асинхронных действий.
  • styled-components: CSS в JS, который позволяет писать собственный CSS в JS.

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

задняя часть

  • koa

Бэкенд блога разработан с помощью Node.js, на основе koa и реализован с использованием архитектуры Restful API, в которой прекрасно реализовано разделение фронтальной и бэкендов, бэкенду нужно только предоставлять данные, а маршрутизировать переходы и рендеринг данных все делается передним концом.

адрес проекта:GitHub.com/smashed g ZL/smashed…

Реализованный функционал

  • [x] Отображение списка главной страницы блога
  • [x] уценка контента блога
  • [x] Каталог содержимого блога
  • [x] Категории и теги для блогов
  • [х] вернуться к началу
  • [х] Отзывчивый
  • [x] О странице (в настоящее время используется для размещения резюме, я джуниор, ищу стажировку...)

TODO

  • [ ] Страница категории
  • [ ] вкладка
  • [ ] подсветка кода уценки
  • [ ] Украсить стиль страницы

Предварительный просмотр блога

титульная страница

blog_home

Страница сведений о блоге

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/3/7/161fe5a89983b46e~tplv-t2oaga2asx-image.image

Резюме проекта

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

React — это просто слой просмотра

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

Внешняя маршрутизация

Фронтенд разрабатывается очень быстро, и всегда появляются новые вещи. Раньше я использовал экспресс для создания серверных приложений. В то время я знал, что есть внутренний маршрут, который представляет собой URL-путь запроса. для возврата другого контента и возврата разных страниц. И когда я впервые услышал о внешней маршрутизации, я сначала подумал, что это что-то новое, но это не так, это был просто переход от внутренней части. Маршрутизация реализована на внешнем интерфейсе, поэтому при обновлении URL-адреса страницы запрос URL-адреса не будет инициирован, но разные компоненты будут отображаться в соответствии с разными URL-адресами.

<Switch>
  <Route exact path="/" component={BlogList} />
  <Route exact path="/blogs" component={BlogList} />
  <Route path="/blogs/:blogId" component={Blog} />
  <Route path="/tags" component={OnDevelopingContent} />
  <Route path="/categories" component={OnDevelopingContent} />
  <Route path="/about" component={ResumeContent} />
  <Route component={NotFoundContent} />
</Switch>

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

Как управлять данными приложения

в реакцииstateПо сути, он используется для хранения данных приложения, и их можно передавать в подкомпоненты.stateРазумеется, но при создании больших приложений необходимо тщательно продумать, как управлять данными приложения.

stateНа самом деле есть следующие проблемы:

  • Родительский компонент для передачи данных компонентам Sun или нескольким компонентам будущих поколений, нам нужно помочь всем промежуточным компонентам помочь доставить, в противном случае вам нужно использовать Reactcontext APIдля передачи данных между компонентами.

  • Данные из дочерних компонентов не могут быть переданы в родительские компоненты или компоненты верхнего уровня.

  • Хранилище данных приложения слишком разбросано.

Появление Redux решает вышеуказанные проблемы, в Redux есть только один уникальный глобалstore, здесь хранятся данные всего приложения, и любой компонент можетstoreПолучите данные, которые должны использовать ваши собственные компоненты, иactionизменитьstore,storeИзменение приведет к обновлению соответствующего компонента, и компонент также получит обновленные данные. На самом деле Redux используетContext APIосуществленный,

const mapStateToProps = state => ({
  blogCount: state.profile.blogCount,
  tagCount: state.profile.tagCount,
  categoryCount: state.profile.categoryCount
})

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      requestGetProfileInfo
    },
    dispatch
  )

export default connect(mapStateToProps, mapDispatchToProps)(ProfileCard)

Как видно из кода,ProfileCardотstoreприобретенныйprofileобъектblogCount,tagCount,categoryCountс однимrequestGetProfileInfoфункция,requestGetProfileInfoНа самом деле, он используется для измененияstoreиз.connectфункцияreact-reduxМетод соединения react и redux, вызов этой функции на самом деле возвращает компонент более высокого порядка, и множество оптимизаций производительности делается внутри (в основном вshouldcomponentupdateфункция).

Как писать CSS

На заре фронтенд-разработки все выступали за разделение контента и стиля, фактически HTML и CSS писались отдельно, а ссылки на CSS-ресурсы были в HTML.

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

На самом деле вариантов написания CSS в React много, и у каждого есть свои преимущества.styled-componentsЭта библиотека на самом деле является своего рода CSS в JS.

Встроенные стили в компонентах

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

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

внешний стиль

reboot.css

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0 0 100px;
    padding-top: 50px;
}

a {
    text-decoration: none;
    cursor: pointer;
}

index.js

import './reboot.css'

Его можно найти во внешней таблице стилей при загрузке страницы.

react_import_css

Но есть много проблем с написанием таким образом:

  • Имена склонны к конфликту
  • Плохая независимость компонентов
  • Не могу загрузить по запросу

CSS in JS

я лично предпочитаюstyled-components, давайте сначала посмотрим на официальный пример.

// 创建一个Title组件并且它会渲染 h1 标签，并且拥有以下的样式
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// 创建一个Wrapper组件并且它会渲染 section 标签，并且拥有以下样式
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// 组件渲染
render(
  <Wrapper>
    <Title>
      Hello World, this is my first styled component!
    </Title>
  </Wrapper>
);

styled-componentsОсновная идея состоит в том, чтобы привязать стиль к соответствующему компоненту, сгенерировать хэш-значение содержимого путем вычисления содержимого стиля CSS и использовать это значение в качестве значения className компонента, что отлично решает проблему конфликтов имен. .

Конечноstyled-componentsНа этом его возможности не заканчиваются, он также может реализовывать наследование правил CSS, расширение, динамическое вычисление стилей на основе реквизитов, переданных родительскими компонентами, и многое другое.

CSS в JS кажется совершенно новым вариантом, и лично мне он очень нравится.

Категории