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:
React Components example
React Component Props example
React State example

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

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

3. Run & Check result

– Point cmd to project folder, then run cmd: yarn install.
node_modules folder and yarn.lock file now appear in our project folder:

react-example-after-yarn-install

– Run cmd: babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch
Now, a new app.js file appear in public/scripts folder, code insides this file was generated automatically (and also update automatically whenever we modify and save src/app.js).

– Open new cmd, point to Project folder, run cmd: live-server public.
Result in Browser:

react-note-app-result

III. Source code

ReactAppStateProps

By grokonez | March 29, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*