React Native | Redux | Note Taking App with Redux - 2020

[Music] welcome to the branding session for UK studios my name is Loretta and I'll be your instructor for this tutorial we will learn how we can make a simple note-taking app by using redux what we can do in this app we can create a new note by clicking at the add a new note right then we can give a title so let's say note one then we have a description and when you click on this check button it will add into our node listing screen right we can add multiple notes here note 2 and we have note 2 description we can as you can see we can add multiple notes as well we can delete this node by clicking at the cell right what we are doing we are building this simple note-taking app using the redux we can add a new note and we can delete a note by using God I want you guys to subscribe to you a studios by clicking at the right bottom right corner of your screen so that you won't miss any new upcoming tutorial from us to do I hope you guys have subscribed to us videos let's begin by creating a new react native project using Expo so go to terminal and type Expo in it here select blank then give it a name we will building note-taking app note let's name it note app with redux so it will take few minutes so I will get back when it gets tall react native project setup successfully now navigate to the node app CD node app then we have to install these dependencies for react navigation so let's install it I will share all these dependencies in the description so you don't have to worry about it in stall it will take few minutes so I will get back when it can stall ok nvm then p.m. stall rec navigation to strangle and we have mbm stall safe react navigation stack react navigation tabs now it gets stalled as well now open the project into Visual Studio code this is f dot JS file is the entry and is the entry point of your project so if now we have to setup react navigation so create a folder with the name of source then we have add notes give it a name you notes you notice not Jes now start implementing the boilerplate code for view notes dot J's import react from react then import stylesheet comma view from react native then import text from react native paper and function view notes here return return view inside another view then we will have text and for text we will write you do not have any notes right then create styles for these constant styles equals style sheet dot create container okay selects one then background color then we have padding vertical to 10 then padding horizontal 10 nice to be 20 right now we have this title container here a line items center then justified content to be Center as well I want everything in center flex goes one it will take complete height of the screen right after that we have this title on and the font size for the title will be 20 right now at the end we will write export default view notes now save this file now move this view nodes into the source file create another folder with the name of screens and then move this view nodes into the screen folder screens then move it inside the screen right now create another folder with the name of navigation navigation and inside this navigation create index dot J's files right now write all the code we need for the react navigation so create a container from react variation then import create stack navigator from react navigation stack right then import Mew notes from screens Oh new notes okay we need to move disk into the screens folder I now I just change these folder setting what I did I created a new folder with the name of source then I create another folder with the name of navigation inside this navigation I have indexed or J's file then inside the source folder we have another folder the name of screens and in screens I will create I will put all the screens so now in the index or JS file import screens view notes right then create constant stat stack Navigator equals create stack Navigator right inside it you notes screen into you notes right then we have initial route name I want you notes then I don't want header so I will provide header mode then right then export default create as I have container and pass Tech Navigator right save this file now go to AB dot J's files and here remove all these code and start implementing react react then import provider as paper provided from react native paper then import app navigator from source navigation right an export default function app can return you've got provider and then app navigator save this file now go to the terminal navigate to critic directory then type expose start to start the server right so it will take few minutes then we will good to go with our project so it will take few minutes now run on iOS simulator okay resolve this error we need to add an X here save this file again then run your project okay okay now we need to add a dependency recognize a Verya context so go to the terminal or you can go to the which is truly a code terminal then I have this copied text for him to install this dependency it will take few minutes okay now save this file again and there on your project as you can see the stack is going above we will look into it later on so we have added the text the text was showing up because we forget to add styles to the view notes class so let's add the styles we have style equals styles dot container right then we have style equals style dot title container then inside this text we have sorry sty equals styles dot writer write save this file again and run you will see you do not have text nodes and inner strata in etcetera now create another screen which will be in use which will be add note screen so inside the screen folder create add node store jeaious and start typing the boiler code boilerplate quotes import react from react then import stylesheet comma view from react native then import text input text from we actually the paper then create function with the name of add nodes then here return of you this is same as the view notes so copy this and paste it here now below export default add nodes right and the text would be simple add nodes model screen save this file now good index dot J's file here input add notes from screens then add nodes then here add notes screen add nodes right now mode model save this file now add floating action button into the add notes class so here add fa be floating action button then add in here trap style equals I will add style later on so I want this button to be small I can would be plus then label would be add new note then on press I want navigation okay so okay I've actually we need to add this FFF floating action button into the view nodes so we need to replace these code into the view notes code right so here F a B right then copy all this paste it here right we need to pass navigation as a prop than navigation dot navigate into the add notes and notes sorry then we need to add style for this fib here add fab then we need position to be absolute so position to be absolute margin took 20 then we have right to be zero then bottom to be 10 right save this file and add I want to give background color now if I want to keep a background color I have this color code it's green color so let's add this see if this file save this add notes files and run this product again you will see a Danny note with the clean text color if I click on add node it will know it will open add notes for the screen now we will create a header component so go to the source folder create another folder with the name of component then here add another file with the name of header dot GS this now I'm starting ployment in the boilerplate code import react from react then import we have view style sheet from react native right then we have AB bar title from cognitive paper then create function the name of header with the title text for this happy will only show the title in the navigation bar so you will only passing it idle text as a prop right if you need more things like next-gen button at the left side and navigation button at the right side you can pass the button as well currently I don't need that so I am only passing new title text then return here AB bar header style was star start let's create style first so constant styles it was style sheet what create add a container here we have background color let's give it this black color then we have container style container flex one flex one with justify content to be in center then align items to be in center as well then we have title here give a title color of white right then at the end export default header so that it will be exported role as a component troit now add these styles to the view component so here it's tiny quills sky start add a container inside this we will have a view which will consist of title so style equals Styles thought container then side the view we will have title sister of style equals Styles not title with the text of the title text little bit of indenting say save this file as well this header into the view nodes and the add notes class so let's add for the end of the Munoz class import header from component header now add inside now add this above this view so header right and the title text would be let's name it simple note taking app save this file similarly we will be using this in add notes so here type in put a header from component header then add here title text this should be add a new note save this file and run again okay now this header should be inside any view so we will add an empty empty tag like this then like this severally into the view notes class now save all these files add nodes and view notes and run again you will see the navigation bar header with the little bit a black color light black color and add an e note with the navigation bar in a black color now in the add node screen we will have a node title with no description so let's implement that into we need to pass a navigation crop here in the add notes constructor so navigation then we will use au state react , use skate here then we will create our two states one is for the title and the other one is for the description so constant here no title comma set node title then we have this you state initial value would be empty then we have constant note description comma sad note coefficient and its initial value with empty as well right then create a function which will save this notes so create a new function with the name of save node functions save note navigation what we will do when when we press the Save button we will navigate back the data into the view notes screen so navigation dot state what param param start add note this is the function that will be well we will create later on the view note screen so just add this we will add add node function into the view notes screen later on title comma note value right then navigation dot go back now here we will have this icon button before that let's design all the styles first we have this container then we have title container we need an icon button which will which will save or the newly created node so create I can return here we will set the background color of this button to be green color right then I want this button to be above the main screen like pebble and the floating action button so we will set its position to be absolute then right zero top to be 40 then margin to 10 right then we have this title font size for this title should be 24 the margin bottom to be 16 then we have text to be 300 with font size to be 16 then we will add this Fabul button position to be absolute 20 right 0 then bottom 0 as well right ok now let's add the view components so first we have I can button which will be above the which will be above the header of the navigation bar so which we'll use to close this model add note screen right so we need to add this icon button which will be rounded and shape so add I can button imported first so Hyken where i can written with icon equals clothes then we have the size let it be 25 then we have color white then on press of this button we want to navigate it back so navigate navigation dot go back then the style for this button to beast size dot icon button right save this file then we have text input which will be for the title text of the note so view side this view we will add text input label equals add note title here then value would be title outline a flirt online button with within this text input so just equals set node title and then we have to set the style so size dot title right now we have to add X input for the description so let's add that text input add note description then we have the value note prescription then on change text we have sad note description then mode it was flat all right I want this to be multi-line so facet multi-line true then style with style start text then we have scrawled enables since it will be multi-line text new so I want it with the scroll so scroll enabled it was true then we have return key of the keyboard to be done then we have blur on submit equals true white then at the last we will have this floating action button which will allow us to save this notes so write this as well now fab style equals size start fab then we have I want this button to be small in size I can equals to check I want this button to be disabled when have title is empty and the title is empty so note title is because too we are adding the ternary operator here so true if it's empty then true disable true else false right then on press button okay on press prop will perform on safe unsafe note now save all these file and remove this view if this file remove these empty spaces save this file now if we save this file and run the project you will see the updated add note screen so click on add a note new note you can see here we have this icon we have this button if it's empty if it gets enabled when it's we added the text if we remove this add note title here it will disabled again right now go to the MU note screen here we will add use state from react then we will add this navigation prop here then we what we need to we need to create a you state variable for NATO notes so we will show this these notes array into the our flat list so constant notes comma notes was initially these notes would be the empty screen so initializing notes with an empty array then let's create a add note function so here we will create a helper method with the name of add notes so constraint add note notes length plus one you are just creating a random ID then set notes whatever in the notes of notes then add note object and you note object what it will do it will get all the notes in the area then in there in the notes state then add another of new object of the note into this notes state right save this file now we need to add a flat list into the view note screen so imported from the react native so import flat list then also import this list from the react native paper all right now start implementing for thee for this flat list error here in this render function so what we will do we have this style container we have this view container add notes dot length equals equals zero then we will return this view right F then we will return a flattest right now create flat list here we have data so that I would be notes then we have this render item inside this random item we need to pass itemprop then let's create the view for the item so we have list dot item inside this list item we will have title item dot note title then we have this description item dot note description then we have description number of lines it's one then we have title style size dot list title we will add this style later on then we have key extractor equals item Equus item dot ID dot two string I'll save this file now here in the unpress method of the floating action button we will pass a data which will be added note what we are doing we are passing the add note function as the prop right now okay what we are getting close then this hand note comma open the braces okay I mean now let's create the style for the list title so here let's title equals font size to be 20 save this file and run the project okay we are getting the error here so this title title what's it saying save this file and run the project again add note note one then note the description press return click on text okay note value okay we might add here a wrong variable this would be unknown description right save this file and run the project again note one then note description description press return ok now to fix this issue go to the add node screen here and in the on the safe node function we have this function called add node from the you know screen we have view notes here so we need to add s in the add nodes so let's add as here then save this file one more thing we mistakenly add small letter I you need to add orbital I here because it's an item which we import here from here right let's start item so it should be in capital I now save this file and run it again add a note give a note 1 then note description as you will see note 1 with title note 1 right so though no description was not going coming up it was because we have item not no description because we added a note description here not the no description so just remove this s from here now save this file and run you will see the no description note one description press return then press this checkmark you will see note 1 with the note 1 description we will add another note go to description as you can see note 1 note2 added here right now we will implement red X into our note-taking app what does Residex it is basically manages the state of the app now first add the Redux library into our project so window terminal - new terminal then type NPM install Redux react - Redux now Lord Ashe dot remove let it get installing and I will come back now start implementing Redux into our projects so create a new folder inside the source directory so here create a folder with the name of producer and side this reducer folder we will create a new file with the name of nodes app dot yes here start typing import remove from floor - remove then port constant equals to add underscore node add node then export constant delete underscore node delete underscore note let note ID zero and export function add note passed a note here return type what is the action type section type is add note then we will pass our data first we will pass the ID of the node which will be node ID plus plus so we are just incrementing note ID by one so node ID and then pass no taps complete note object right then we have export function delete note here we will pass ID then we have written action type would be delete node then we have payload which will be the ID right these are the actions now we have to implement the reducers right so start implementing that as reducers so constant initial state function notes user here we will have straight equals initial state than the action now switch statement action dot type case if it's ad note then return state all the previous state then add then add ID interaction dot ID node action dot note right let's handle the case for the delete node so here case delete node here we have constant delete new array as equals to remove state comma object or this the good doing is removing the delete it is removing the node from the air and returning a complete memory without that specific node okay so return object dot ID action dot pollute right it is checked checking if the object ID is not equals to action dot payload that is society then that we want to remove so other than that other other than that you are written all the array all the nodes are a right return delete new array then default:return state and then we have export default what's name notes - deucer supportive all notes reducer now we have to add new file with the name of stores create a new file and here name it storages then we will have create store from products then we have import both notes reducer denotes app then constant store create store notes reducer then export default store now save all the screens save all the files so I'm saving now go to the app dot J's file err import provider from as toad provider from the react products then import store from stall right then wrap all these paper foil with the store cord in your past or equal store go to the Class V nodes hair import use selector and use this patch from react products then import add note what what is it it's add notes or the pockets add notes so import note and delete note from source then we have producer Notes app right save this file now what we will do in the view notes we will this coming out the state and here make constant with the name of notes then use selector state equals state then we have constant dispatch equals use this patch then we have constant dispatch because use dispatch right then coming out this add notes here implement constraint dot add notes equals north console dot log then dispatch a note and then past it's not the notes but right then we have delete it's a constant delete node equals ID into dispatch delete node then pass the ID now shifts file again the delete node will be used at the list item on press prop so on press equals delete node item dot ID we have this delete node and we have passed item dot ID so now it's add note and then go to our add notes floating action button here pass the sad note save this file now what we need to do let's rename it into small n same as with the delete note ok save this file now into the view notes we have this end small then the read node and small as well now just rename we have reducer Notes app ok here dispatch with this one then they did note this one right now save this file okay now we will have item dot note then item dot note right save this file again and if we run the project as you can see we have implemented Redux now we can create a new note and delete a node with the redux if I click on this cell it will the note will be removed right by using redux [Music]

Channel: UA Studios

Views: 6,472

Rating: 4.6666665 out of 5

Keywords: reactnative, react, react.js, react native tutorial, react native, javascript, reactjs, masterclass, react native redux tutorial in hindi, react native redux, react native rest api, redux, Redux, redux vs context, react context vs redux, react context, react redux, react-redux, todo app in react js, todo app in react native, react redux tutorial in hindi, react redux contex, Easiest Redux Tutorial, Simple Redux Tutorial, WTF is Redux, Expo, expo

Id: uYJcZZSPN0s

Length: 71min 57sec (4317 seconds)

Published: Fri Feb 21 2020