REACT JS TUTORIAL #2 – Reactjs Components & Rendering HD 2017 [w/ subs]



00:00:00 – is running so we can focus on building
00:00:01 – the react application again everything
00:00:04 – in react is a component and components
00:00:07 – return exactly one Dom element just like
00:00:11 – an HTML everything has to have one
00:00:13 – parent Dom element they can't have two
00:00:15 – parent Dom elements so if I want to
00:00:17 – return a pair of h1s this will not work
00:00:20 – I'm going to get the nasty error that
00:00:23 – jsx elements must be wrapped in an
00:00:25 – enclosing tag so if I want to return
00:00:27 – multiple I just have to wrap them in a
00:00:28 – div like so now it will work again and
00:00:36 – I'll have to H ones of course I don't
00:00:38 – need to do that so in this case I'll go
00:00:41 – back and revert another thing is you can
00:00:44 – import dynamic information very easily I
00:00:46 – could create a constant my name my name
00:00:50 – is will and then anything in curly
00:00:53 – braces in the j sx portion of your file
00:00:57 – that's very important it won't work
00:00:59 – outside of there but anything in curly
00:01:01 – braces will just execute as normal
00:01:03 – javascript so in this case it's going to
00:01:05 – evaluate name which is the value of will
00:01:08 – there you go it's will I could also do
00:01:11 – three plus two it's five and then I
00:01:15 – could also do a self-executing anonymous
00:01:17 – function and that returns the value of
00:01:22 – three of course that's a terrible idea I
00:01:25 – don't know why you'd ever want to do
00:01:26 – that but you can see it execute the
00:01:28 – function returns the value of three and
00:01:30 – then sets the value of three in there if
00:01:33 – you do need logic this is not the proper
00:01:36 – place to do it generally if you need
00:01:38 – basic logic you can do it in the render
00:01:40 – method so say Vera Val equals I could do
00:01:45 – some sort of self executing anonymous
00:01:46 – function here say maybe get Val
00:01:49 – something like that is totally fine and
00:01:52 – then I could print vowel or if you have
00:01:55 – a little bit more logic and you want to
00:01:56 – keep your render method clean which is
00:01:58 – always a good idea you could do get Val
00:02:00 – you could create a method on your class
00:02:03 – and then I could do this get Val
00:02:10 – and then whatever get Val returns will
00:02:12 – be printed out into the template so I'm
00:02:14 – going to return will again and you be
00:02:18 – it's will again you can also pass that a
00:02:21 – value I could pass that a value now I
00:02:25 – can return will plus Val and you get the
00:02:28 – point it basically is class methods and
00:02:31 – you can invoke them


Video Url:
http://youtu.be/byweyGW_gyM

Comments

comments