Crash Introduction to Web Frameworks 2019 | Gleb Redko | Skillshare

Crash Introduction to Web Frameworks 2019

Gleb Redko, Full-stack web developer

Crash Introduction to Web Frameworks 2019

Gleb Redko, Full-stack web developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
19 Lessons (1h 34m)
    • 1. Introduction Crash Course into Web Frameworks 2019

      2:23
    • 2. About me

      1:33
    • 3. Why Frameworks

      9:10
    • 4. Choosing the Right Code Editor

      3:29
    • 5. Laravel Installer

      2:00
    • 6. Laravel Local Server

      2:15
    • 7. Laravel Generating App

      4:07
    • 8. Laravel Configuring app

      6:27
    • 9. Laravel Migrations and Seeder

      9:08
    • 10. Laravel Routing

      2:14
    • 11. Laravel List and Form

      7:35
    • 12. Laravel Adding Controller

      3:24
    • 13. Laravel Validating Input

      2:36
    • 14. Laravel Debugging

      4:30
    • 15. React Todo Setting up

      2:28
    • 16. React Todo Adding a Form

      5:40
    • 17. React Todo Making a List

      15:27
    • 18. React Todo Remove Items

      4:03
    • 19. React Todo Bootstrapping

      5:20
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

156

Students

--

Projects

About This Class

This Udemy course is based on the module I’ve been teaching to my Bachelor's students. The entry requirement for this course isn’t strict, I believe that everyone having basic programming knowledge of any web related programming languages like

  • PHP

  • JavaScript

  • Python

will be able to cope with this material. This course is also for those who had some experience with Content Management Systems like WordPressand Drupal, but would like to try something more flexible.

In the beginning, I’m gonna give you an overview of the topic and then I’ll explain all the necessary basic steps to choose the right code editor and to set up your development environment. Then we go straight to the development of 2 simple web applications using 2 popular and different type frameworks. One of them is a back-end PHP framework

Laravel

and another one is a front-end JavaScript

React

framework. Exploring the features of these 2 popular frameworks will give you a notion of basic nature behind back-end and front-end frameworks

Meet Your Teacher

Teacher Profile Image

Gleb Redko

Full-stack web developer

Teacher

I'm a full-stack web developer and for the last 4 years I’ve been working at Tallinn University (Estonia) as a developer and lecturer.

I got a BSc degree in Computer Science from Robert Gordon University (Aberdeen, UK).

I create web applications from database design to button colours. Working in a small team of developers at Tallinn University, we produce web apps used by students and teachers all across Europe. Apart from that, I teach Web Frameworks course to our students.

I also had work experience at Continental France, where I was in charge of upgrading their intranet web applications.

I'm a member of Google Developer Group (GDG) in Tallinn.

