React Note Application – React props and state example
react
23
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

451 bài viết.
79 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 6 tháng 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 5 tháng 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 5 tháng trước
1 0
Bài viết liên quan
White
19 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 2 năm trước
19 3
Male avatar
0 0
https://grokonez.com/frontend/react/getparamfromurledititemformreactreduxexample Get Param from Url & create Edit Item Form – reactredux example ...
loveprogramming viết 12 ngày trước
0 0
White
2 0
Do dạo này Webstorm chẳng hiểu sao lag quá (dù máy mạnh) nên sắc phong Visual Studio Code từ IDE phụ lên IDE chính. Các plugin này để đảm bảo trải ...
Cuong Pham viết gần 4 năm trước
2 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
451 bài viết.
79 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á!