Coding

React without JSX and without a Build Workflow

  • 00:00:01 hi welcome to this video when building
  • 00:00:04 modern web applications and especially
  • 00:00:06 the front ends of these applications you
  • 00:00:09 typically use frameworks like angular or
  • 00:00:12 view or libraries framework like
  • 00:00:15 libraries like react for that and that
  • 00:00:18 is fine they offer a lot of features but
  • 00:00:20 often you find yourself setting up a
  • 00:00:22 complex project before you can get
  • 00:00:24 started and then you always create
  • 00:00:26 single page applications in these
  • 00:00:28 projects now what if you just want to
  • 00:00:30 add react to one page of your multi-page
  • 00:00:34 application where you are rendering your
  • 00:00:36 views from the server let's say in a
  • 00:00:39 level PHP application the blade views or
  • 00:00:42 expressed with ejs or handlebars what if
  • 00:00:45 you got these view is these pages or let
  • 00:00:48 it be a static website where you write
  • 00:00:50 the HTML code on your own what if you
  • 00:00:52 got something like that and you want to
  • 00:00:54 use react for some feature on one page
  • 00:00:57 and you don't want to build an entire
  • 00:00:58 single page application you obviously
  • 00:01:01 can still create some workflows for that
  • 00:01:03 but sometimes it would just be nice to
  • 00:01:05 get started quickly and that's exactly
  • 00:01:07 what we'll do in this video I will show
  • 00:01:09 you how you can write react code in a
  • 00:01:11 couple of seconds without any complex
  • 00:01:14 workflow at all
  • 00:01:18 now for that let's start and I got a
  • 00:01:21 brand new empty folder here now in there
  • 00:01:23 let's create a index.html file I'm using
  • 00:01:26 Visual Studio code and there if I type
  • 00:01:28 HTML I get this m8 support here to
  • 00:01:31 create a skeleton for that with a press
  • 00:01:34 of the Enter key
  • 00:01:35 so nameless react without JSX
  • 00:01:38 or a word flow this is my patience but
  • 00:01:43 we'll have a look at in this video and
  • 00:01:44 now I want to build something super
  • 00:01:46 simple here and yet I just want to
  • 00:01:48 create a list of items and a button
  • 00:01:51 which allows us to add an item and when
  • 00:01:53 we click on an item I want to delete it
  • 00:01:54 now this is obviously not the most
  • 00:01:56 exciting app but it shows us how we can
  • 00:01:59 build something which is more than just
  • 00:02:01 one button with react without JSX so for
  • 00:02:05 that all first of all create some
  • 00:02:08 content here which I will not control
  • 00:02:09 foo J's X so here I'll add react without
  • 00:02:13 JS x as a title again then we can add a
  • 00:02:16 paragraph it's really easy and I'm just
  • 00:02:19 adding this so that we can see that we
  • 00:02:21 could really mix features that might be
  • 00:02:23 rendered on a server with features that
  • 00:02:26 are controlled with react because that
  • 00:02:28 react feature will follow here after
  • 00:02:31 that horizontal line there I'll add my
  • 00:02:35 react app and for that let's first of
  • 00:02:37 all import react we obviously still need
  • 00:02:40 that library and we can get it from
  • 00:02:42 react.js org if we click on get started
  • 00:02:44 there on the right CDN links we can
  • 00:02:48 simply take these two links these are
  • 00:02:50 the development versions here are the
  • 00:02:52 production versions which you can use if
  • 00:02:53 you want to ship your app to production
  • 00:02:55 I'll go with the development ones for
  • 00:02:57 now and I add them right before our body
  • 00:03:01 attack the closing body tag there are
  • 00:03:03 the two script imports now what am i
  • 00:03:05 importing here I'm importing the react
  • 00:03:08 package and react Dom these are two
  • 00:03:11 separate packages reacts basically the
  • 00:03:14 core react features react Dom is a
  • 00:03:16 package that allows you to render your
  • 00:03:18 react app to the Dom so this is what I
  • 00:03:21 need and now after that I'll add my own
  • 00:03:25 script I could write it in line in this
  • 00:03:27 file but I'll outsource it into a
  • 00:03:30 separate app dot J
  • 00:03:31 fall you can name that fall however you
  • 00:03:33 want though and let's import that by
  • 00:03:38 adding a source attribute here to the
  • 00:03:42 script and in that source attribute I'll
  • 00:03:44 point at app dot J s like this so this
  • 00:03:48 will import it important
  • 00:03:49 after the react imports here so that we
  • 00:03:52 can safely access the features from
  • 00:03:55 these imports now in fjs what I want to
  • 00:03:58 create is as I said a list of items and
  • 00:04:01 a button that adds items and then when
  • 00:04:04 we click on an item in the list that
  • 00:04:05 should remove it so what will we need
  • 00:04:07 well we'll need um one component react
  • 00:04:12 works with components as you probably
  • 00:04:13 know that wraps their list and the
  • 00:04:16 button and then their list has let's say
  • 00:04:19 a couple of separate components one for
  • 00:04:21 each list item now I will use next-gen
  • 00:04:24 JavaScript code here you could write
  • 00:04:26 this all with es5 code but a lot of
  • 00:04:29 browsers natively support next-gen
  • 00:04:32 javascript already so I will write this
  • 00:04:34 to make it a bit easier and focus more
  • 00:04:35 on react here than on JavaScript and
  • 00:04:38 then we create a new functional
  • 00:04:40 component like this I create a constant
  • 00:04:43 give it any name you want I'll name it
  • 00:04:46 list item like this and this will be a
  • 00:04:49 functional component so it will receive
  • 00:04:51 props here and then in there we normally
  • 00:04:55 would return some JSX code right so if
  • 00:04:57 you know JA react you would return
  • 00:04:59 something like a h1 tag written in
  • 00:05:02 JavaScript and this is so-called JSX
  • 00:05:04 which is compiled by a word flow cue the
  • 00:05:09 code which runs in a browser now we got
  • 00:05:11 no work flow so will not rely on that
  • 00:05:14 and will just write the code that runs
  • 00:05:16 in the browser so instead of returning
  • 00:05:18 h1 tag or anything like that here I will
  • 00:05:21 create a react element as it is called
  • 00:05:24 so that essentially is some JavaScript
  • 00:05:27 code which allows react to render that
  • 00:05:29 element and cue the Dom and for that I
  • 00:05:32 need to use something from the react
  • 00:05:34 package which I'm importing here we can
  • 00:05:38 use the react object now I didn't define
  • 00:05:40 it in the app dot J's file but this is a
  • 00:05:43 an object a variable
  • 00:05:45 exposed by the react package here so I
  • 00:05:48 can use react here and there we have a
  • 00:05:50 create element method and this creates
  • 00:05:53 not a native Dom element but a react
  • 00:05:56 element so some JavaScript object which
  • 00:05:59 reacts Dom can then render to the Dom so
  • 00:06:03 there we create an element and this
  • 00:06:05 takes free arguments the first one is to
  • 00:06:07 tag I want to create let's say a list
  • 00:06:09 item here should be a Li tag so Li for
  • 00:06:12 well Li elements right so this is d tag
  • 00:06:16 the second argument is a javascript
  • 00:06:19 object where we can pass props to that
  • 00:06:22 object so where we can set the
  • 00:06:23 attributes for the list item something
  • 00:06:26 like add a CSS class for example though
  • 00:06:29 important this would be a class name
  • 00:06:31 here right you might remember that that
  • 00:06:34 in react you don't use class but class
  • 00:06:36 name because class is a reserved word so
  • 00:06:39 we can add a class name like list item
  • 00:06:42 here and then we could yet add some
  • 00:06:44 style style dot CSS and say a list item
  • 00:06:48 simply has some padding of 10 pixels and
  • 00:06:53 a border of one pixels solid and gray
  • 00:06:57 something like that and now if we import
  • 00:07:00 that lets do that in the header here
  • 00:07:03 adding a link pointing at style dot CSS
  • 00:07:07 now we're importing the CSS code there i
  • 00:07:09 defined a list item class and i'm
  • 00:07:11 setting this on the list item which will
  • 00:07:14 eventually be created because i'm
  • 00:07:16 passing the class name to that object
  • 00:07:17 will also use that object to pass our
  • 00:07:20 own props down to our components later
  • 00:07:24 ok so that's that and the third argument
  • 00:07:26 then is the content in that element
  • 00:07:28 because right now it would be an empty
  • 00:07:30 list item something like this now what
  • 00:07:33 should be between these opening and
  • 00:07:35 closing tags that is the third argument
  • 00:07:37 we pass here now in this case i just
  • 00:07:40 want to output something which i expect
  • 00:07:43 to get through my props here so we will
  • 00:07:46 later create that list item component on
  • 00:07:49 our own and we will pass some props and
  • 00:07:51 the props here i will be let's say or
  • 00:07:55 will hold a title
  • 00:07:59 like that we'll have to make sure that
  • 00:08:01 we passed such a title property later
  • 00:08:03 than so that's my list item and let me
  • 00:08:06 actually write it all upper case to make
  • 00:08:08 it really clear that I will use this as
  • 00:08:10 my own component you could write a
  • 00:08:12 lowercase though now I need to list too
  • 00:08:15 and for that I'll create a class now now
  • 00:08:18 in older versions of JavaScript you
  • 00:08:20 couldn't use the class keyword in such
  • 00:08:22 cases you can use a different syntax for
  • 00:08:25 creating class components in react and
  • 00:08:28 you can find that information in the
  • 00:08:30 official Docs
  • 00:08:31 here I'll use the next-gen JavaScript
  • 00:08:33 code so I'll create a class and I'll
  • 00:08:36 name it list now this extends something
  • 00:08:40 and that something is react dot
  • 00:08:42 component again referring to that react
  • 00:08:45 object which we already used before and
  • 00:08:47 there we'll find a component base class
  • 00:08:49 now with that extended we can call the
  • 00:08:53 render method here just as we would do
  • 00:08:55 it in JSX based applications too and in
  • 00:08:58 there we return know JSX code still
  • 00:09:01 because we still have no workflow that
  • 00:09:03 would handle it instead we again return
  • 00:09:06 react create element and now I want to
  • 00:09:10 create an element which is let's say a
  • 00:09:15 div which holds my list of list items
  • 00:09:17 and that button now for that I first of
  • 00:09:22 all will treat a div and now you can
  • 00:09:24 also understand why and react when using
  • 00:09:26 JSX
  • 00:09:27 you always need a wrapping div or since
  • 00:09:30 react 16 such a fragment which you might
  • 00:09:33 have heard of because obviously we can't
  • 00:09:37 just pass comma react Creole create
  • 00:09:40 element and then some neighbor or
  • 00:09:41 something like that we can only return
  • 00:09:43 one thing here and that only can have
  • 00:09:46 one tag so any other elements have to be
  • 00:09:48 nested in there that is the idea so now
  • 00:09:52 I have my div we could pass a class
  • 00:09:55 there queue or pass nothing you can also
  • 00:09:59 pass null then and now the children off
  • 00:10:01 the div and that can be an array now so
  • 00:10:05 this is allowed to be an array so there
  • 00:10:07 we may have neighboring elements and in
  • 00:10:10 that array we again
  • 00:10:12 elements a react create element and
  • 00:10:16 obviously it's getting cumbersome
  • 00:10:19 already to always repeat that so one
  • 00:10:22 common pattern you see when using no JSX
  • 00:10:25 is did you create your own constant
  • 00:10:29 typically named e
  • 00:10:31 you could name it l or whatever you like
  • 00:10:33 which basically saves a reference to
  • 00:10:36 create element so it doesn't execute it
  • 00:10:38 there are no parentheses here it just
  • 00:10:41 saves the address of that function so
  • 00:10:44 now in all the places where we called
  • 00:10:45 react create element we can call E which
  • 00:10:48 is obviously a bit shorter so now we
  • 00:10:50 still create react elements there just
  • 00:10:52 using that trick or that pattern and in
  • 00:10:55 there I will now create an unordered
  • 00:10:56 list
  • 00:10:58 maybe not pass any arguments we can
  • 00:11:00 later do that and in their list here now
  • 00:11:04 I want to have my list items and for
  • 00:11:07 that I need some state first where I
  • 00:11:08 manage that data we can initialize that
  • 00:11:11 state in the constructor here so let's
  • 00:11:13 add a constructor function there we have
  • 00:11:16 to call super first that is a hard
  • 00:11:18 requirement and react and then I can set
  • 00:11:21 up my state we're setting this state
  • 00:11:24 equal to a JavaScript object where I
  • 00:11:27 have my items let's say where I start
  • 00:11:30 with an apple and maybe also a banana so
  • 00:11:34 I got my items here
  • 00:11:36 now I want to output them and I don't
  • 00:11:38 want to output these strings I want to
  • 00:11:41 output the list item for each of these
  • 00:11:43 items so here we take this state items
  • 00:11:48 and now we map it into an array of JSX
  • 00:11:52 element if we would use JSX
  • 00:11:54 in this case just into an array of
  • 00:11:57 created elements with react create
  • 00:11:59 element so here I'll get my individual
  • 00:12:02 item and I'm using an arrow function
  • 00:12:05 here you could use a normal JavaScript
  • 00:12:08 function there too if you wanted to and
  • 00:12:09 I will return either react create
  • 00:12:13 element or since we have that shortcut E
  • 00:12:15 and then create a list item now not
  • 00:12:20 wrapped in quotation marks instead
  • 00:12:22 referring to our own constant here list
  • 00:12:25 item
  • 00:12:26 and then there we again passed some
  • 00:12:28 props now important we have to pass a
  • 00:12:31 prop here we have to pass that title so
  • 00:12:34 here I now pass the title argument or
  • 00:12:37 the title property I should say and I
  • 00:12:40 bind it to item item is the argument we
  • 00:12:43 automatically receive in the function we
  • 00:12:46 pass to map map will go through all the
  • 00:12:49 elements in that list and pass the name
  • 00:12:51 of each element as item into this
  • 00:12:54 function so item will be Apple and then
  • 00:12:56 it will be banana so we're passing apple
  • 00:12:59 and thereafter banana for the first and
  • 00:13:01 second element we're creating here I
  • 00:13:03 don't need to pass any third argument
  • 00:13:06 because I have no children there there
  • 00:13:09 will be nothing between the opening and
  • 00:13:10 closing tag of my own component so to
  • 00:13:13 say so this should render a list already
  • 00:13:16 and now let's see that before we add any
  • 00:13:19 other functionality we got our two
  • 00:13:22 components list item and list and these
  • 00:13:24 components use some native Dom elements
  • 00:13:27 as well as than our own component now we
  • 00:13:30 just need to render it to the Dom and
  • 00:13:32 now we can create a hook for that simply
  • 00:13:35 some HTML element like a div typically
  • 00:13:37 user if div with some ID fruit list
  • 00:13:42 whatever you like and you can have
  • 00:13:45 multiple such hooks and render multiple
  • 00:13:47 totally different mini applications to
  • 00:13:50 them you render such a application or a
  • 00:13:53 set of components into a hook with the
  • 00:13:56 help of react Dom remember that is the
  • 00:13:59 second package we imported here it gives
  • 00:14:02 us the react Dom object and there we
  • 00:14:05 have a render method and the render
  • 00:14:07 method allows us to render a react
  • 00:14:10 element into a certain place in the Dom
  • 00:14:13 for that we need to create a novel react
  • 00:14:16 element with the e function or of course
  • 00:14:18 with react create element but we got the
  • 00:14:21 e function so let's use it and there I
  • 00:14:24 pass my list so this class here I passed
  • 00:14:29 this into this function here now I don't
  • 00:14:34 need to specify any props and no for
  • 00:14:37 argument here
  • 00:14:39 because I don't pay as any data now we
  • 00:14:42 just need to tell react on where to
  • 00:14:44 render this and that's the second
  • 00:14:46 argument to render there we use normal
  • 00:14:48 JavaScript and Dedan get element by ID
  • 00:14:53 to select JavaScript excuse me a Dom
  • 00:14:56 element by its ID now remember I got the
  • 00:14:59 fruit list ID that is the place where I
  • 00:15:02 want to render that list so I'll select
  • 00:15:03 this and then pass that as a string to
  • 00:15:06 get element by ID and now let's have a
  • 00:15:08 look and let's see if that works so for
  • 00:15:11 that I'll just double click my
  • 00:15:13 index.html file in the finder so let me
  • 00:15:16 quickly open it there here it is let's
  • 00:15:18 double click it and as you can see it
  • 00:15:20 opened but I got an error here super
  • 00:15:23 keyword unexpected here
  • 00:15:26 I got a typo yeah it's the con structure
  • 00:15:28 of course so make sure to type this
  • 00:15:30 correctly thereafter let's reload and we
  • 00:15:34 see our list now we get this warning
  • 00:15:36 that we have to assign a key to every
  • 00:15:38 element we're not doing this right now
  • 00:15:39 but generally it's working now let's
  • 00:15:41 quickly fix that by assigning such a key
  • 00:15:43 it's here when we create a couple of
  • 00:15:46 elements next to each other so here we
  • 00:15:48 where we have an array of react elements
  • 00:15:51 then we should not just pass the title
  • 00:15:53 but also the key we can use the text of
  • 00:15:57 the item here too as a key and with that
  • 00:16:00 we fixed one thing but we also got a
  • 00:16:02 list of air elements here we only got
  • 00:16:04 one element in there but react only sees
  • 00:16:07 that it's an array so we should actually
  • 00:16:09 also give this unordered list here a
  • 00:16:12 JavaScript object where we set the key
  • 00:16:14 to fruit list for example you can take
  • 00:16:18 any key you want and thereafter and this
  • 00:16:20 is gone so this is working let's now add
  • 00:16:22 that button and make sure that we can
  • 00:16:24 delete items when clicking on them so
  • 00:16:27 let's add the button first and for that
  • 00:16:29 next to my unordered list here I'll
  • 00:16:33 create an a variety with the e function
  • 00:16:35 I'll create my button here and on the
  • 00:16:40 button I want to register a click
  • 00:16:42 listener we do that with this object
  • 00:16:43 again so basically anything which you
  • 00:16:45 normally would add directly on the tag
  • 00:16:48 like on click you now add directly to
  • 00:16:51 that JavaScript object here
  • 00:16:53 so you add-on click here and now with
  • 00:16:57 that let's register or create some
  • 00:16:59 method which handles that click so
  • 00:17:01 button click Handler and this method
  • 00:17:05 should essentially remove the item on
  • 00:17:08 which we excuse me it should add a new
  • 00:17:11 item so here let's maybe name this add
  • 00:17:14 item handler so here I want to add a new
  • 00:17:16 item so what I'll do is I'll call set
  • 00:17:18 state just as you do it in a normal
  • 00:17:20 reactor but I'm not too happy with that
  • 00:17:23 because this is a normal reactor this is
  • 00:17:25 actually the core of react this is what
  • 00:17:27 it gets compiled to you in the end so
  • 00:17:29 now with this we can set the state and
  • 00:17:32 there I want to take my old list of
  • 00:17:35 items and append a new one so I will set
  • 00:17:38 I will access the old state therefore we
  • 00:17:40 should use the function form of set
  • 00:17:42 state where we get the old state as an
  • 00:17:44 argument passed in by react and this is
  • 00:17:47 required because set state updates
  • 00:17:49 asynchronously basically we can't rely
  • 00:17:52 on the old set state call already being
  • 00:17:55 completed when we do it the next time so
  • 00:17:58 there we can rely on that being the case
  • 00:18:00 and we get the latest state for sure and
  • 00:18:03 then we have to return an object that
  • 00:18:05 reflects the new state and there my item
  • 00:18:08 should be the items of the old state and
  • 00:18:11 all concat something this will yield a
  • 00:18:15 new list or new array and that is how we
  • 00:18:18 should manipulate arrays and objects and
  • 00:18:20 react don't manipulate your original
  • 00:18:22 ones replace them with new ones instead
  • 00:18:24 and here I'll simply concat Apple or
  • 00:18:28 apples now of course important this will
  • 00:18:32 lead to issues if you add more than one
  • 00:18:33 because then you'll have duplicate keys
  • 00:18:35 because we use that name as a key but
  • 00:18:38 that's fine for me now just want to show
  • 00:18:40 how you would connect such a button so I
  • 00:18:43 update my state here now we just have to
  • 00:18:45 connect the add item handler we do this
  • 00:18:48 year so we bind on click to this add
  • 00:18:51 item handler now important I need to
  • 00:18:54 call bind here and bind that this
  • 00:18:56 keyword so that this when we call it and
  • 00:19:00 here still refers to the class and not
  • 00:19:02 to the window due to the way this
  • 00:19:05 behaves in JavaScript
  • 00:19:07 so with that let's reload this um would
  • 00:19:10 be a good idea to also give this button
  • 00:19:14 a key because it's a neighbor of this
  • 00:19:16 unordered list and then you need to
  • 00:19:18 assign a key so let's do that
  • 00:19:21 and when everything was missing we
  • 00:19:25 probably want to have some text on that
  • 00:19:26 button right so let's add a third
  • 00:19:28 argument here and that will be the text
  • 00:19:30 on the button so it's a third argument
  • 00:19:33 in the e method and there I'll just say
  • 00:19:35 add fruit now if that if I save this the
  • 00:19:39 warnings gone we got the button if I
  • 00:19:41 click it we get apples if I click it
  • 00:19:43 more than once we get that error I
  • 00:19:44 mentioned because we have duplicate keys
  • 00:19:46 yeah but let's ignore that for now last
  • 00:19:49 but not least let's make sure we can
  • 00:19:51 remove an item when we click on it and
  • 00:19:53 for that let's go back to our list item
  • 00:19:55 which is a functional component and when
  • 00:19:57 we click on such a list item I want to
  • 00:20:00 remove it by the way um one thing I just
  • 00:20:02 noticed our styling is missing list item
  • 00:20:06 it has the list item class so that
  • 00:20:08 worked our import here to style.css
  • 00:20:14 I have a typo here list item make sure
  • 00:20:18 this is written correctly yeah now we
  • 00:20:21 got that style too but back to that
  • 00:20:23 click which I wanted to add let's go
  • 00:20:25 back to list item and there I want to
  • 00:20:27 add a click to the list item element now
  • 00:20:30 as I said whatever you would add on the
  • 00:20:32 tag is added to the object so let's add
  • 00:20:36 another property here on click and I
  • 00:20:40 will call some function which I expect
  • 00:20:43 to get wire props so I expect to get a
  • 00:20:47 reference to the function I should call
  • 00:20:49 through my props here so I can access
  • 00:20:52 props and then maybe on delete whatever
  • 00:20:55 you want now we just need to make sure
  • 00:20:58 that we got a on delete property and for
  • 00:21:01 dad we go to the place where we create
  • 00:21:03 the list item which isn't a render
  • 00:21:05 function of our list here and there
  • 00:21:09 besides pass in the title and the key I
  • 00:21:11 will now also pass on the lead because
  • 00:21:14 that is the property name we just wrote
  • 00:21:16 up there which we expect to get so now
  • 00:21:20 on the lead that should reference or
  • 00:21:22 lead to a function which deletes the
  • 00:21:24 item let's add another method here
  • 00:21:27 delete item handler there I expect to
  • 00:21:30 get the index of the item I want to
  • 00:21:32 delete or let's maybe say in the text
  • 00:21:36 and this allows me to then all zoom set
  • 00:21:42 my state as up there relying on the old
  • 00:21:44 state because then my new items will be
  • 00:21:47 my old items where I filter this also
  • 00:21:50 yields a new array by running a function
  • 00:21:53 on every item in the old array and that
  • 00:21:56 function checks whoever that item it
  • 00:21:58 looks at fulfills a certain criteria so
  • 00:22:02 here it'll go through all the items and
  • 00:22:04 execute this function and when we return
  • 00:22:06 true that item is added to the newly
  • 00:22:09 returned array if I return false here
  • 00:22:11 it's not added so here I will return the
  • 00:22:15 result of a comparison I'll check if my
  • 00:22:18 item which is just text which is just a
  • 00:22:21 name is equal to text excuse me is not
  • 00:22:24 equal to text because the item with a
  • 00:22:27 certain tag
  • 00:22:28 let's say banana is the item I want to
  • 00:22:30 remove so if the item I'm looking at has
  • 00:22:33 the same text as the item I want to
  • 00:22:35 remove then this is the item I want to
  • 00:22:38 get rid of so it should not be part of
  • 00:22:40 the new array of items because the new
  • 00:22:42 array still will be the arrays we render
  • 00:22:45 to the screen so all the items that are
  • 00:22:47 not removed with dead I have my delete
  • 00:22:51 item handler now down there on the lead
  • 00:22:56 excesses delete item handler does not
  • 00:22:59 execute it just hold a reference to it
  • 00:23:02 and then I also need to bind this and I
  • 00:23:05 need to pass that extra argument which I
  • 00:23:07 can pass as a second argument to bind
  • 00:23:09 and that extra argument is item because
  • 00:23:12 remember this is the text we're
  • 00:23:14 considering so this is banana apple and
  • 00:23:16 so on with this we're setting on delete
  • 00:23:20 on the list item now let's save this and
  • 00:23:23 reload and if I click on banana it's
  • 00:23:26 gone if you click on Apple it's gone now
  • 00:23:28 I can add more apples here if I did
  • 00:23:30 click on one of them they're all gone
  • 00:23:32 because I'm filtering by name right but
  • 00:23:35 it still shows that it is working fine
  • 00:23:37 that I can remove items and that I can
  • 00:23:39 add items and this is react without JSX
  • 00:23:43 now you might be wondering why would I
  • 00:23:46 use that well for one this is a super
  • 00:23:49 lean approach and if you use that
  • 00:23:51 pattern where you reassign react create
  • 00:23:54 element this is not even that much more
  • 00:23:57 complex than writing JSX it's strange to
  • 00:23:59 look at at first but after a while you
  • 00:24:03 really get used to it and you might even
  • 00:24:04 prefer that because it is a nice syntax
  • 00:24:07 it makes it easier to understand some of
  • 00:24:10 the specialties of react like class name
  • 00:24:13 instead of class like why do I need a
  • 00:24:15 wrapping element around my JSX elements
  • 00:24:19 so it helps with understanding that and
  • 00:24:21 you might overall like that approach
  • 00:24:24 even if you're not the biggest fan or if
  • 00:24:26 you prefer J's X this has the advantage
  • 00:24:28 of requiring no build workflow no build
  • 00:24:31 step at all you can take that code swap
  • 00:24:34 out the two imports here for their
  • 00:24:36 production equivalents and you get a
  • 00:24:39 production ready application
  • 00:24:41 if you only need to sprinkle some react
  • 00:24:43 here and there control this button with
  • 00:24:46 react control this list with react then
  • 00:24:48 this might be a great alternative
  • 00:24:49 especially on multi-page applications so
  • 00:24:53 where for try and important to know
  • 00:24:55 what's happening behind the scenes and
  • 00:24:57 that you got that option when working
  • 00:25:00 with react