Blog / JavaScript / React / React Lessons / React Lesson 2: Homework Assignment

React Lesson 2: Homework Assignment

By Ilia Dzhiubanskiy 12,895 November 1, 2019

Category:

JavaScript

React

React Lessons

Hopefully, all’s going well!

Let’s check our home task. The main reason of using React lies in the ability to create components based on your functionality set, i.e. to divide the whole app into small independent parts. In our case, we need to make comments our independent component. It will also be great to practice the skill of creating as many stateless components as possible. One of the examples in this scenario is the comment.js file.

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

import React from 'react'

import PropTypes from 'prop-types';

function Comment(props) {

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

return (

<div>

</div>

)

}

export default Comment

CommentList.js

import React, { Component } from 'react'  
import PropTypes from 'prop-types';
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 } from 'react'

import PropTypes from 'prop-types';

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

Our file named Articles.js will change in the following way:

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>

)

This is how our home task coding will look like. You can download the file with the updated project from our repository or just copy it. Our next assignments will continue in this file.

React lessons can be viewed here: https://soshace.com/category/javascript/react/react-lessons/

About the author

Ilia Dzhiubanskiy

Registered 01-11-2019 | Last seen long time ago 8

0 Comments | 2 Publications

Top developers

Alexey D. Frontend Developer
JS ReactHTML CSS Angular Show lessAll skills
Dragos S. Full Stack Developer
JS AngularNode.js Show lessAll skills
Milan M. Full Stack Javascript Developer
Angular Node.jsJS Show lessAll skills

Mohammad Shad Mirza

29.07.2020

React Lesson 15: Checking Homework progress from Lesson 14

Today, we are going to cover homework from Lesson 14 and add comment API to load comments. ...

JavaScript React React Lessons

Mohammad Shad Mirza

23.07.2020

React Lesson 14: Redux Thunk Deep Dive

In this lesson, we will understand the internals of Redux Thunk and the use cases where we should use ...

JavaScript React React Lessons

Mohammad Shad Mirza

6.07.2020

React Lesson 13 Part 2: Asynchronous actions

In the previous article, we used Redux Thunk and learned how to structure actions for asynchronous calls. Now we will update reducer to handle them ...

JavaScript React React Lessons