React Basics, with Toby Ho, Presented by Atlanta JavaScript

Transcript

The following transcript was automatically generated by an algorithm.

• 00:04 : okay so Kelly is going to do a kind of a
• 00:10 : deep dive into react so I thought I
• 00:14 : would lead off by doing a more a shallow
• 00:19 : end of the pool kind of presentation so
• 00:22 : this is a quick start with react react
• 00:28 : 101 if you will too
• 00:31 : for people who have never looked at
• 00:34 : react before or very new I want to give
• 00:37 : you a quick way to jump in and play
• 00:39 : around so I'm going to use this handy
• 00:43 : tool command line tool called create
• 00:46 : react app but the prerequisite to using
• 00:52 : this one is no GS so you also need to
• 00:55 : install no GS and then once we got that
• 00:59 : we can start playing so I'm gonna jump
• 01:02 : right to the command line so so what you
• 01:05 : do to start off the command line you
• 01:08 : pull up your spotlight come in space and
• 01:11 : you type terminal and you fire up the
• 01:12 : terminal I'm gonna assume you have
• 01:18 : already installed nodejs if you wanna
• 01:21 : double check
• 01:22 : you can type node hit enter and see if
• 01:25 : you it returns something a JavaScript
• 01:28 : prompt like this
• 01:29 : yeah here you can type in some jobs good
• 01:32 : if that works you have node and then you
• 01:35 : can start installing create react app if
• 01:44 : you look through their documentation or
• 01:46 : a readme page they will tell you how to
• 01:49 : install it it is that command so I will
• 01:52 : just copy that come in and put it in AI
• 01:55 : terminal and hit enter and that will
• 01:57 : install the tool for me I'm not gonna do
• 02:01 : it it's gonna take too long
• 02:08 : true yeah depending on how you install
• 02:11 : it no js' you may you may need to say
• 02:14 : sudo and then npm install yes sadly most
• 02:18 : of the most of the projects out there
• 02:20 : don't tell you that so thank you okay so
• 02:24 : once you've done that what you do is you
• 02:28 : type create react app and then you type
• 02:33 : the name of your application it'll
• 02:36 : create a folder with that same name I'm
• 02:39 : gonna name it hello world and that it's
• 02:47 : gonna generate a hollow word folder with
• 02:50 : a bunch of files in it it also install
• 02:53 : the stuff in it
• 02:55 : so which is still gonna take a long time
• 02:57 : so there's no way for me to escape the
• 03:00 : npm install process so what it's going
• 03:05 : to bring down is the react library and
• 03:09 : the react on library as well as a whole
• 03:11 : bunch of development tools that are
• 03:14 : required to build your application
• 03:17 : that's written in yeah and that includes
• 03:24 : what else I think there's a there's a
• 03:30 : CSS like modular CSS library that comes
• 03:34 : with it there's some there's some no TS
• 03:43 : based watcher tools and such there's a
• 03:46 : server and they're open just stuff that
• 03:51 : you'll need to make your development
• 03:53 : process kind of easy
• 03:55 : oh it includes babel forgot to mention
• 04:00 : that babel is the tool that enables you
• 04:04 : to write javascript in the latest
• 04:08 : greatest yes 6 or yes 7 or yes 2016 or
• 04:15 : whatever you want to call that latest
• 04:17 : version of javascript
• 04:28 : okay so that is done and that's a lot of
• 04:35 : files I think that the directorate's has
• 04:39 : created it's just hello world and I'm
• 04:41 : gonna create a or I'm gonna open my text
• 04:45 : editor to start navigating these files
• 04:52 : yeah so these are the file domain files
• 05:00 : that you want to look at are in the
• 05:03 : source folder index J s is the entry
• 05:08 : point and then there's also an app - yes
• 05:11 : app that tests etc the way you run this
• 05:16 : application is NPM start you do an NPM
• 05:21 : start it'll start a server and it'll
• 05:23 : also open up a new tab in your browser
• 05:26 : to point at the location of that server
• 05:29 : so now this is your app without you
• 05:33 : having to do anything but this is
• 05:40 : actually not very satisfying yet because
• 05:42 : I haven't actually done anything so so
• 05:46 : um if you're going to look through this
• 05:50 : code by the way that it's structured is
• 05:53 : this is the top-level entry points I'm
• 05:57 : gonna make the text bigger this is the
• 06:00 : top-level entry point of the file it's
• 06:04 : gonna render some application this bit
• 06:08 : here that looks like HTML if you're not
• 06:10 : familiar with react you know this you
• 06:13 : got some HTML code inside of JavaScript
• 06:16 : code there is a react innovation and
• 06:21 : it's kind of weird but you can actually
• 06:23 : like this is in reality some JavaScript
• 06:28 : this thing will get converted to some
• 06:31 : JavaScript so what you you
• 06:33 : could actually take this thing and say
• 06:36 : store it in a variable and that'll work
• 06:41 : and I'll put this variable back in here
• 06:43 : and that'll do the same thing so like
• 06:45 : it's hTML is just like a value you can
• 06:48 : put in a variable this app what does
• 06:52 : that refer to
• 06:53 : well that refers to this app object that
• 06:56 : was imported from this app module and
• 07:01 : that app module was defined here it
• 07:04 : defines this little component yeah I'm
• 07:08 : gonna start from scratch though so I
• 07:10 : always like starting from scratch so
• 07:12 : what I'm gonna do is I'm gonna delete
• 07:14 : everything having to do with that I'm
• 07:18 : gonna do the most basic hello world
• 07:23 : imaginable I'm not gonna touch this
• 07:29 : serviceworker
• 07:31 : thing because I don't know what it is
• 07:35 : okay so I just broke it by deleting a
• 07:38 : bunch of files but that's okay that's
• 07:41 : because I don't have a penny more it
• 07:42 : says this module failed to build because
• 07:47 : I couldn't find an app that is it's
• 07:50 : because I just deleted it that's okay I
• 07:53 : know what I'm doing I'm just not gonna
• 07:55 : import yeah and instead of using the app
• 08:00 : here I'm just gonna put in some regular
• 08:03 : HTML here so I can say closed
• 08:16 : and that's a hello world app so this
• 08:21 : this is the most basic hello world react
• 08:24 : app that I can imagine and that works
• 08:28 : okay any questions to this point what
• 08:39 : time do we start random here what time
• 08:43 : do we start mm-hmm sounds funny okay
• 08:49 : okay so the the big thing about one of
• 08:55 : the big things about react is that you
• 08:58 : can build your application in terms of
• 09:00 : modular components so I can make a
• 09:03 : component that that makes that
• 09:10 : encapsulate a thing and then I can
• 09:13 : repeat that thing by our using the
• 09:16 : component so let's say I'm just gonna
• 09:21 : make a component and the way you make
• 09:23 : component is using a class so I'm gonna
• 09:26 : say I'm gonna make a hollow world
• 09:28 : component and a component has to extend
• 09:33 : react that component so that's the first
• 09:37 : requirement of a component the second
• 09:39 : requirement of a component is it has to
• 09:41 : have a method like this called render
• 09:45 : and that render method has to return
• 09:50 : something that's HTML okay so once I do
• 09:58 : that I have correctly defined or I don't
• 10:02 : know if it's correct yeah actually I
• 10:04 : think I have to find a HelloWorld
• 10:06 : component and now I can use this
• 10:11 : component by using the name of the
• 10:13 : component as my tag name okay so I'm
• 10:18 : just gonna instead of doing an h1 here
• 10:21 : I'm just gonna say I'm gonna make an
• 10:23 : hello world
• 10:24 : tag
• 10:26 : and that should do the same thing I'll
• 10:33 : change this text to make sure I can my
• 10:37 : code is actually having an effect on
• 10:39 : this thing so so this is a now a
• 10:41 : reusable component and I can reuse it I
• 10:49 : could try to use a hollow world twice
• 10:53 : for example and that didn't work why
• 10:59 : anyone now yeah yeah yeah I did
• 11:06 : I just want someone to correct me okay
• 11:08 : yeah so said Jason JSX elements must be
• 11:17 : wrapped in an enclosing text so these
• 11:21 : are the two adjacent elements it it
• 11:25 : wants me to wrap them in an enclosing
• 11:27 : pack which I interpret that to mean like
• 11:31 : I can only have one top-level element
• 11:33 : like if I want a variable to contain
• 11:35 : some HTML that HTML must be all under
• 11:39 : one element so if I do this now I got
• 11:45 : two headers instead of if they're one
• 11:48 : and I can go more okay okay one last
• 11:54 : thing is Oh cover props so you can pass
• 11:59 : information into the component so I want
• 12:02 : to say hello world to someone
• 12:21 : yeah okay let's say hello to a bunch of
• 12:24 : people and I can utilize the information
• 12:29 : that's been passed in to this component
• 12:32 : within the component sort of like a
• 12:34 : variable or or like a function parameter
• 12:39 : now substitute that in here so the way
• 12:42 : you use it is this props that the name
• 12:46 : of the property that was passed in so
• 12:48 : I'll say this that perhaps that name and
• 12:53 : then whatever was passed and gets
• 12:55 : substituted in there mostly like
• 13:00 : variables okay any questions at this
• 13:05 : point yeah okay you would in that case
• 13:18 : there's if you were using plain react
• 13:21 : but once you once you level up and you
• 13:25 : add Redux to the mix it's different but
• 13:30 : then you would use props when you're
• 13:32 : using plain react then you would want to
• 13:36 : use state instead of props and state is
• 13:39 : like variables that can change whereas
• 13:43 : props is more like constants they're not
• 13:46 : at least within the context of this
• 13:49 : component itself is not meant to change
• 13:52 : it could get changed from the outside
• 13:55 : though but that's more of a thing that
• 13:57 : you do with Redux or other kind of stuff
• 14:00 : okay
• 14:01 : that's all I wanted to cover unless
• 14:04 : there's one more question okay really
• 14:18 : quick component yes my other component
• 14:26 : could link to my hello world component
• 14:31 : no problem just like this so if I were
• 14:34 : to add my other component then it's
• 14:45 : using it's like drilling down to my
• 14:47 : other component to render hello world
• 14:49 : which then drills down to hello world to
• 14:51 : render the h1 tag yeah okay
• 14:55 : I'm gonna hand it over to Kelly Kelly
• 14:57 : you ready
• 14:59 : [Applause]