Friday, March 30, 2018

REACT



















class RobotBox extends React.Component {
  render() {
    return
Hello From React
;
  }
}

 let target = document.getElementById('robot-app');

 ReactDOM.render( ,target );

 ------------------------------------------------------------

 class RobotBox extends React.Component {
  render() {
    return (
     
       

McCircuit is my name

       
I am here to help.
     
    );
  }

}
------------------------------------------------------------

class RobotTime extends React.Component {
  render() {
  const pi = Math.PI;
    return (
     
is-tasty-pie
"  >
        The value of PI is approximately {pi}
     
    );
  }
}
------------------------------------------------------------
class RobotItems extends React.Component {
  render() {
    const topics = ["React", "JSX", "JavaScript", "Programming"];
    return (
     
       

Topics I am interested in

    {topics.map(item=><li>{item}
)};
       
     
    );
  }
}

------------------------------------------------------------






------------------------------------------------------------------------------------------------------------------------
class Comment extends React.Component {
  render() {
    return(
          {this.props.author}
           {this.props.body}
          Delete comment
    );
  }
}

class CommentBox extends React.Component {
  render() {
    return(
Comments
2 comments
    );
  }
}
------------------------------------------------------------------------------------------------------------------------
Passing Dynamic arguments 

















class CommentBox extends React.Component {
  render() {
    const comments = this._getComments() || [];
    return(
     

       

Comments


       

{

comments.length} comments
       

          {comments}
       
     
    );
  }
  
//we added a method in the class & it is called up there & value is extracted from  const variable 
  _getComments() {
    const commentList = [
      { id: 1, author: 'Clu', body: 'Just say no to love!',avatarUrl:'images/default-avatar.png' },
      { id: 2, author: 'Anne Droid', body: 'I wanna know what love is...',avatarUrl:'images/default-avatar.png' }
    ];    

     return commentList.map((comment)=>{
      return (
              />);      
      
    });
  }
}

 class Comment extends React.Component {
  render() {
    return(
     

       
{
this.props.author}
       

          {this.props.body}
       
       

          Delete comment
       
     
    );
  }

}

------------------------------------------------------------------------------------------------------------------------

class CommentBox extends React.Component {
  render() {
    const comments = this._getComments() || [];
    return(
     

       

Comments


        {this._getPopularMessage(comments.length)}
       

{this._getCommentsTitle(comments.length)}


       

          {comments}
       
     
    );
  }
  
  _getPopularMessage(commentCount) {
    const POPULAR_COUNT = 10;
    if(commentCount >POPULAR_COUNT){
         return(

            This post is getting really popular, don't miss out!
           
);    }    
  }

   _getComments() {

     const commentList = [
      { id: 1, author: 'Clu', body: 'Just say no to love!', avatarUrl: 'images/default-avatar.png' },
      { id: 2, author: 'Anne Droid', body: 'I wanna know what love is...', avatarUrl: 'images/default-avatar.png' }
    ];

     return commentList.map((comment) => {
      return (
               author={comment.author}
               body={comment.body}
               avatarUrl={comment.avatarUrl}
               key={comment.id} />);
    });
  }
  
