В этой статье мы сделаем первый и простой блог на React.js, думаю многим новичкам будет интересно, особенно тем, кто только начал изучать фреймворк React, для языка программирования JavaScript.
Также посмотрите статью «Как сделать регистрацию и вход на React.js», тоже очень интересная и полезная статья.
Первый блог на React.js:
Стоит сказать, что здесь будет совсем простой блог, мы даже в базу данных не будем не чего не сохранять, а просто сделаем не большое одно страничное приложение на React и как подключать его я тоже не покажу, для этого посмотрите стать по ссылке, правда там мы используем функциональные компоненты и хуки, а здесь классовые, но подключение точно такое же.
Ещё кроме React я буду использовать Bootstarap, чтобы всё выглядело более менее приемлемо, вы же можете сами написать стили или использовать другой CSS фреймворк.
Но давайте всё таки покажу как я подключил Bootstarp, для начала припишите эту команду:
1 | npm install bootstrap |
Таким образом вы установили его для своего проекта, теперь переходите в файл «index.js», и в самом начале подключаете стили этого Фреймворка:
1 | import 'bootstrap/dist/css/bootstrap.min.css'; |
На этом с Bootstarp мы закончим, дальше переходим в файл «App.js», там должен быть класс App, если нет, то создайте его, и так же он должен экспортироваться.
Примерно так это должно выглядеть:
1 2 3 4 5 6 7 | import React from 'react' class App extends React.Component { ... } export default App |
Ещё вы можете заметить, что мы подключаем сам React, и класс наследуем от его компонентов, это очень важно.
Теперь перейдём к рендару нашей страницы, для этого создаём метод render() вот как он будет выглядеть:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | render() { return ( <div className="container"> <h1>Первый блог на React</h1> <hr /> <form className="form" onSubmit={this.handleSubmit}> <div className="mb-3"> <label for="exampleFormControlInput1" class="form-label">Заголовок</label> <input type="text" name="title" value={this.state.title} onChange={this.handleChange} className="form-control" id="exampleFormControlInput1" placeholder="Заголовок" /> </div> <div className="mb-3"> <label for="exampleFormControlTextarea1" className="form-label">Текст</label> <textarea className="form-control" name="text" value={this.state.text} onChange={this.handleChange} id="exampleFormControlTextarea1" rows="3"></textarea> </div> <button type="submit" className="btn btn-primary mb-3">Добавить</button> </form> <hr /> <div> {this.renderPosts()} </div> </div> ) } |
Как видите здесь у нас есть форма, за отправку формы будет отвечать метод handleSubmit(), за обработку полей формы у на будет отвечать handleChange(), ну и самое последние мы используем метод renderPosts() для рендера наших постов.
В остальном тут всё просто, обычная работа с формой в React, единственное многих может смутить value, тех кто не знаком с React, там мы передаём состояние этих полей, это нужно для удобство разработки.
Дальше создадим конструктор, он делается очень просто, вот его код:
1 2 3 4 5 6 7 8 9 10 | constructor(props) { super(props); this.state = { title: "", text: "", posts: [] } this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } |
Тут мы первым делом создаём состояние, и как видите мы в нём храним заголовок и текст поста, ну и массив в котором храним посты, также мы методам которые нужны для работы с формой, передаём контекст конструктора.
Дальше создаём эти две переменные, для работы с формой и создания поста, вот их код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | handleChange(event) { this.setState({[event.target.name]: event.target.value}); } handleSubmit(event) { event.preventDefault(); let post = { title: this.state.title, text: this.state.text } let arr = this.state.posts arr.unshift(post) this.setState({posts: arr}) this.setState({...this.state, title: ""}) this.setState({...this.state, text: ""}) } |
Первый метод у нас handleChange(), там всё очень просто, мы меняем состояние зависимо от формы, опять же, если что то не понятно, то рекомендую почитать как работает форма в React.
Второй метод handleSubmit(), который нужен для отправки формы, в начале в нём мы отключаем стандартное действие события, то есть отправку формы, потом создаём объект post, это как понятно наш пост, дальше берём массив из состояние и добавляем в его начала наш объект, и ставим его в качестве нового состояния для пассива posts, в конце мы стираем состояние у полей.
Последние нам осталось сделать метод для рендера статей, он делается очень просто, вот его код:
1 2 3 4 5 6 7 8 9 10 11 12 | renderPosts() { return this.state.posts.map((post) => { return ( <div className="card" style={{marginBottom: "10px"}}> <div className="card-body"> <h5 className="card-title">{post.title}</h5> <p className="card-text">{post.text}</p> </div> </div> ) }) } |
Тут же мы проходимся по массиву постов и возвращаем React или JSX шаблон, ну и то что мы прошлись тоже возвращаем, и вы уже знаете где мы вызываем этот метод.
Вот что у нас получилось:
Как видите у нас всё тут работает, конечно это очень простой пример, по хорошему нужно ещё подключить Redux и создать сервер для хранение этих постов, в будущих статьях мы этим займёмся.
Вывод:
В этой статье вы прочитали как сделать свой первый блог на React.js, думаю вам было интересно и полезно.
Подписываетесь на соц-сети:
Оценка:
Загрузка...