Skip to main content

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







    Comments

    Post a Comment

    Popular posts from this blog

    Microservices Design patterns

    What are microservices? Microservices - also known as the microservice architecture - is an architectural style that structures an application as a collection of services that are Highly maintainable and testable Loosely coupled Independently deployable Organized around business capabilities Owned by a small team The microservice architecture enables the rapid, frequent and reliable delivery of large, complex applications. It also enables an organization to evolve its technology stack. You are developing a server-side enterprise application. It must support a variety of different clients including desktop browsers, mobile browsers and native mobile applications. The application might also expose an API for 3rd parties to consume. It might also integrate with other applications via either web services or a message broker. The application handles requests (HTTP requests and messages) by executing business logic; accessing a database; exchanging messages with other systems; and returni...
    Post a Comment
    Read more

    GraphQL

    What is GraphQL  API Standard invented & open-sourced by Facebook Alternative to  REST API  enables declarative data fetching  exposes single endpoint & responds to queries How it works?  Why Graphql? Improvises performance by reducing the data that is to be transferred over the internet Variety of different frontend frameworks and platforms on client-side Fast development speed & expectation for rapid feature development Why Graphql is better than REST? Flexibility & efficient  No more over /under fetching of data Over fetching : Under fetching: Insightful analytics  Schema serves as contract between client and server CORE CONCEPTS : SDL :SCHEMA DEFINITION LANGUAGE Writing Data with mutations 3 kinds of mutations creating new data updating existing data deleting existing data
    Post a Comment
    Read more