  _getCommentsTitle(commentCount) {
    if (commentCount === 0) {
      return 'No comments yet';
    } else if (commentCount === 1) {
      return '1 comment';
    } else {
      return `${commentCount} comments`;
    }
  }
}

 class Comment extends React.Component {
  render() {
    return(
     

        {`${this.props.author}
       
{this.props.author}

       

          {this.props.body}
       
       

          Delete comment
       
     
    );
  }

}
------------------------------------------------------------------------------------------------------------------------
HANDLING STATE OF COMPONENTS

In React, this is how we modify the DOM:

When writing a component in React that contains data that changes over time, it is considered a best practice to store this data in the component’s state.
Check the option that shows how to properly access a component's state:
this.state













------------------------------------------------------------------------------------------------------------------------
class CommentBox extends React.Component {
  render() {
    const comments = this._getComments() || [];
    return(
     

       

Comments


        {this._getPopularMessage(comments.length)}
       

{this._getCommentsTitle(comments.length)}


       

          {comments}
       
     
    );
  }

   _getPopularMessage(commentCount) {
    const POPULAR_COUNT = 10;
    if (commentCount > POPULAR_COUNT) {
       return (
         
This post is getting really popular, don't miss out!

       );
    }
  }
  
  _getComments() {
    const commentList = [
      { id: 1, author: 'Clu', body: 'Just say no to love!', avatarUrl: 'images/default-avatar.png' },
      { id: 2, author: 'Anne Droid', body: 'I wanna know what love is...', avatarUrl: 'images/default-avatar.png' }
    ];

     return commentList.map((comment) => {
      return (
               author={comment.author}
               body={comment.body}
               avatarUrl={comment.avatarUrl}
               key={comment.id} />);
    });
  }

   _getCommentsTitle(commentCount) {
    if (commentCount === 0) {
      return 'No comments yet';
    } else if (commentCount === 1) {
      return '1 comment';
    } else {
      return `${commentCount} comments`;
    }
  }
}

 class Comment extends React.Component {
  constructor(){
    super();
     this.state= {
        isAbusive: false
     }  
    this.setState({isAbusive:false});
    
  }
  
  
  render() {
    return(
     

        {`${this.props.author}
       
{this.props.author}

       

          {this.props.body}
       
       

          Delete comment
          Report as Abuse
       
     
    );
  }

}


------------------------------------------------------------------------------------------------------------------------



------------------------------------------------------------------------------------------------------------------------

class CommentBox extends React.Component {
  render() {
    const comments = this._getComments() || [];
    return(
      <div className="comment-box">
        <h3>Comments</h3>
        {this._getPopularMessage(comments.length)}
        <h4 className="comment-count">{this._getCommentsTitle(comments.length)}</h4>
        <div className="comment-list">
          {comments}
        </div>
      </div>
    );
  }

  _getPopularMessage(commentCount) {
    const POPULAR_COUNT = 10;
    if (commentCount > POPULAR_COUNT) {
       return (
         <div>This post is getting really popular, don't miss out!</div>
       );
    }
  }
  
  _getComments() {
    const commentList = [
      { id: 1, author: 'Clu', body: 'Just say no to love!', avatarUrl: 'images/default-avatar.png' },
      { id: 2, author: 'Anne Droid', body: 'I wanna know what love is...', avatarUrl: 'images/default-avatar.png' }
    ];

    return commentList.map((comment) => {
      return (<Comment
               author={comment.author}
               body={comment.body}
               avatarUrl={comment.avatarUrl}
               key={comment.id} />);
    });
  }

  _getCommentsTitle(commentCount) {
    if (commentCount === 0) {
      return 'No comments yet';
    } else if (commentCount === 1) {
      return '1 comment';
    } else {
      return `${commentCount} comments`;
    }
  }
}

class Comment extends React.Component {
  constructor() {
    super();
    this.state = {
      isAbusive: false
    };
  }

  render() {
    let commentBody;

    if (!this.state.isAbusive) {
      commentBody = this.props.body;
    } else {
      commentBody = <em>Content marked as abusive</em>;
    }

    return(
      <div className="comment">
        
        <img src={this.props.avatarUrl} alt={`${this.props.author}'s picture`} />

        <p className="comment-header">{this.props.author}</p>
        <p className="comment-body">`
          {commentBody}
        </p>
        <div className="comment-actions">
          <a href="#">Delete comment</a>
          <a href="#">Report as Abuse</a>
        </div>
      </div>
    );
  }
}

------------------------------------------------------------------------------------------------------------------------
class CommentBox extends React.Component {

   render() {
    const comments = this._getComments() || [];
    return(
     

       

Comments


        {this._getPopularMessage(comments.length)}
       

{this._getCommentsTitle(comments.length)}


       

          {comments}
       
     
    );
  }

   _getPopularMessage(commentCount) {
    const POPULAR_COUNT = 10;
    if (commentCount > POPULAR_COUNT) {
       return (
         
This post is getting really popular, don't miss out!

       );
    }
  }
  
  _getComments() {
    const commentList = [
      { id: 1, author: 'Clu', body: 'Just say no to love!', avatarUrl: 'images/default-avatar.png' },
      { id: 2, author: 'Anne Droid', body: 'I wanna know what love is...', avatarUrl: 'images/default-avatar.png' }
    ];

     return commentList.map((comment) => {
      return (
               author={comment.author}
               body={comment.body}
               avatarUrl={comment.avatarUrl}
               key={comment.id} />);
    });
  }

   _getCommentsTitle(commentCount) {
    if (commentCount === 0) {
      return 'No comments yet';
    } else if (commentCount === 1) {
      return '1 comment';
    } else {
      return `${commentCount} comments`;
    }
  }
}

 class Comment extends React.Component {
  constructor() {
    super();
    this.state = {
      isAbusive: false
    };
  }

   render() {
    let commentBody;
    if (!this.state.isAbusive) {
      commentBody = this.props.body;
    } else {
      commentBody = Content marked as abusive;
    }
    return(
     

        {`${this.props.author}
       
{this.props.author}

       

          {commentBody}
       
       

          Delete comment
          Report as Abuse
       
     
    );
  }
  _toggleAbuse(event){
    event.preventDefault();
     this.setState({
      isAbusive: !this.state.isAbusive
    })
       this._toggleAbuse.bind(this);
  }

   

}



------------------------------------------------------------




class Comment extends React.Component {
  

constructor() {
    super();
    this.state = {
      isAbusive: false
    };
  }

  render() {
    let commentBody;
    if (!this.state.isAbusive) {
      commentBody = this.props.body;
    } else {
      commentBody = Content marked as abusive;
    }


    return(
     
        {`${this.props.author}
       
{this.props.author}
       
          {commentBody}
       
       
          Delete comment
          this._toggleAbuse.bind(this)}>Report as Abuse
       
     
    );
  }

  _toggleAbuse(event) {
    event.preventDefault();

    this.setState({
      isAbusive: !this.state.isAbusive
    });
  }
}

class CommentBox extends React.Component {

  constructor() {
    super();

    this.state = {
      showComments: false,
      comments: [
        { id: 1, author: 'Morgan McCircuit', body: 'Great picture!', avatarUrl: 'images/default-avatar.png' },
        { id: 2, author: 'Bending Bender', body: 'Excellent stuff', avatarUrl: 'images/default-avatar.png' }
      ]
    };
  }

  render() {
    const comments = this._getComments();
    return(
     
        <CommentForm addComment={this._addComment.bind(this)} />
       

Comments

        {this._getPopularMessage(comments.length)}
       

{this._getCommentsTitle(comments.length)}
       
          {comments}
       
     
    );
  }

  _getPopularMessage(commentCount) {
    const POPULAR_COUNT = 10;
    if (commentCount > POPULAR_COUNT) {
       return (
         
This post is getting really popular, don't miss out!
       );
    }
  }

  _getComments() {
    return this.state.comments.map((comment) => {
      return (
               author={comment.author}
               body={comment.body}
               avatarUrl={comment.avatarUrl}
               key={comment.id} />);
    });
  }

  _getCommentsTitle(commentCount) {
    if (commentCount === 0) {
      return 'No comments yet';
    } else if (commentCount === 1) {
      return '1 comment';
    } else {
      return `${commentCount} comments`;
    }
  }

  _addComment(commentAuthor, commentBody) {
    let comment = {
      id: Math.floor(Math.random() * (9999 - this.state.comments.length + 1)) + this.state.comments.length,
      author: commentAuthor,
      body: commentBody
    };

    this.setState({
      comments: this.state.comments.concat([comment])
    });
  }
}

class CommentForm extends React.Component {
  constructor() {
    super();
    this.state = {
      characters: 0
    };
  }

  render() {
    return (
     
       
       
          this._author = input} />
         
       
        {this.state.characters} characters
       
         
            Post comment
         
       
     
    );
  }

  _handleSubmit(event) {
    event.preventDefault();

    this.props.addComment(this._author.value, this._body.value);

    this._author.value = '';
    this._body.value = '';

    this.setState({ characters: 0 });
  }
  _getCharacterCount(){
    this.setState({characters: this._body.value.length}); 
}
}
-------------------------------------------------------------------

 Using Lifecycle Methods to Load Comments


React life cycle methods:



  1. constructor()
  2. componentWillMount()
  3. render()
  4. componentDidMount()
  5. componentWillUNmount()







------------------------------------------------------------------------------------------------------------------------
class CommentBox extends React.Component {

  constructor() {
    super();

    this.state = {
      showComments: false,
      comments: []
    };
  }
  
  componentWillMount() {
    this._fetchComments();
  }

  render() {
    const comments = this._getComments();
    return(
      <div className="comment-box">
        <CommentForm addComment={this._addComment.bind(this)} />
        <CommentAvatarList avatars={this._getAvatars()} />
        {this._getPopularMessage(comments.length)}
        <h3 className="comment-count">{this._getCommentsTitle(comments.length)}</h3>
        <div className="comment-list">
          {comments}
        </div>
      </div>
    );
  }
  
  _getAvatars() {
    return this.state.comments.map(comment => comment.avatarUrl);
  }

  _getPopularMessage(commentCount) {
    const POPULAR_COUNT = 10;
    if (commentCount > POPULAR_COUNT) {
       return (
         <div>This post is getting really popular, don't miss out!</div>
       );
    }
  }
  
  _getComments() {
    return this.state.comments.map((comment) => {
      return (<Comment
               id={comment.id}
               author={comment.author}
               body={comment.body}
               avatarUrl={comment.avatarUrl}
               key={comment.id} />);
    });
  }

  _getCommentsTitle(commentCount) {
    if (commentCount === 0) {
      return 'No comments yet';
    } else if (commentCount === 1) {
      return '1 comment';
    } else {
      return `${commentCount} comments`;
    }
  }
  
  _addComment(commentAuthor, commentBody) {
    let comment = {
      id: Math.floor(Math.random() * (9999 - this.state.comments.length + 1)) + this.state.comments.length,
      author: commentAuthor,
      body: commentBody,
      avatarUrl: 'images/default-avatar.png'
    };
    
    this.setState({
      comments: this.state.comments.concat([comment])
    });
  }
  
  _fetchComments() {
    $.ajax({
      method: 'GET',
      url: 'comments.json',
      success: (comments) => {
        this.setState({ comments });
      }
    });
  }
        
  _deleteComment(commentID) {
    const comments = this.state.comments.filter(
      comment => comment.id !== commentID
    );

    this.setState({ comments });
  }
}

class Comment extends React.Component {
  constructor() {
    super();
    this.state = {
      isAbusive: false
    };
  }

  render() {
    let commentBody;

    if (!this.state.isAbusive) {
      commentBody = this.props.body;
    } else {
      commentBody = <em>Content marked as abusive</em>;
    }

    return(
      <div className="comment">
        <img src={this.props.avatarUrl} alt={`${this.props.author}'s picture`} />
        <p className="comment-header">{this.props.author}</p>
        <p className="comment-body">
          {commentBody}
        </p>
        <div className="comment-actions">
          <a href="#">Delete comment</a>
          <a href="#" onClick={this._toggleAbuse.bind(this)}>Report as Abuse</a>
        </div>
      </div>
    );
  }

  _toggleAbuse(event) {
    event.preventDefault();

    this.setState({
      isAbusive: !this.state.isAbusive
    });
  }

  _handleDelete(event) {
    event.preventDefault();

    if (confirm('Are you sure?')) {
      this.props.onDelete(this.props.id);
    }
  }
}

class CommentForm extends React.Component {
  constructor() {
    super();
    this.state = {
      characters: 0
    };
  }
  
  render() {
    return (
      <form className="comment-form" onSubmit={this._handleSubmit.bind(this)}>
        <label>New comment</label>
        <div className="comment-form-fields">
          <input placeholder="Name:" ref={c => this._author = c} />
          <textarea placeholder="Comment:" ref={c => this._body = c} onChange={this._getCharacterCount.bind(this)}></textarea>
        </div>
        <p>{this.state.characters} characters</p>
        <div className="comment-form-actions">
          <button type="submit">
            Post comment
          </button>
        </div>
      </form>
    );
  }
  
  _getCharacterCount(e) {
    this.setState({
      characters: this._body.value.length
    });
  }
  
  _handleSubmit(event) {
    event.preventDefault();
            
    if (!this._author.value || !this._body.value) {
      alert('Please enter your name and comment.');
      return;
    }

    this.props.addComment(this._author.value, this._body.value);
    
    this._author.value = '';
    this._body.value = '';
    
    this.setState({ characters: 0  });
  }
}

class CommentAvatarList extends React.Component {
  render() {
    const { avatars = [] } = this.props;
    return (
      <div className="comment-avatars">
        <h4>Authors</h4>
        <ul>
          {avatars.map((avatarUrl, i) => (
            <li key={i}>
              <img src={avatarUrl} />
            </li>
          ))}
        </ul>
      </div>
    );
  }
}



------------------------------------------------------------------------------------------------------------------------

5.6 Adding and Deleting Comments on the Server Side


--------------------------------------------------------------------------------------------------------------------------
class CommentBox extends React.Component {
  constructor() {
    super();

    this.state = {
      showComments: false,
      comments: []
    };
  }
  
  componentWillMount() {
    this._fetchComments();
  }

  render() {
    const comments = this._getComments();
    return(
     
       
       
        {this._getPopularMessage(comments.length)}
       

{this._getCommentsTitle(comments.length)}

       
          {comments}
       
     
    );
  }
  
  _getAvatars() {
    return this.state.comments.map(comment => comment.avatarUrl);
  }

  _getPopularMessage(commentCount) {
    const POPULAR_COUNT = 10;
    if (commentCount > POPULAR_COUNT) {
       return (
         
This post is getting really popular, don't miss out!
       );
    }
  }
  
  _getComments() {
    return this.state.comments.map((comment) => {
      return (
               id={comment.id}
               author={comment.author}
               body={comment.body}
               avatarUrl={comment.avatarUrl}
               onDelete={this._deleteComment.bind(this)}
               key={comment.id} />);
    });
  }

  _getCommentsTitle(commentCount) {
    if (commentCount === 0) {
      return 'No comments yet';
    } else if (commentCount === 1) {
      return '1 comment';
    } else {
      return `${commentCount} comments`;
    }
  }
  
  _addComment(commentAuthor, commentBody) {
    let comment = {
      id: Math.floor(Math.random() * (9999 - this.state.comments.length + 1)) + this.state.comments.length,
      author: commentAuthor,
      body: commentBody,
      avatarUrl: 'images/default-avatar.png'
    };
    
    this.setState({
      comments: this.state.comments.concat([comment])
    });
  }
  
  _fetchComments() {
    $.ajax({
      method: 'GET',
      url: 'comments.json',
      success: (comments) => {
        this.setState({ comments });
      }
    });
  }
  
  _deleteComment(commentID) {
    const comments = this.state.comments.filter(
      comment => comment.id !== commentID
    );
    
    this.setState({ comments });
  }
}

class CommentForm extends React.Component {
  constructor() {
    super();
    this.state = {
      characters: 0
    };
  }
  
  render() {
    return (
     
       
       
          this._author = c} />
         
       
        {this.state.characters} characters
       
         
            Post comment
         
       
     
    );
  }
  
  _getCharacterCount(e) {
    this.setState({
      characters: this._body.value.length
    });
  }
  
  _handleSubmit(event) {
    event.preventDefault();
            
    if (!this._author.value || !this._body.value) {
      alert('Please enter your name and comment.');
      return;
    }

    this.props.addComment(this._author.value, this._body.value);
    
    this._author.value = '';
    this._body.value = '';
    
    this.setState({ characters: 0  });
  }
}

class CommentAvatarList extends React.Component {
  render() {
    const { avatars = [] } = this.props;
    return (
     
       

Authors

       
              {avatars.map((avatarUrl, i) => (
               
  •              
               
              ))}
           
         
        );
      }
    }

    class Comment extends React.Component {
      constructor() {
        super();

        this.state = {
          isAbusive: false
        };
      }

      render() {
        let commentBody;
        if (!this.state.isAbusive) {
          commentBody = this.props.body;
        } else {
          commentBody = Content marked as abusive;
        }
        return(
         
            {`${this.props.author}
           
    {this.props.author}
           
    {commentBody}
           
             
              Report as Abuse
           
         
        );
      }

      _toggleAbuse(event) {
        event.preventDefault();

        this.setState({
          isAbusive: !this.state.isAbusive
        });
      }
      
      _handleDelete() {
        this.props.onDelete(this.props.id);
      }
    }

    class RemoveCommentConfirmation extends React.Component {
      constructor() {
        super();
        
        this.state = {
          showConfirm:false
          
          
        };
      }
      
      render() {
        let confirmNode;
        if (this.state.showConfirm) {
          return (
           
              Yes - or - No
           
          );
        } else {
          confirmNode = Delete comment?;
        }
        return (
          {confirmNode}
        );
      }
      
      _toggleConfirmMessage(e) {
        e.preventDefault();
        
        this.setState({
          showConfirm: !this.state.showConfirm
        });
      }
      
      _confirmDelete(e) {
        e.preventDefault();
        if(confirm("Are you sure")){
          this.props.onDelete(this.props.comment);
        }
        
        
      }


    https://www.codeschool.com/account/courses/powering-up-with-react







    at

    No comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)