Первый блог на React.js

Метки: / / / /

В этой статье мы сделаем первый и простой блог на React.js, думаю многим новичкам будет интересно, особенно тем, кто только начал изучать фреймворк React, для языка программирования JavaScript.

Также посмотрите статью «Как сделать регистрацию и вход на React.js», тоже очень интересная и полезная статья.

Первый блог на React.js:

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

Ещё кроме React я буду использовать Bootstarap, чтобы всё выглядело более менее приемлемо, вы же можете сами написать стили или использовать другой CSS фреймворк.

Но давайте всё таки покажу как я подключил Bootstarp, для начала припишите эту команду:

Таким образом вы установили его для своего проекта, теперь переходите в файл «index.js», и в самом начале подключаете стили этого Фреймворка:

На этом с Bootstarp мы закончим, дальше переходим в файл «App.js», там должен быть класс App, если нет, то создайте его, и так же он должен экспортироваться.

Примерно так это должно выглядеть:

Ещё вы можете заметить, что мы подключаем сам React, и класс наследуем от его компонентов, это очень важно.

Теперь перейдём к рендару нашей страницы, для этого создаём метод render() вот как он будет выглядеть:

Как видите здесь у нас есть форма, за отправку формы будет отвечать метод handleSubmit(), за обработку полей формы у на будет отвечать  handleChange(), ну и самое последние мы используем метод renderPosts() для рендера наших постов.

В остальном тут всё просто, обычная работа с формой в React, единственное многих может смутить value, тех кто не знаком с React, там мы передаём состояние этих полей, это нужно для удобство разработки.

Дальше создадим конструктор, он делается очень просто, вот его код:

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

Дальше создаём эти две переменные, для работы с формой и создания поста, вот их код:

Первый метод у нас handleChange(), там всё очень просто, мы меняем состояние зависимо от формы, опять же, если что то не понятно, то рекомендую почитать как работает форма в React.

Второй метод handleSubmit(), который нужен для отправки формы, в начале в нём мы отключаем стандартное действие события, то есть отправку формы, потом создаём объект post, это как понятно наш пост, дальше берём массив из состояние и добавляем в его начала наш объект, и ставим его в качестве нового состояния для пассива posts, в конце  мы стираем состояние у полей.

Последние нам осталось сделать метод для рендера статей, он делается очень просто, вот его код:

Тут же мы проходимся по массиву постов и возвращаем React или JSX шаблон, ну и то что мы прошлись тоже возвращаем, и вы уже знаете где мы вызываем этот метод.

Вот что у нас получилось:

Как выглядит первый блог на React.js

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

Вывод:

В этой статье вы прочитали как сделать свой первый блог на React.js, думаю вам было интересно и полезно.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Также рекомендую:

Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии