React Note Application – React props and state example
react
38
Male avatar

loveprogramming viết ngày 02/05/2021

https://grokonez.com/frontend/react/react-note-application-react-example-with-react-props-state-example

React Note Application – React props and state example

In this tutorial, we're gonna create a simple React Note Application that uses both React props and state.

Related Posts:

You can try this application with React Stateless Functional Components example.

I. Project Overview

1. Goal

We will build a React Note Application that can add, remove Note using React props and state, UI will be updated immediately:

react-note-app-goal

2. How it works

react-note-app-overview

NoteApp component:

  • jsaNotes[] array as state
  • appRemoveAll, appAddNote, appDeleteNote as props

Notes component:

  • receive jsaNotes[] as notes props, then pass each note to Note component
  • receive appDeleteNote as deleteNote props, then pass it to Note component

Note component:

  • receive note props, display it
  • receive deleteNote, then use it in deleteData event method

Action component:

  • receive appRemoveAll as removeAll props, and call it directly
  • receive appAddNote as addNote props, then use it in addData event method

    3. Code overview

    class NoteApp extends React.Component {
    constructor(props) {
    this.state = {
        jsaNotes: []
    }
    

    }

    appRemoveAll() {...}
    appAddNote(note) {...}
    appDeleteNote(note) {...}

    render() {
    return (
    <div>
    <Notes
    notes={this.state.jsaNotes}
    deleteNote={this.appDeleteNote} />
    <Action
    removeAll={this.appRemoveAll}
    addNote={this.appAddNote} />
    </div>
    );
    }
    }

class Notes extends React.Component {
render() {
return (
<div>
JSA Notes:
<ol>
{this.props.notes.map(note =>
<li key={note}>
<Note
note={note}
deleteNote={this.props.deleteNote} />
</li>
)}
</ol>
</div>
);
}
}

class Note extends React.Component {
deleteData() {
this.props.deleteNote(this.props.note);
}

render() {
    return (
        &lt;div&gt;
            {this.props.note}
            &lt;button onClick={this.deleteData} style={{ margin: 5 }}&gt;Remove&lt;/button&gt;
        &lt;/div&gt;
    );
}

}

class Action extends React.Component {
addData(e) {
const note = value;
this.props.addNote(note);
}

render() {
    return (
        &lt;div&gt;
            &lt;form onSubmit={this.addData}&gt;
                &lt;input type=&quot;text&quot; name=&quot;data&quot; /&gt;
                &lt;button&gt;Add&lt;/button&gt;
            &lt;/form&gt;

            &lt;button onClick={this.props.removeAll}&gt;Remove All&lt;/button&gt;
        &lt;/div&gt;
    );
}

}

ReactDOM.render(<NoteApp />, document.getElementById('app'));

II. Practice

1. Setup project

For setting up environment and project files, please visit: React Components example - Setup Project.
To run this example, we just need to override app.js file.

2. app.js

More at:

https://grokonez.com/frontend/react/react-note-application-react-example-with-react-props-state-example

React Note Application – React props and state example

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

545 bài viết.
98 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết hơn 1 năm trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết hơn 1 năm trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết hơn 1 năm trước
1 0
Bài viết liên quan
White
20 3
(Link) (Link) &mdash; tracks device battery state. (Link) (Link) &mdash; tracks geo location state of user's device. (Link) (Link) &mdash; tr...
Đinh Viễn viết gần 3 năm trước
20 3
Male avatar
0 0
https://grokonez.com/frontend/react/getparamfromurledititemformreactreduxexample Get Param from Url & create Edit Item Form – reactredux example ...
loveprogramming viết 1 năm trước
0 0
Male avatar
0 0
https://loizenai.com/springbootreactdynamodbcrudexample/ SpringBoot React DynamoDB CRUD Example Tutorial: SpringBoot React DynamoDB Build CRUD Ap...
loveprogramming viết 1 năm trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
98 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!