In addition, I'm also keen on graphic design and recently even studied that subject part-time at the ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Introduction Crash Course into Web Frameworks 2019: this course is based on the model I've been teaching to my bachelor students, the entry requirement for discourses and strict. I believe that everyone having basic programming knowledge off any weap related programming climb, which is like beach pure JavaScript or BEYTIN, will be able to cope with this material. This course is also for those who had some experience with content management systems like WordPress and Drew people, but would like to try something more flexible. I distinctive feature or frameworks is that they give us rules, but in general, don't give us restriction. I don't think the feature of content management systems is that they give us a readymade system usually tailored for a bloke or news site. But you have to take into account all the smart features to make self it beyond the defined scope. No other is. The world off Web applications is closely bound up with Weprin works, the trendsetters and be corporate products like Instagram YouTube, drop books are made using frameworks, and this crash course gives you a crush. Introduction into this built at the beginning, I'm going to give you an overview of the topic and then I will explain Holderness or basic steps to choose the right coat editor and to set up your development environment. There we go straight to the development off to simple Web applications using two popular and different type frameworks. One of them is, ah, back and PHP framework letter. Well, and another one is a front end JavaScript react framework. Exploring the features off this two popular of frameworks will give you a notion off a basic nature behind back end on front end frameworks. All right, See you at my course, Teoh. 2. About me: right. Hi there. My name is glad practical. I'm a full stack Web developer at telling university on. For the past four years, I've been working here at telling diversity as a developer and electric. I go to BC Computer Science decree from Robert Gordon University Albertine I create Web applications from database designed to button colors. Working in a small team of developers are telling university we produce Web apps used by students and teachers al across Europe. Apart from that, I teach Web framework scores to our students. I also had work experience at Continental France when I was in charge off upgrading their intranet Web applications. I'm a member off Google developer Group in talent. In addition, I'm also Kenyan graphic design and recently even studied that part time at the Estonian academic off art. I also 3. Why Frameworks: Hello, everyone. This is an introduction to my course and this presentation. I'm going to explain the difference between content management systems on Web frameworks. How to consider what to choose for your project, why they are important. What come on ideas Did they follow? Well, let's cut to the chase. The web is complicated. You've got to know html CSS jealous creeped her back end language, probably. SQL. There are many expected features not provided by the spec. Many APS needs user sign app, password reset authorization. A framework means even the integration of those implementations is trivial. The http spec is huge and full off corner cases. This means not only complexity for you as a developer, but also leads us to the next point. They are a security holes everywhere. Our framework can integrate security features into its operation. In that case, it at least saves you from writing stupid pieces of goat that would make your act vulnerable. Writing can act requires many small decisions. Many, if not most off those decisions are arbitrary. For example, how to name your tables, the specific routes you choose, what file to boot your co teen and cetera If the framework made those decisions for you. Then you get structure and some logic behind the structure that would help you as your application grows up. CMS or framework. Nowadays, CMS content management systems are more popular than the frameworks, as they are really easy to use. Even if you don't have problem and knowledge, you can install and create a whole website with just a CMS. So what to choose? There are four basic things to consider before you go. How much time you want to spend? How flexible has to be this project in the future, how much money you will take and what posting environment will be. Imagine Windows comments prompt or Terminal one back and compare it. Teoh Windows Explorer, with its folders or finder on Mac Common line is like making your application with a Web framework on Explorer and finder are like CMS is what framework gives you a way to use a structural frame and hands to structural eyes. Your development process. In the end of the day, see, masses are often using framework in their base. For example, content management system drooping eighties based on symphony framework, model view, controller, architecture. Yeah, we need to mention the model view controller pattern and why is it important regarding frameworks? Model is basically our database, so it's about processing data from or to the database. It's only connected to the controller view. Displace visualization off the data to the user. It's only connected to the controller on controller that processes cetera, site logic on acts as a middleware between view and model. So it's controlling the float off data. Speaking about client site frameworks like Food Amber. We can also refer to the mortal view view model M V M Patron. They spatula Abstract state and behavior. A few senator site frameworks, Web servers and browsers communicate via the http protocol servers wait for http requests from the browser and then return information in http responses. Weprin works allow you to write simplified syntax that will generate center aside coat to work with these requests and responses. This means that you will have a neither job interacting with easier, higher level coat rather than lower level networking Primitives. Most sites will provide a number off different resources accessible through distinct you. RL's Web frameworks provide simple mechanisms to map Ural patrons to specific Candler functions. Data can be encoded in an http request in a number of ways. An http get requests to get files or data from the server may encode what data is required in your URL parameters. An http post request will instead include the update information as post data was in the border of the request. Rep. Frameworks provide programming language appropriate mechanisms to access this information. Vet frameworks often provide a data base layer that abstracts, database, read, write queer and delete operations. These abstraction layer is referred as an object relational mapper O R m. It means to benefits. You can replace the underlying database without necessarily needing to change the coat on basic data. Validation off data Campli implemented within the framework rendering template ing allow you to specify the structure. Often output document using placeholders for data that will be at it when H is generated. Example of several side frameworks our lateral symphony, cake beach be John go code igniter and others and their scores. We're gonna explore letter Glenn saved frameworks, clients A framework deals with front end. We're gonna talk about Gemma's creeping jealous creeps related languages like sickness creep the concept off blindside frameworks is closely related to the concept off single page applications. We're gonna create one a single page application on the example off react regarding the client side frameworks. The motive. You controller that we've just talked about Isn't that when you are so we may see modifications off that pattern, and there are discussions whether it's worth using that name. NBC Introspective JavaScript frameworks The concept off rest ful a. B I is another term related to the topic. This is an application program interface A B I that uses http requests to get put post and delete data. That's the way to connect user interface managed by a client side framework to application back in three sources. Let's talk about websites in historical perspective. Legacy html With maps the key feature was or key restriction was the fact that to see an update user needs to fully reload the page. After that, we had and still have we jet Web APS and this type the webpage Construction Logic. He's replaced by Web services, and each page on the client has separate entities called widgets. By sending magics Grady's to the Web services, witches can receive chunks of dating HTML or Jason and any other form and display them without reloading the entire page. And nowadays we have a single page Web applications single page where publication ARC Picture. This is the most modern application architecture, where you download a single page on new ones on the client site. This page has a just re player that can freely communicate with Web services on the syrah site, using the data from Web services making real time updates to itself. Example of client side frameworks, angular angler material. Well, this is angler using material design. I like it. Vou react. We're going to explore that in this course. Meet your this is full stack A small exception in this list, but still Amber Express and Azar's Here is the list off sources off used for that presentation. Thank you for watching and see you in the workshops. 4. Choosing the Right Code Editor: in this video, I'm gonna tell you how to configure your development environment. What code editor to use and how to install level. So let's start was a code anti truth. I recommend using a good and smart coat editor like the one from intelligent, amusing BHP Storm. I'm happy with that. And these tutorials I'm using PHP Storm all the time. It's ah, product by jetbrains. So I'm using this thing. You can also use that think Web Storm. The one thing about Jetbrains Brothers is that their bait. But if you're a student and we have ah, University email, then you would probably have a free access to their products. They have their own educational program, so it's free for students, teachers and institutions. And that's our 80 terror. That you might find interesting is visual studio code by Microsoft, and it is free. Both jetbrains products and visual studio code are available for Mac or Windows computers. I'm using Mark. The point off using a good code editor is the thing that you might make use off external plug ins that you can install on top of your editor and basic code validation that they offer will help your rights and your coat. And while speaking about frameworks when you have plenty off different files, the smart features off coat editors would help you. Avoiding mistakes on would also simplify the code writing. So forget about no less bless and other things. If you like, you may use other, more lightweight A jitters like atom or sublime but visual studio code and Jetbrains Beach Be Storm or Web storm arm. I talked to this coat. Editors would help you organize your workspace, and that's especially important when you start learning frameworks. 5. Laravel Installer: right. So let's start with lateral installation. Firstly, we need Teoh get composer composer is ah dependence Miniature for Beach Be that we're going to use Lateral is using that. So firstly, we need Teoh install our composer just basically following this four easy steps. So firstly, I opened my terminal and cope based this comment and this to verify the installer and this is about so now we have our composer installed globally. Do you find time Composer? It's here. Next Let's in Seoul Larible Composer Global require a lot of oil installer So now a lot of reasons told globally So we have our composer installed and lateral installer also installed. 6. Laravel Local Server: right next time Canadian stole Mom. That's Ah, local development server. It's also available for when those computers I'm using maps, so I'm gonna installed these. Mom Pro is a paid version off Mom, but we're fine was a usual lump. This one. It's gonna download Wolf Lamp and Mom Pro so it will install both versions of mumps. But we're going to use on the lamp because the Man pro is that Emma was a trial period, just the usual installation. So I'm going to skip that. There's nothing specific about that. After installing Bump, we have a local sever, but about you, my scale. And if we start the servers, it's going to show the welcome screen off the local host. The Root folder is located for market. This applications mumps HD dogs for Windows. It's a bit different. It's located and you're see Trife slashed vamp slash HD dogs. So it's the same folder. All our projects are gonna be in this folder HD dogs, and that's the way we're gonna access the index page of our projects. So next we have a lot of Ellen stolen. We have mumps. Our server is running. Let's install thought about using collateral installer 7. Laravel Generating App: I'm gonna go to the HD dogs using terminal for Windows users you have to use common line from, So I'm gonna navigate the H Dogs folder. So it's in this location for Windows users is gonna be see Mom HD dogs. That's the place where we're gonna generate our first application that we're gonna use letter of January. True, a lot of ah, you bookmarks of look, bookmarks block is the name off our project Lateral is generating the project for us. So the project has been generated and we can open the landing page off lateral. So let's do that. The dresses Local host 8888 slash bookmarks block. We're going to see the index off this directory. So we need to configure ma'am to be able to open index file off our project located in the public directory here. So for this, we need to go to our map directory and then Teoh Apache. And there is a file called http dot So if you open that in some blame text editor, for example, or any other text editors you might have, I'm using some bling. For example, it's lightweight and easy for editing. Single files. So we are using Alice to tell mom that every time we call local host port numbers slash bookmarks block. In fact, we're calling public directory off this application off ladder. Well, and there's an index file in public director, not in the application root directory. So for this purpose, I'm using this template. So Alice bookmarks Blawg is in fact corner called my route Applications. Ma'am, that's the full address off the month installation. So for Windows is gonna be in C slash mom slash HD dogs slash bookmarks, bloke slash public. And these are the configurations at Apache. Needs Teoh be able to redirect us every time to the public folder. So these are their options. We need to add to make all the components like CSS and JavaScript work correctly. So I'm going to save this, and we need Teoh restart lamp to make it work. So once again, I'm gonna do refresh. And now we see the welcome page off a lot of Well, so that's it. We have our lateral running in the next video. We're gonna look at the project structure generated by a literal in Stoller, and we're going to start writing our own application 8. Laravel Configuring app: right. Let's do something useful in ladder about last time we installed letter. Well, and now I'm gonna show you the project structure. Firstly, I'm using B B Storm create new project source files are in local directory HD docks. That's Mom folder. And here is my project. So here, state project structure, As you can see, it follows that mortal view. Controller patron So user isn't model. That's our controller Resources fuse. That's are you showing the main page that we saw? There is one thing I almost forgot to mention in our public folder. There is an HD access file. We need to add the rewrite base through its student fact that we're using areas in Apache convict. Firstly, it Mm Ladder belt is using K a common blank interface to generate some common things like authorization files. Well, if you open a terminal and CO to the project folder, we're gonna use common lane interface Artisan quis beach be urges. And may out it's gonna generate old unnecessary files for the user. Logon and registration scaffolding has been generated successfully on gay. We go to the browser maker, fresh looking register. So we see the forms are there, that was C. What's next? We're gonna use common lightning to face Artisan Teoh at Immigrations. Was this immigration? Immigration is basically anyway off specifying cure table structure without bothering writing a bunch of SQL queries. First of all, we need to specify the database connection. We go to the dot and file. That's a file defining all the environment wearables that were used. But our application is using Let's make a database. We have a bump. And if we go to local Horst Borked 88 slash beach be my at me, we will open a beach be might add me and here we can at and you database bookmarks block So we have a database. It's same to know. Let's set up to name on the connection data. So the name is bookmarks. Block the name off our application. You are l is the location off our applications, so it's the local host slash bookmarks block. Guess Project is living in bookmarks. Log folder. Let's check the settings off ramp ports. My skill Porters 8889 by default so specified. Facing our environment. That's the name off the database and truth for lamp. Let's made from fresh. Okay, there's some better. Let's find out what's from Okay. It looks like the name was strong because, uh, I forgot to put quotation marks. That's bedroom. 9. Laravel Migrations and Seeder: right. Let's continue so we can at our recreation HB Artisan make the creation that's name off the immigration create bookmark steel create bookmarks is a table name. Let's take a look for Is that no so database migrations? That's our immigration table bookmarks. So by default it puts an idea and time stamps. These are the migrations that artisan out identification. Discreet. Add it for us. So we have three me creations by now. They're not yet executed. Data bases empty for the user Name. E mail. Passport. Best first resets table. But there are not yet in the database. We haven't yet executed the creation data bases empty. So let's add what we need for the boot marks the properties off our bookmarks. 1st 1 is this drink title strength will generate about a chair database. Another drink is, uh, you are help, which is make we can add something else. Lee. I don't know description. So the description is text. Guess it's a bit longer. Can't the longer down the bar chart. Two Point fight. Let's front immigration. BHP arches in Great. That's take a look book box, me creations. All the data distribution, all the things they're there again. We start is on. Let's make a mortal. So factory is a file that generates data that we can't use for development. So we have added a model on, and that's the model factory is like a the here bookmark factory. So here in the factory, we're gonna add some data faker sentence. So this means that we have a title. Let's add some fake dater for the U. R. L and South a description using the Parker function. - So we're gonna use beach PR to send me Cedar Mubarak stable. Caesar, that is a class that we're gonna use to at fake Data two database. Okay, let's call our factory in this cedar. That's the name off our motto Factory is gonna generate five bookmark items and create. So to activate the cedar, we have to call this function in our main cedar class. These go bookmarks either. So let's open up terminal again. PHP artists and me. Great. Fresh. The migrate Fresh command will drop hold tables from the database on, then execute that might create comment on. We're gonna populate our tables with data using cedar. Okay, let's take a look. Now we have the data 10. Laravel Routing: right, Let's take a look at the roots. That's the way to map old requests your application is using. What is that corresponding functions in controllers or views? We had a the welcome if you so. First of all, it's here. Views. Welcome. We have to change that. First of all, let's define a venerable bookmarks. And Cole, our mortal old means that we are retreating old bookmarks that we have in the database, and we're going to return to few the same You welcome, but was bookmarks so we can extract this variables. They spoke marks in our future. 11. Laravel List and Form: right both somewhere here, Let's make in a new order list. Fridge is a literal way off calling beach be in our template So l I pay attention to DEA curly braces Bookmark you are Oh, Euro is an attribute off our bookmark title A swell So now we If you got the listing, that's better. Here it is. So how can we add new bookmarks? Let's try low, Gideon. Oh, obviously, that was stupid. But strangest er and you use their first? Yeah, Cool. We're locked in and we see Home Butte. So it's like it in the home controller index. That's our view. So it's here, abuse home you're looking. That's what we see I would like to see disappeared for instead of the home view instead of the you're locked in. How can we do that? First of all, I'm gonna make the for just go play this snippet from the Sporting Files for the sake of simplest you. So what's going on here? I'm gonna explain. That's a usual form in html. But using blade directives. So lateral is using validator and the errors any means that if there are errors, the teacher is gonna bring us back to the form page and show where the errors are. Sisa for Token is a way to ensure that the client that requested initially for is the same person that is now submitting the form. What else? Title Ural and description on this have been button fresh. That's the form. So for now it's static and empty. It doesn't do anything. Well, let's go next. We need to add this of me truth. Let's add that year for food. Firstly, we're gonna add the crew Me, where outraced means that all the routes in this group will require a user to be locked in . - So that's our truth. For the get request. Name off fruit at the controller and the index is a function handling and return the template view fruit for the Cost De Quest Store is a function Teoh. See if the data after riposted 12. Laravel Adding Controller: right Beach parties on make controller to add our controller to generated, we're going to use Controller Teoh. Keep all the request handling logic in month plays in this class Boot mark shoulder, You know, with ease. I prefer generating as much as possible using common blind interface. So I'm gonna show you another way too. Generate Controller May controller with resource our amateur, it means it. Glad old. The useful function instead to work continues. First of all, Index will return if you home you Home name off template store Well, firstly created, you bookmark object bookmark title That's an attribute of our bookmark equals to request title request Is is an object returned by our form boot Mark your oil at book Mart description the same weight but mark safe to save it on. Then after saving that to the database, we have to redirect reserved back to the main page 13. Laravel Validating Input: right. How to validate to data. We need to add a new glass on you. Request specific for this form. Store bookmarks request. Okay, let's take a look. Resource requests, Store bookmarks request. So, first of all, this just drew outrage Title is a required filled 255 day maximum number off characters. Euro is required as well on It has to be that you are out. Do 55 maximum on description is also required on the same size as always. Be like that. Let's try adding something. First time concert, all clean on valid data just to see that works. Okay, my bookmark is here. 14. Laravel Debugging: What if we add an in violence? You are ill. Okay, It went to the list, so something is drunk, but the data doesn't catch this. Let's find out what's wrong. Oh, okay. In our database, we defined that Euro can be no can be empty. Was 19 my form. It tried to insert it. So validators even catch Okay is here. So we used a default request glass, but we just We made our own store bookmark request. We didn't use that. So we didn't call that little. So use this instead of the basic request. Let's frank in. Okay. There's another error now in our validator, and it's related to the URL field. Let's find out what's really pissed about the data title. Your Yeah, I was there. Okay, I forgot the column. The description isn't there. Okay, so we have to add another drew. Unique bookmarks. It's there again. This is your el has already being taken. Why did a food you need bookmarks? It's because you would take a look at the immigration. We have strength, unique. It means there can't be same Hugh RL's and our table. It's tracking in ways other. You are. Yeah, it went to the least. That's how relisting looking out. If I go home, it will redirect me is looking because, as remember, it belongs to the locked in Krupa fruits. That's pretty much it. We've made an application Teoh at and store bookmarks on Display them in a list. What else can we do? We could make a form to edit bookmarks. We could also make a form Teoh delete the items. Thank you for Washington. 15. React Todo Setting up: and this tutorial, I'm going to show you how to make a simple to do least app using cracked Web framework. Firstly, let's instil tracked using PM package manager when I started globally. Now let's generate the project structure using react generator to do react App is the name of her application and it's folder. Now we're going today Generated folder and team start around the generated application. Let's take a look. What once a year in the world from wreck Let's take a look at the project structure I'm using PHP Storm creating project source violence in local directory it she talks and here in this hold, the source files are located in SRC folder. Public here are old static files. 16. React Todo Adding a Form: right the start ways ap dot Js I'm gonna delete this part That was our welcome screen. First of all, we need to add our two too confident I'm going to create a folder to keep all the components in one place. Let's create a new job script file to do East Js React uses confident logic ap dot Js is our main component and we're gonna import it to do list component into the app Js made component to do laced is currently empty So next there let's add some coach into the to do list component Firstly, we need to import react class to do least that extent component Super Quest Yeah, we're writing using excrete six style on completar is gonna complete our Ignace creeped into a usual jealous creep goat. Currently brothers are using it was create five version and this scene techs were writing here is not supported by the full by the contemporary protesters. Firstly, we need Teoh Rencher that's going to return dif hither aunt form input placeholders task and we need the button types of meat. And don't forget to export this component expert default to the least other ways, actually is won't see this component. Let's take a look. Okay. What? To defecate? I forgot. Teoh, Call this component in our render difficult to show it up. Here it is. Currently it's just a static form. 17. React Todo Making a List: right. What's next, Woody? Judge items into the list and then delete them. So firstly, let's dio the adding functionality. Okay, here is our form. Aun said meat we're gonna add on submit Handler, these props at item That's the function we're gonna use to handle this admission. And if we're changing it here, item these So it's at night. Okay, we need Teoh right up Js glass. That's gonna keep our logic. We start with the constructor. AP Class is a subclass off component class. So where cooling super Teoh initialized the constructor off the parent glass they start stayed items season ray where old items are living current Titan He's a pointer to the current object that consists off to properties, text and key key is important at mandatory here because we identify object by its key and has their function handle input. Let's boot, Consul, look for now and at item method Where is the same conso? Look, add item is already here. Let's take a look. If I add something it dust refresh because by default it should make refresh to the page. That's why working at prevent de fold to the function. Oh too no it doesn't do to fresh. We should have some reference to the input element. So for this purpose, we're gonna use any input element. Input element is a reference to our input these dot input element and another think handle import. It's over there. These handle input. And another thing is the current item winter to the current object. These state, the current item to sum up at item handles our click event input element references that element itself handle input is the handling function. Current item is gonna hold our current item. So here in to do least component Let's at our things, Gref. These Dr Probes input element value. These probes don't current item text and on change the function handing our input Next step Let's out some logic to the art item method Firstly prevented. Fold const. You item these don't ST dot current item If this new item is not empty So it has some text But then I attempts IHS our existing All right, this is called spread syntax in javascript to us then you item these said state items is Did you updated items on current item base again empty with empty. While there's So that's the point where we have to add and you component was the name to do items. We also need to call these component in our app main component to show their items on the page and importing Teoh component. Well, first, see, let's import react again . Extending the component create task What does it do? Eat returns our item But additionally I'm gonna add at least item around the item value So the key is gonna be item key and the contents is item fixed. And don't forget to render firstly const to do entries These props entries on another Maribel least items is to do entries dot Mup or using not function because map is gonna call this create ask for each of the items into two entries very and returning on an order. At least this glass is not necessary. But I'm gonna later at bootstrap and exporting the component do two items. Let's take a look. What's in here? Okay, handling put is here. Hello, But with about jihad, the code Firstly so why arable item takes ace e charted till its value e charge it value is a reference to the input value off the form current item is is a new object. Was the text coming from input and and the key here? I'm gonna use state now. Function date now is returning time in milliseconds for the period scenes. 1970 up till now. So it's pretty much unique. Well, in that sense that if you're writing items quicker than one item for one meal a second, yes, it's not unique. But we're going the keep it like that for the simplicity. These said ST Current item. Let's take a look again. Hopes on there. You tear it well. You is not a function well beach be. Storm decided that this is a function and added round brackets for me, which was wrong. Now it's setting items to the placed. 18. React Todo Remove Items: right, but we also need to delete them. So for that purpose leads, let's at a Nhan click handler. I function that's going to do the following thes props. Props is there React way Teoh, manipulate the tomb object We cannot Many play there to object directly, but we need to use the react style. And Truls delete item is a new function that's going at take item key. So now we need to add dysfunction in the objects Delete item or did the use of filter that's gonna filter it? Items using their keys filter is gonna return. Anouar A filtered items was the items that do not have the same key as the key off the delays it item And once again we need to assign the state these the set state items ace filter items and also in here Delete. I ate them. Is this dot delete item? Let's check again. Oh, Ondas are better. That was because that I didn't give a night into my function once again. Now it works 19. React Todo Bootstrapping: right on. In addition, I'm going to show you on Easy Way Teoh. Add bootstrap. He can include bootstrap with Cdn, but I recommend you adding bootstrap as a dependency to the project and PM Install boats trip. Now it's ready. And Teoh use that bootstrap Js we need to install J query and proper. So when each import that bootstrap into our application, we can to it here in index dot Js import Bootstrap and bootstrap Jake right and proper. For example, he got form. It's at some bootstrap to the form input class form control on TIF glass name, input group and button class Name button Success. Let's set something here, for example, Deve Last name container. We can do it here as well, cause it's a static file. Our Drew It is in index html file. That's our application in route dif glass container. Our application inside the container off What's trap? And I know a jumbotron and PM start. No, we have a bootstrapped for him. What's that quickly Least group and and for the item class Name at least. Croup. Iten, Honestly, I'm doing refresh the page here, but it's not necessary. Guess the gods getting updated automatically when I update something in my code. This is called Heart Bush. That's it. Thank you for watching. We've got a new application to do, least using Cree Act.