Blog / Programming / Уроки React. Урок 2, Домашнее задание.

Уроки React. Урок 2, Домашнее задание.

By Pavel Bragin 4,051 September 5, 2016

Category:

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

import React, { PropTypes } from 'react'  
  
function Comment(props) {  
    const { comment: { text, user } } = props  
    return (  
        <div>  
            <p>{text}</p>  
            <b>by {user}</b>  
        </div>

import React, { PropTypes } from 'react'

function Comment(props) {

const { comment: { text, user } } = props

return (

<div>

</div>

Set featured image

    )  
}  
  
export default Comment

)

}

export default Comment

CommentList.js

import React, { Component, PropTypes } from 'react'  
import Comment from './Comment'  
  
class CommentList extends Component {  
    state = {  
        isOpen: false  
    }  
  
    render() {  
        const { comments } = this.props  
        if (!comments || !comments.length) return <h3>no comments yet</h3>  
        const { isOpen } = this.state  
        const commentItems = comments.map(comment => <li key = {comment.id}><Comment comment = {comment}/></li>)  
        const body = isOpen ? <ul>{commentItems}</ul> : null  
        const linkText = isOpen ? 'close comments' : 'show comments'  
        return (  
            <div>  
                <a href="#" onClick = {this.toggleOpen}>{linkText}</a>  
                {body}  
            </div>  
        )  
    }  
  
    toggleOpen = (ev) => {  
        ev.preventDefault()  
        this.setState({  
            isOpen: !this.state.isOpen  
        })  
    }  
}  
  
export default CommentList

import React, { Component, PropTypes } from 'react'

import Comment from './Comment'

class CommentList extends Component {

state = {

isOpen: false

}

render() {

const { comments } = this.props

if (!comments || !comments.length) return <h3>no comments yet</h3>

const { isOpen } = this.state

const commentItems = comments.map(comment => <li key = {comment.id}><Comment comment = {comment}/></li>)

const body = isOpen ? <ul>{commentItems}</ul> : null

const linkText = isOpen ? 'close comments' : 'show comments'

return (

<div>

<a href="#" onClick = {this.toggleOpen}>{linkText}</a>

{body}

</div>

)

}

toggleOpen = (ev) => {

ev.preventDefault()

this.setState({

isOpen: !this.state.isOpen

})

}

export default CommentList

Наш файл Articles.js претерпит следующие изменения

import React, { Component } from 'react'  
import CommentList from './CommentList' //added
    
  class Article extends Component {  
      state = {  
  
      render() {  
         const article = this.props.article  //deleted
 //        const { article } = this.props  //deleted
 //    const { article: { title, text } } = props  //deleted
     const { article: { title, text, comments } } = this.props //added  
          const { isOpen } = this.state  
         const body = isOpen ? <section>{ article.text }</section> : null  //deleted
         const body = isOpen ? <section>{ text } <CommentList comments = {comments} /></section> : null  //added 
    
          return (  
              <div>  
                 <h1 onClick = {this.toggleOpen}>{ article.title }</h1>  //deleted
                 <h1 onClick = {this.toggleOpen}>{ title }</h1>  //added
                  {body}  
              </div>  
          )

import React, { Component } from 'react'

import CommentList from './CommentList' //added

class Article extends Component {

state = {

render() {

const article = this.props.article //deleted

// const { article } = this.props //deleted

// const { article: { title, text } } = props //deleted

const { article: { title, text, comments } } = this.props //added

const { isOpen } = this.state

const body = isOpen ? <section>{ article.text }</section> : null //deleted

const body = isOpen ? <section>{ text } <CommentList comments = {comments} /></section> : null //added

return (

<div>

<h1 onClick = {this.toggleOpen}>{ article.title }</h1> //deleted

<h1 onClick = {this.toggleOpen}>{ title }</h1> //added

{body}

</div>

)

Так будет выглядеть код нашего домашнего задания. Можете скачать файл с обновленным проектом отсюда или просто его скопировать. Далее будем работать в нем.

We are looking forward to meeting you on our website soshace.com