[00:00:00] SY: Next Monday, that's September 18, we are launching a new project called Mentor Monday. I'm so excited about this. We're teaming up with Stephanie Hurlburt, queen of all the mentorship things, to make it easier and more accessible for you to find mentorship on your coding journey. Ok here's how it works. We've picked three awesome tech mentors in a specific industry. The first one is gaming. On Monday September 18 at 9:00 p.m. Eastern Time we're doing a Twitter A.M.A. that's an Ask me anything so you can ask our three mentors whatever questions you want about gaming. Then Tuesday Wednesday Thursday the mentors will keep their DM's open so you can reach out to them and keep that conversation going. And then finally on Friday they're taking your most popular questions and writing a blog post with their answers and advice. So if you're interested in gaming, wondering where to start, how to be a game developer, we've got three amazing people who are excited to hear from you. For details go to codenewbie.org/mentor-Monday. Link is in the show notes. (Music) Welcome to the CodeNewbie podcast where we talk to people on their coding journey in hopes of helping you on yours. I'm your host Saron and today we're talking about learning and working with React.

[00:01:16] A few years ago I met a woman at a tech event and later on we got coffee.

[00:01:20] She was working on a project.

[00:01:21] KG: I was attempting to build a startup called hashtags.

[00:01:24] SY: That's Kim Goulbourne.

[00:01:25] KG: I'm a designer self-taught developer and chronic creator.

[00:01:28] SY: And she was a lot like me.

[00:01:30] She had a full time job and a side gig and she's always had a side gig. She's built award-winning apps produced art shows even had a line of T-shirts.

[00:01:38] But her latest gig.

[00:01:39] KG: So the project is no questions asked.

[00:01:41] It is a challenge where you get one new place to go a week for six weeks.

[00:01:46] SY: Meant that she had to learn React to build a mobile app and launch it to hundreds of beta users all in a matter of weeks while still working her regular full time job. She gave herself about a month to learn the framework and start building. She has video tutorials.

[00:01:59] KG: And as soon as I opened that first video I was like WTF I'm not sure what's going on right now.

[00:02:05] SY: But she figured it out and got it done. Today we look at how she did it. The ups and downs of learning a new framework on a deadline. There were a lot of downs. And if you're wondering what the big deal is and why React has taken over and a lot of ways we've got a special new segment for you. It's called the coding corner, where Flatiron School's Joe Burgess breaks down a technical topic and this episode he takes on a really popular feature of React - the virtual DOM. After this.

[00:02:31] If you're building an app you'll probably have users and when you have users you have to talk to those users usually via e-mail. Which means as a developer you need to pick an email service provider which means you should check out Spark post. They are the world's most reliable and fastest growing cloud email service provider with a robust API to fit right into your app. They're super developer friendly. They've got free startup accounts perfect for solo developers and sophisticated enterprise options which is great for teams. So if you need to send email which you probably do check out Sparkpost@pages.Sparkpost.com/codenewbie. Link is in the show notes. You may have heard from Episode Three of this season's CodeNewbie podcast that we are teaming up with Vaidehi Joshi to bring you a new technical podcast called Code Bytes which means we have to come up with a brand, a logo, and a website. It's still part of CodeNewbie but it's also its own thing. So the first thing we need is a domain name and for that I went to Hover. I just registered codebytespodcast.com - don't go there yet I still have to build a site. But getting that domain was the first step in bringing you our next project. It was simple it was easy. Their UI is actually really slick and beautiful. It took just a few steps to get our new online home for our next big project.

[00:03:42] So if you've got an idea you want to share with the world get started at Hover - go to hover.com/newbie to save 10 percent off your first purchase. If you're dreaming of a career that gives you a flexible schedule, the chance to work remotely, and tons of job security, fulfillment, and freedom - all with a nice big salary - you need tech skills and that's what skillcrush.com is for. Their all access career blueprint is the tech industry most personal and supportive online learning program. You'll see just how easy and affordable it is to get a head start in tech. Enroll NOW and get 10 percent off your annual blueprint subscription. When you use the promo CodeNewbie.

[00:04:22] See you in class.

[00:04:26] But you're not just a designer you are an award winning designer.

[00:04:31] KG: Yes. I did win a Webby this year.

[00:04:33] SY: That's right. And you thought I was going to go but I didn't and I was ready, I was ready for it. OK so we are here to talk about React and React Native. Because this is a very popular thing that a lot of folks are learning and a lot of CodeNewbies are learning because they feel like these are two very important frameworks that they should understand and that will help them get a job. And you recently learned both of these. Is that right?

[00:04:55] KG: Yup.

[00:04:56] SY: So first of all let's talk about the difference because I kind of thought it was just all one big thing. They're actually two different things. You tell us the difference between React and React Native?

[00:05:04] KG: Yes so react is more for web apps whereas React Native is to build mobile apps. That's the simplest difference, really.

[00:05:10] SY: Yeah I was going to say nice and simple, nice and simple. And they're both Javascript frameworks.

[00:05:16] KG: Yes exactly.

[00:05:17] SY: So how good do you have to be at JavaScript in order for these two things to make any sense?

[00:05:25] KG: So I think an intermediate knowledge of JavaScript is enough to get you started but when you're actually coding in React - sure it's JavaScript, but there's still so many semantics that are just so different in React and things that you kind of have to relearn a bit. So just having the basics of JavaScript and just what that looks like and the syntax is helpful. And then it's kind of like React is its own the world.

[00:05:46] SY: So what prompted you to learn these frameworks?

[00:05:49] KG: So as you know I worked on a project recently called No Questions Asked, which is a challenge where you get when you experience a week for six weeks and that's delivered via a mobile app. So I usually build mobile apps with phonegap. I've done that once before but I know that the shortcomes with phonegap is it doesn't translate to more native code. Like more like Objective-C or Swift code. So I really wanted to try out React Native which bridges the gap a little bit closer to that. And I just so happened to start learning React first, which you know a lot of people ask, Do you have to know React before you need to learn React Native but not necessarily the case because it's still completely different. Either one you start with will be fine. But yes that's the reason why I decided to learn both of them.

[00:06:33] SY: So I feel like there are so many different like - oh my god, I feel like there are so many different JavaScript frameworks available that you could learn - why React and React Native?

[00:06:42] KG: OK so React Native is definitely only if you're trying to build a mobile application and you don't know like the native iOS language which is Objective-C or swift or you don't know Java which is for Android apps.

[00:06:53] Not really sure what's for Windows apps but.

[00:06:57] SY: Sorry.

[00:06:58] KG: So that's the reason for React Native. For React, it's typically used I think for more real time applications because you're able to create those like single page applications that you would use. Let's say Angular which is another JavaScript framework or Ember, so React is sort of like the older kid on the campus, I would say, or the more mature kid on the campus just in terms of like how everything is structured and sort of following this idea of object oriented programming and stuff like that.

[00:07:24] SY: So how was your experience. Well actually, before we talk about your experience tell us what you were doing before you learned React and React Native? What were you coding and what were the frameworks you were comfortable with? What was your background?

[00:07:36] KG: Sure. So I started my journey in PHP then when I entered the workforce I started learning Ruby on Rails which I realized was better than PHP, at some point. Well, depending on what you're doing.

[00:07:48] SY: No judgment.

[00:07:50] KG: (Laughs) JavaScript-wise, I learned angular.

[00:07:53] I have touched Ember a little bit but not not enough to like code an entire application, but so I'm familiar with just like the idea of a JavaScript framework for single page apps. And then of course your typical HTML, CSS, and JavaScript.

[00:08:06] SY: OK so going from that background to learning React and React Native. What was that...what was that transition like?

[00:08:13] KG: Oh my god.

[00:08:14] So I thought it was going to be easy because everybody thinks oh my god it's JavaScript so this is fine. I got this. But the way that you code in React is just so... it's, it's... I can I cannot find a different word other than interesting just because of the way the CSS is set up, right. So you have this idea of like Sassy CSS, SCSS, which is is used to better structure your CSS code, right. So you get used to that. But then React says no no no let's take a step back for a second here and let's just put all of our CSS in JavaScript and let's not nest anything because that's just not a concept here. Let's also put inline styles or just let's put class names on everything and let's not be able to make global styles to make things easier because that's not a good idea, right, which some of these ideas were more like React Native than React. But it definitely started I started sort of relearning certain things, and just like you're putting HTML in the JavaScript, you're also putting CSS in JavaScript. So it's it's just a little bit different to what you're used to coding when you're on a regular web app.

[00:09:20] SY: OK so if you could describe your experience with React and React Native in three words, what would they be?

[00:09:28] KG: Oh my god.

[00:09:29] SY: Oh my god - would those be the three words?

[00:09:29] KG: That's actually a really good one. Oh my God.

[00:09:34] So to just describe what I just explained in one word.

[00:09:39] It's backwards. I feel like I just went back to how we used to code back in the day.

[00:09:44] SY: That's how it sounded to me too, I didn't know if that's just because I, you know, I'm not much of a JavaScript person to begin with, but when you were describing it I was like, aren't those the things you're not supposed to do anymore?

[00:09:54] KG: Exactly.

[00:09:54] It's like.,,So it's not like it's the wrong way. And I think some people would definitely argue that like, oh my god, this is the better way of code and you do want everything to be like as components and together in one place and... it's very interesting. So backwards is one word. Interesting is another word because I just can't find another word to replace interesting. And then structured, I think, would be the final word.

[00:10:18] SY: So for example with Rails, one of the main themes of Rails is convention over configuration, so everything is very structured, there's a particular way to do it, if you try to do things that are outside of that structure, it will be very painful for you. So when you say structured is that the way you mean it or are there just very specific rules that you have to follow and if you don't it's not going to be a fun coding time?

[00:10:40] KG: Yes that's exactly it. While React is structured, that's good, but they also give you a lot of errors. So it's not like -

[00:10:47] SY: Ok, that's good, right?

[00:10:47] KG: Yeah, exactly. Because it's like in Angular or Ember, it doesn't tell you what's wrong when it breaks. It just breaks and then you're just like banging your head against the wall. But at least with React, it actually comes with an error package. So that was really helpful to like work through a lot of the issues that I had.

[00:11:03] SY: So when you think about your experience actually learning this new framework, you've done, you know, a good amount of JavaScript beforehand. Did you walk into it feeling confident that you could figure it out because you're already a coder, already a designer, been working in JavaScript for a while. Were you confident?

[00:11:19] KG: Definitely not. So I luckily got a course by - I really want to read his name because everybody loves this course - his first name is Wes, I feel like.

[00:11:32] SY: Yeah, Wes Boss.

[00:11:33] KG: Yes. Yes. He has an awesome React and I think React Native course as well. So I started my journey with the React course and as soon as I opened up that first video I was like WTF I'm not sure what's going on right now. But then after a while because you like code along, it was - I got used to it. Of course, you know, as with everything else but it was definitely like an interesting learning curve.

[00:11:56] SY: What did you - what did you see when you first opened up, if you remember, that made you go oh my god, what the hell?

[00:12:01] KG: The first thing I saw... I think it was just the way he set everything up. Like I think my first question was OK but like where where's the HTML going for it to render on the page, like where did you put that just now?

[00:12:10] SY: Yeah, that flow. Yeah, yeah. That wiring.

[00:12:15] How long did it take you to solidify that part - at least to get comfortable enough to move on from it?

[00:12:21] KG: I'll tell you when I get there. Just kidding. (Laughs).

[00:12:25] So... so with React I think I took the course for maybe like four weeks. And this is my own personal experience with like learning I can't just watch a course and then know what I just learned. I have to build something. So it wasn't until I started building that things started to like solidify for me. So I switched from React to React Native. So that's what I sort of started building. So let's just say I had like about five weeks build-up to React Native. And then after about like a week of coding in React Native, I started to feel like a little bit more comfortable. But there's still so much I know I don't know.

[00:13:00] SY: Yeah. So the whole time during these - sounds like a total of five weeks - were you mostly doing these tutorials and coding along or at what point were you actually trying to build something real while learning?

[00:13:12] KG: So the first four weeks were literally just me sitting down and watching videos and coding along. And then I finally decided that this is not going to work.

[00:13:23] So every time I went back to the video series I forgot what the last video was.

[00:13:28] SY: Yes, yes, yes, that's exactly what happens to me, that's why I can't really do coding tutorials unless it's a very, very finite feature. You know I'm just implementing it and you know it's one, it's one card on Trello then it makes sense. But if it's a whole like let's learn a framework through this - it doesn't, it doesn't quite work for me.

[00:13:43] KG: Exactly. So it was like four weeks of that. And then I decided OK let me build something. But then at that moment I was also switching to React Native. So I started building something in React Native first actually, which is funny. And then it was about like a week of getting used to React Native and then a week of like really starting to build and getting comfortable.

[00:14:02] SY: So did you know that the ultimate goal was to learn React Native?

[00:14:07] KG: Yes. I did.

[00:14:08] SY: OK. And did you start with React because you felt like you had to or if you could do it again would you have just jumped straight to React Native?

[00:14:14] KG: That's a good question that I still can't say I can answer because I knew going in I wanted to learn React Native and I think in my mind I was like oh I guess let me go learn React first.

[00:14:27] SY: Yeah that sounds like that makes sense.

[00:14:29] KG: But when I spoke to somebody that also sort of did a similar thing he said that like I guess it depends on the person, it's not necessary to learn React before you learn React Native, because it's set up the same exact way. But what's interesting is that like React Native has a whole other set of principles that you have to follow for it. So it's almost like either way I was relearning a part of React. Like mostly like the elements and just the way things are like set up HTML-wise but otherwise everything is pretty much the same. So I don't really think it matters where you start. But I guess it all depends on the course. You start with too, so.

[00:15:02] SY: Yeah. So you mentioned when I asked you earlier if you were confident going in, considering that you know, you're already a programmer, you said no. How did you feel going into it?

[00:15:13] KG: Well I didn't feel anything because it was just ok, I mean let me go try to learn React, let me turn on this course.

[00:15:19] SY: Reluctant? I hear reluctance. (Both laughing).

[00:15:21] KG: Good point, good point. No it was more just like I was just open.

[00:15:28] I was like OK, let's, let's open this course and see what happens. But then when the first video started I was like no I can't no, this is stupid, this is dumb.

[00:15:35] SY: But you did it.

[00:15:38] KG: But I did it.

[00:15:38] SY: I mean you have an app right now that hundreds of people have downloaded and are using. So first of all, tell us a little bit about what that app actually is.

[00:15:47] KG: So the project is No Questions Asked. It is a challenge where you get one new place to go a week for six weeks and you get that experience delivered via that mobile app.

[00:15:57] SY: Interesting and there's kind of like a - I don't know if game is the right word - but there are rules you have to follow right because it's you have to sign up before the challenge starts the challenge last a number of weeks...

[00:16:06] KG: Yes, so you have to sign up before the challenge starts, which was July 24th. You also have to complete each experience within seven days, so like basically you have to complete at least one experience a week. You get two skips per week. So in total you get like about three options that you can decide to do or you can miss an entire week and just have to wait till Monday.

[00:16:25] SY: So what are some of these experiences?

[00:16:27] KG: It's mostly been restaurants, bars, art shows, and exhibitions and performances in New York.

[00:16:34] SY: OK. Like what. Give an example.

[00:16:36] KG: An example, OK. So a theme - my favorite theme actually - was mixology, just because, I don't know, it sounds cool.

[00:16:42] SY: It really does, such a great name.

[00:16:44] KG: And all of the places in New York that you would consider to be like mixology are really interesting and always like hidden gems that you don't know about unless you're like looking for it. So I guess a specific place could be...I think the one I just got this week actually was Raines Law Room which has this like really old fancy New York vibe.

[00:17:05] I haven't been yet but it looks cool just from the picture that I obviously curated myself but it was a nice reminder of it.

[00:17:13] SY: Very nice, very nice. So on a more technical point, when you were putting together this app, what are some of the things that you had to think about and add as a developer, or like what are some of the app components and features that are part of this app?

[00:17:29] KG: So let's take my brain back. So you don't sign up through the app. I just I took that off the plate immediately, I was like, I'm not going through that sign-up process.

[00:17:37] SY: Good for you, good for you.

[00:17:37] KG: You got to prioritize you know. So really if I were to take you through the experience, you open up the app, so I present 12 themes that you can choose from. So mixology was one, something like art or desserts was another one. So you first pick your six themes and once you set that up then you basically get your first challenge immediately. The first screen would be, oh your challenge is ready, get an experience in mixology. So you hit "Get an experience" and then you're presented with a detailed view of - so, for example the Raines Law Room, so we tell you the name of the place. There's an image of the person who curated it because I had a few curators help me with the project as well. Things like the website, price range, or supported diets, reasons to go, a map that also tells you like the nearest train stations because you know how we New Yorkers are. And then also any like small recommendation that would just make sense to tell the person in advance. So once you go through all the details you decide whether or not you want to choose an experience or skip. Once you do you get like a fun confirmation or a fun sad face because you skipped it. And then at that point you're just like going to the experience whenever you decide to and then you come back, you complete it, and I think that's about it. And then you wait for the next one.

[00:18:50] SY: OK, so from the back end perspective it sounds like you probably have a database with a list of all these experiences and events but it sounds like you're pulling a lot of information from other places as well.

[00:19:04] KG: Depends on what you mean. If you mean am I using any APIs - application program interface - is that what it is?

[00:19:10] SY: Something like that, yeah.

[00:19:12] KG: If I'm using any APIs to pull any data from, that's incorrect, just because I once again decided to de-prioritize this idea of like having to figure out how to pull an API and React Native together.

[00:19:26] SY: So it was a lot simpler not having to do that.

[00:19:27] KG: Exactly. Yeah so I just manually curated everything. I think the only thing that's like probably dynamically being created is the map. So I just have to like give it you know longitude and latitude points and then Google Maps or Apple Maps takes care of the rest.

[00:19:41] SY: Yeah. So what I find really fascinating about this story is you pretty much had a very specific launch date -like a public launch date - for this app way in advance of you being comfortable with React and React Native, you know even knowing if this was doable. Why did you decide to do that?

[00:20:03] KG: Is that crazy?

[00:20:04] SY: Why would you do that to yourself?

[00:20:06] KG: So I think, I think the way I operate is just that like I'm gonna set a deadline and figure it out later, you know? It's interesting that you say that because, you know, usually the things I build, because I've built them before, it's easier to estimate how long it's going to take. In this case I am not quite sure how I decided that it was only going to take me four weeks to build this, but somehow I did.

[00:20:27] But I think really the reason why the date had to be what it was was just because I was trying to target summer. So it was just like either way I have to get this summer session so whatever I have to do to make that happen just has to happen. And I think if it came to the point where, you know, I wasn't learning React Native or it just wasn't going the way I wanted it to go, like I would obviously have to push that deadline and I'm always hesitant to do that, but like I know I have the power to do that.

[00:20:50] So I think that made me comfortable with just like going with the flow and seeing what happens and working nights and weekends and not seeing anybody for days.

[00:20:58] SY: Right, because that was the other thing, is this is not -this is not your job you're not doing your full time job, you were doing this on the side?

[00:21:04] KG: Yep, I was doing this on the side.

[00:21:06] SY: Nights and weekends. Weekend warrior. I love it. So I work really well under deadlines, because like you said it gives me a very clear cut goal I have something to work towards, it keeps me focused. But having a goal and a deadline that's also very public -that I've announced - and I have people who've signed up for I think you had almost a thousand people who signed up for the app, who were eagerly anticipating, you know, kicking off their summer - that's like a whole other level of pressure to put on yourself. I'm going to take it from your laugh that you agree.

[00:21:36] KG: I mean when you put it that way.

[00:21:45] SY: How did you how did you handle that as you were actually building this thing?

[00:21:50] KG: I mean I guess I didn't, 'cause I never I never thought about it holistically in that way, you know?

[00:21:58] SY: That's what I'm here for.

[00:22:01] KG: Yeah. I mean, I guess... I guess for me instead of it sort of deterring me - or not deterring me, but like scaring me, you know, from doing what I need to do to get things done, I feel like it almost pushed me in a way. So deadlines and knowing that like OK, everybody is actually waiting for this on July 24th. So, like, I'm not just throwing myself down I'm letting a lot of people down. Even though once again I'm making that up - I can literally change that deadline if I want to. So I think maybe knowing that I have the power to really do whatever I want with this and just knowing that it's not my first rodeo. Like, knowing that like, I'm going to get it done, I guess sort of gave me the confidence to not really worry about that.

[00:22:37] SY: So your app launched - you know people are currently actively using it right there in the middle of the NQA challenge. How does it feel?

[00:22:44] KG: It feels great. And now I'm bored. (Laughs).

[00:22:52] But I'm happy. I'm happy that I made it because I literally was like working up to the last minute, as you know. So, and that day was like, I collapsed. I could not even function for the rest of that day. So it really feels good - it always feels good to, like, you know, you make a deadline and you know things always happen along the way but, like, once you hit that date and you're like OK that wasn't so bad. It's over. I made it.

[00:23:15] SY: Yeah. You know once it's over it never feels like it was ever that bad.

[00:23:19] KG: Oh my god that's the worst part right?

[00:23:21] SY: It's the worst because you forget - you forget but when you're in it you're like, why do I keep doing this to myself? I don't understand. Like every time I keep - I'm back here again.

[00:23:29] KG: Yeah.

[00:23:30] So like a week away from launch I was like, OK Kim. Literally seven days from now, you can do whatever you want. You can go hang with your friends, you can go have drinks, eat, watch tv .

[00:23:42] SY: And it will be delicious.

[00:23:43] KG: Seven days. Exactly. I don't know if that actually helped. But I tend to do that a lot.

[00:23:50] SY: Yes. Absolutely delayed gratification. Absolutely. So we talked about some of the parts that were really difficult and really hard and challenging. What was a moment when you were coding when you were building this thing that you were really really happy about?

[00:24:04] KG: That's a good question. I feel like there were a lot of moments but I'm just going to pull the one that's coming to me right now. When I was making the decision to use React Native, so I almost didn't do it because like having this whole deadline and I'm learning this for the first time, so like how am I going to build this in four weeks? That was definitely hanging over me more than it usually does, just because like I know I'm not an idiot. Like, if you're going to learn something how are you going to put a deadline into it as well. So I decided to give myself a day to decide if I want to use React Native. So I took a day, I picked one feature, and I decided to see if I could figure that out.

[00:24:36] And the moment I did I literally laughed to myself, I was like that that wasn't so bad. I can do this.

[00:24:45] So I definitely think I like jumped for joy and I was like pretty excited in my apartment when that happened because I really wanted to use React Native and I really didn't want to just fall back on what I knew just because it was hard.

[00:24:57] SY: What was the feature?

[00:24:59] KG: You're going to laugh. Ok. So, React Native, there's so many concepts that's just hard for me to grasp initially.

[00:25:07] And I just could not figure out how to navigate for a whole page to the next. (Laughing. I'm sorry.

[00:25:15] SY: That's OK.

[00:25:15] KG: It sounds so simple, it's just a link, just like in a website , right? Well I could not for the life of me figure out what that meant in the context of React Native.

[00:25:23] So that was one of the things that I tried to do and I successfully did it.

[00:25:28] SY: So for example in Rails you would have, you know, like, blog post path to click and then it takes you there - is that, is that what you mean? What is that equivalent in React?

[00:25:38] KG: Yeah that's exactly what I mean. And it basically was the same thing but there was just more to it. Just like, OK, in Rails, like sure you hook up that link in the href right. But you actually have to create the route first or it actually doesn't even exist unless it's like a public link or something like not on your website. So it was knowing that like oh, there's actually this other thing that I have to hook up for this other thing to even work. And I just did not know what that was because it's not just the link in React Native.

[00:26:07] SY: So, yeah, I'm so jealous of people who learn frameworks and languages and they're excited about it because I think it's just a huge pain. I really do.

[00:26:14] Just the process of figuring out.

[00:26:16] KG: I mean I think so too!

[00:26:17] SY: Right?

[00:26:18] I just feel like the process of figuring out how to set things up and what this framework cares about versus other frameworks and the whole wiring of things. I think, I think it's terrible, so shout out to anyone who actually enjoys that stuff because I wish I was one of you. Very, very jealous of that.

[00:26:33] KG: I feel like it's - sometimes it's less about like how hard it's going to be to like get started on that framework and more about like what you want out of it. I also don't enjoy like learning so many different frameworks, I'm just like you have one and it works, just use that. But in this case I knew I wanted something that translated better to native iOS or Android code and I knew that React Native would have been the better choice. So that's why I was like OK, I'm going to put myself through this so I can get that.

[00:27:01] SY: Yeah. Coming up we have our very first session of the coding corner where Joe Burgess from the Flatiron School breaks down some of the more technical details of React.

[00:27:10] JB: I really love teaching React. It all comes down to that one idea that everything is a function.

[00:27:15] SY: We also talk to our second guess. That's right - you get two today - about two easy ways you can start building with React.

[00:27:21] JB: One of the things that we're really passionate about at Expo is making mobile development more accessible to everybody.

[00:27:28] SY: He tells us how he and his team are making mobile development newbie friendly with their tool, CRNA. After this. So you're feeling trapped - you've got a dead end job, you want to get out, do better, and make more money, but you don't know how to start. That's exactly why Skillcrush was created. Skillcrush is designed for total tech beginners to learn digital skills and launch better, higher, paying and fulfilling careers, and that career comes with real mobility. So you'll never feel trapped in a dead end job again. Their all-access career blueprint program provides premium tech classes, one on one mentoring, and a thriving student community to support your journey from tech newbie to digital pro. They're offering 10 percent off your annual blue print subscription to CodeNewbie listeners, just use the promo CodeNewbie. See you in class. After you register a new domain name, it's up to you to figure out what to do next. You usually have to go to a hosting provider and figure out what C name to put where to connect your new domain with your actual Web site -and it's a pain. So when I went to Hover to register CodeBytes.com - our new show coming to you in November - I was pleasantly surprised to see a section at the top called Hover Connect Partners. In just a few clicks you can connect your domain name to any host or web site builder. They've partnered with Squarespace, Shopify, tumblr, and more to make it super easy to bring your idea to life. So if you've been sitting on a great tech idea, take that first step and go to hover.com/newbie to save 10 percent off your first purchase. Link is in the show notes. One of the most important features of any app is talking to your users, whether it's an email notification, a password reset, a new user welcome -emailing your users is an essential part of the app experience, which means you need to pick a reliable email service provider you can count on. Spark Post is the world's most reliable and fastest growing cloud email provider. They're built on AWS and trusted by the world's biggest senders to deliver unmatched uptime and resilience and they're great for developers like you. They've got an amazing rest API to fit right into your app or you can use plain as SMTP.

[00:29:30] So check out Spark Post at pages.sparkpost.com/codenewbie. Link is in the show notes.

[00:29:38] So we talked to Kim about her journey learning React, and we'll hear more from her in a bit. But I wanted to get a bit more technical and for that. We're going to the Coding Corner with Joe Burgess.

[00:29:49] JB: I'm the V.P. of Education at the Flatiron school.

[00:29:52] SY: I feel like React is the most talked about framework in our community for sure, definitely taking over the web development world. Do we really need React?

[00:30:01] JB: Of course not. The reason React was created, and Rails was created, and Express was created - all of these things that are one level above the language. Rails is written with Ruby, Express is written with Node, React is written with JavaScript. The reason they do it is to make life easier and to make life better. As programmers, we like living a life that is manageable as our applications get larger and so as things got larger and larger it made sense to codify some best practices. It made sense to really think about the right way to do this and to kind of come to a common consensus across an entire community of developers as well as with teams in whatever company you work at. And so React solves the problem of very large, dynamically updating, front-end web apps. My favorite example is Gmail. One of these first applications to ever be a Web site that felt like a desktop program. And even a lot of, you know, a standard kind of news websites like New York Times or Bustle, are kind of trying to make the experience feel like a desktop application. And React - while like I said is not required, you could do everything you can do in React in plain old JavaScript - it makes all the boring stuff easy, is the other thing that's nice about it. And as a developer, I want to work on the hard stuff. I find that most challenging, the most fun. And as much of the boring stuff we can remove and make easier, the better. And I think that's really where React comes in.

[00:31:35] SY: But there are so many frameworks. There are so many JavaScript frameworks - what makes React so special, what differentiates it?

[00:31:44] JB: The thing that got me is, it really has lent itself to things that JavaScript is very good at and, in particular, JavaScript is not a great object language - it's not designed to be like that. It's really designed in different ways but it lends itself to being a very function-based language. You probably will notice when you first learn JavaScript that some of the very first things we hammer into your head is functions, functions, functions. And so what React does is it tries to get out of the way and just be a very light wrapper around functions. In the end it's just a bunch of functions that return an HTML string that then get rendered onto the page. It feels like JavaScript, so if you love JavaScript, you're going to love React, because it really feels like JavaScript, not like other languages kind of being shoehorned into JavaScript.

[00:32:40] SY: So I keep hearing about this thing called the Virtual DOM. What is that?

[00:32:45] JB: What is a virtual DOM. The virtual DOM - in teaching, I always try and express, or better make students feel the pain of why a technical solution came up.

[00:32:54] SY: Yes.

[00:32:55] JB: Let me describe the problem to you. You have ten thousand friends on Facebook, you're very popular, and you're listing all of them. It's a huge amount of people. Then one person goes in and changes their relationship status. They've recently gotten hitched, they're now married - congratulations to them, you now need to update their status from, you know, engaged to married. In a lot of the old world, what you would do is you would refresh the entire page. Users wouldn't notice it but it would really go through all 10,000 and make the changes. As you can imagine, it just felt inefficient. It just felt not quite right. And so then, we went from there to getting better at making it so that each part of a web site would be a componentized. So you could think of each display of a friend to be a single component. And when you update that person's component, only that one person updates. That's great. That's much more efficient - instead of updating 10,000 things, you update one thing. The problem is, it was kind of hard to constantly make very custom things for every single possible change that could happen. You know, one of the goals of React is to really generalize a lot of common patterns and it's very hard to generalize the idea that in a list of many, many things, only one thing changes. That is absolutely super common.

[00:34:19] I mean, you can think of it over and over. Gmail, you have a new email Facebook, you have a new status update. Twitter, you have a new status update. New York Times, a new article comes in. I mean, you can think of how popular huge page data - one little bit changes. And so the virtual DOM - let's go right quickly on what the DOM is. The DOM stands for something equally incoherent. The document object model. Effectively, it's the HTML representation in JavaScript. So it's when you want to add a new bullet to an unordered list, you need to manipulate the DOM, which is a sentence you will see all over the place. You're going to add a node. And the terminology goes pretty deep, but the DOM is the website as it gets represented in JavaScript. And there's the real DOM, which is the thing that is getting rendered, it's getting displayed by the browser. The browser pays attention to whenever the DOM changes. Whenever it does, it looks to see what that change that JavaScript requested is, and then it shows it to the user, right, whether that's adding the bullet point or inserting a new friend or updating some text, whatever it is. That's the real DOM that uses the processor that uses the browser's rendering engine which is the thing that converts the DOM into actual pixels on the screen. And it's expensive. Whenever you see your browser using a ton of processor, a lot of times it actually is that rendering engine. That conversion of DOM to pixels on the screen. React implemented a really beautiful solution.

[00:35:57] What they thought of, is they said look. Whenever we make a change, we want to make the smallest change possible to the real DOM, to the Dom that the browser pays attention to. But we want to make it as generic a way as possible. We don't want our developers to have to custom code every single time there's a different type of change. So they made the virtual DOM. So when you modify data and the React term it's called state, when you modify the state of the program, it then makes the change onto a virtual version of the DOM, which is not getting rendered by the browser. It doesn't cost a browser a ton of CPU, a ton of processor cycles, it's effectively scratch paper. And then, it compares the difference between your scratch paper - between your virtual DOM - and the real one, like what is actually being displayed to the user. It then looks for the smallest difference between the two and then sends those updates to the real DOM with just the smallest of differences. And then that's really what the virtual DOM is. It builds together this idea of having a scratch version to do all of our work on. And then when we're ready to commit we're ready to really show it to the users. Then we do a difference between what's happening virtually and what's happening, what we want to happen to the real world, and we then - boom - and we make it happen.

[00:37:27] SY: So if I'm using React, is the idea that my JavaScript manipulates the virtual DOM, and then React handles the communication between the virtual DOM and the actual browser?

[00:37:39] JB: Yeah, effectively. So you lot times in React you will write in a language called JSX - it's effectively HTML with a little bit of fanciness in it. You do that and then React translates what you did in your JavaScript to the real DOM through its virtual DOM.

[00:37:59] SY: Interesting.

[00:38:00] JB: One of the nicest parts about React is usually you don't have to think too much about the virtual DOM. I know we teach it, of course, here at the school, but you can go really far without having a deep knowledge of the virtual DOM. You know, my recognition for all these things is always go deep on a topic when you realize that your lack of depth is what's holding you back. It's OK if you don't fully get what all the different things going on with the virtual DOM. I bet you'd get a lot done without that knowledge. And when you need it, you need it, and you'll do the research, and that's fine.

[00:38:30] SY: So when we talk about how it actually affects the user experience and the end result of our product, going back to that example of having, you know, 10,000 Facebook friends and either doing that through React or doing that just without React, maybe without even a really good framework - what is the difference? Is it just speed in terms of how quickly we see the new information? Is it something else, like how do you measure the value of using React?

[00:38:57] JB: Yeah, that's a great question. So, the value of the virtual DOM as a subset of React really is speed. It's just faster on average. Obviously you can create cases where it's not. It is just faster and/or uses less memory. It's better. As far as the broader picture of why use React, the answer is more than speed. I think speed is important and the truth is if you're at the place where your biggest problem is your app is so complex and is doing so many amazing things that speed is an issue, you're probably doing pretty well. The biggest reason React is powerful is because as your application gets larger it maintains a roughly similar level of easability of maintenance. As the application gets larger, because it's componentized, because you're using the virtual DOM, because you're using kind of all the React built-in tools, it's usually a lot easier to work with. And that's the biggest reason to use React - it's actually almost not a speed issue. It's not anything else. It's actually a human issue, it's just nice, it's just productive, it's fun, it makes developing more enjoyable, and more fun means I'm going to write more code, I'm going to enjoy my time, and then maybe down the road when your app is huge and you have speed improvements, then you get to feel the benefit of virtual DOM.

[00:40:17] SY: OK, I'm convinced, you've convinced me. Good job.

[00:40:21] JB: Good to hear. It's fun. I really, I really love teaching React. It all comes down to that one idea that everything is a function. Everything is a function - you're just constantly like, whenever you're like, how can I do this, you have to go back to that base idea. Everything is a function. That means input, do some things, output.

[00:40:37] SY: If you want to learn more about the Flatiron school and how to get started learning web and iOS development, check out flatironschoolnewbies.com. Link is in the show notes. So far we've explored the personal journey of learning React, and then we dug into some technical parts of the framework, but how do you get started? It still feels like there's a lot going on and a lot to know before I can actually make my app. And that's exactly the problem Brent is trying to solve.

[00:41:03] BV: I'm Brent Vatne, I work on a project called Expo, a create React Native app, and I'm also a contributor to React Native.

[00:41:12] SY: And you've written a lot of blog posts and I've seen a couple of your talks and other podcast interviews about React, and it seems like a lot of what you talk about is how to get started. You know, where beginners might find some challenges and ways to make it easier for folks.

[00:41:27] BV: Yeah. One of the things that we're really passionate about at Expo is making mobile development more accessible to everybody. We have a lot of people that come through using Expo and React Native who have never made mobile apps before, and it's just really nice to kind of lower the barrier to entry to pretty much anyone who's interested in building an app. If you dedicate a bit of time for it, you can ideally build and share an app for iOS and Android through friends without even having to spend any money to get a license or anything like that for the App Store Play Store.

[00:41:58] SY: One of the big complaints and issues with React is getting started. It's the first set up, it's a ton of configuration. A lot of things and just a lot going on at the very beginning of it, before you can even get to the fun part of coding it. Walk us through what some of those steps are. If I said today, I want to create my first React app. What are some things I might need to do that may not be so much fun?

[00:42:27] BV: So if you'd asked me this about a year or a year and a half ago, I would have been in complete agreement and I would have been probably speaking for the next 20 minutes about the things that you need to do to get started. Thankfully the React core developers kind of heard the issues from the community and decided to build something called Create React Up and what Create React Up does for you is all you need to do is install, run NPM, install global Create React Native app, which just installs the Create React Native app - or Create React App. I'm stepping over myself here because I'm going to be talking about Create React Native App shortly. But if you run NPM, install dashi, Create React app, it will install this binary which you can then run from anywhere.

[00:43:25] So in your terminal, you run Create React app and type the name of an application. Let's say hello world.

[00:43:30] It will create a hello world directory and set up everything that you need so that all you need to do next is go into that directory, run NPM start, and you have a server running with some nice things like live reloading, so as you change some code it'll be immediately updated and the browser is just all set up for you. And from there if you run NPM start and then run open app JS in your favorite editor, you can make any changes to that. And you'll see it updated right away and so there's really minimal amount of setup required now and that will take you pretty far until you need to learn more about things like web pack which is a whole thing that hopefully you can avoid for as long as possible. It's a very valuable tool. It's just quite complicated because it's capable of doing a lot of things and thankfully with Create React app you just don't have to think about that. You can get started, you can write code, you can see the updates right away, and it really helps to simplify the learning and on-boarding process.

[00:44:44] SY: And so with Create React app, it simplifies a lot of things which makes it feel more magical. And I think that whenever there's a, you know, we're going to remove all these complications from your process and we're going to help you get started right away, I kind of think - does that mean I'm missing a key part of something that I should know and should understand? Is it just you know delaying a pain point that's going to hurt even more later on because I've ignored it? Like how do you, how do you think about the simplification of this process without it being a missed opportunity to actually learn it understand this framework?

[00:45:27] BV: When you want to learn React, I think you don't want to learn web pack necessarily. You know, motivation is very limited, and if you decide one day, I'm going to learn React and you gotta learn React and then you realize you need to learn web pack and you need to learn about Babel and how transforms work and and all those sorts of things, you're probably not going to learn React, or if you do, good on you. But that's often a very big barrier to getting started, is having to deal with tooling like this. If you are forced to - in order to just get a re-act application running, there's a good chance that unless you started off with the intention of learning about web pack, there'll probably be a significant drop off in the number of people who will push through that and write React code. It definitely does hide some of the magic, maybe not hides some magic, it does some magic to hide some of these details that you don't want to think about when you're getting started with building an app, but it also does it in a really nice way where when you decide that you do want to maybe investigate that or you need to investigate it to add something to your application, Create React app kind of - I'm not entirely sure about this but as far as I know - it you pioneered this idea of ejecting from a toolchain. And so, what that means is when you have an app created with Create React app, if you run NPM, run eject, it will take all of the configuration that is powering your application, move it out of all of these hidden places, and expose it in plain sight so you can change anything that you want. And so at any time you can see how everything is configured, you can - you're essentially not locked in by this build configuration. So it really helps for the idea of just learning what you need when you need it.

[00:47:13] SY: You're right. You know we want to learn everything but we can't learn everything right now. So it sounds like it's not so much that we're hiding this key piece of information and kind of telling you, oh, don't worry about it, you don't need to know it. But instead, we're saying, you don't need to know it right now to get started. Let's focus on the reason why you're here which is because you want to build a web app using React. Let's get you started on that. And then eventually we'll move on to other things when you're ready. So it sounds more like structured coding, a structured app building, instead of, you know, risking being overwhelmed by all that information, which I really appreciate. So we've focus most of the conversation on React, but there's also React Native which is the mobile side of things. And there's also a similar get started really quickly tool called Create React Native app. Tell us about that.

[00:48:02] BV: So Create React Native app is very similar to Create React App in its ideas of getting all of the build configuration out of the way. When you sit down and you think, I want to make an app that works on my phone you don't want to have to take two hours to download Xcode and install it and figure out how and how to get that working. Ideally you just want to sit down and write some code with something that you're familiar with. Or if you're not familiar with React, then something that it is at least maybe closer to other things that you're experienced with, if you know some JavaScript and get the result immediately on your device. And we're trying to minimize that friction between you wanting to build an app and having something running on your phone as soon as possible. So Create React Native does that by essentially creating a project for you which is just a couple of JavaScript files and then leveraging this other tool that I work on called Expo, which can kind of be thought of as an environment that can run React Native apps. And so you install this app from the App Store or Play Store on your phone and point it to a URL which is just the same as when you do NPM start and Create React App. And it opens a browser, points it to a URL. In the case of Create React Native app, you open Expo pointed at the URL which is where the JavaScript for your React Native application is being served from. And it will load that and run it and then you'll see the results on your phone.

[00:49:35] I think this has been pretty valuable because the time that it took previously, prior to Create React Native app, to get started was very similar to what React was before Create React app. As I said, you know, installing Xcode could take hours and selling Android studio could take hours, if you wanted to get this on a friend's device. It was also all these other complexity associated with that. And so we're just trying to make it more available for, I think, a lot of the people that listen to this podcast than just the developer community at large. Anybody who's interested in tinkering and making mobile apps.

[00:50:10] SY: So do you have a couple resources to share with us?

[00:50:12] BV: Yeah. I think if anybody is interested in getting started with React and/or React Native, you can check out reactexpress.com or reactnativeexpress.com. Actually maybe it’s react.express. We can try both and whichever one works, but those are excellent websites that explain not only the basics of React and React Native, but a little bit as well about the tooling around it, but not enough that you're going to be deterred from learning anything about React, but just enough so that if you hear a word you might have some idea of what it means. Another one is this tool called Prettier. Prettier is a tool that formats your JavaScript code for you. And it's really helpful for several reasons. One of them is that you don't have to think when you're writing your code about maybe going down to a new line and putting some spaces in to make things look good or going back and deleting some stuff. And anything that comes up related to formatting and if you're working in a team someone pointing out a formatting issue in your code or that kind of thing that happens in code reviews. But in addition to that it actually helps surface errors in your code, and because JavaScript is an interpreted language, you don't have a compiler when you save your code, and you kind of just have to go and run it. Prettier is able to identify things that are just not valid JavaScript as you're writing your code. And so you can quite easily avoid, for beginners I think, is a pretty significant class of problems in your code.

[00:51:43] And then the last one is a - this one is particularly for people who are interested in React Native - I did a React Native workshop with Devon Abbott and Adam Perry and James Eday who Devon Abbott created React Native Express and React Express. The other two are coworkers of mine, and we did this workshop and recorded the entire thing and put it on YouTube. So pretty good value as in it's absolutely free on YouTube and I think attendees paid something like 800 euros or something along those lines.

[00:52:12] SY: Thank you for doing that! We appreciate that.

[00:52:15] BV: It's a great way to get started and it starts from the basics and builds up from there so I think that can be valuable.

[00:52:26] SY: Very cool. So knowing everything you know now what would you have done differently?

[00:52:31] KG: I don't know if I would have done anything differently. I feel like everything worked out in the right way. Yeah, because I can't say that like, oh I would have started with React Native first so I would have had more time, or I mean, actually, no. No, I do know.

[00:52:46] I would definitely need to figure out how to test React Native, because there's a few bugs here and there. Yeah. So. (Laughing).

[00:52:58] I definitely did not build in time to do more extensive testing, so I think that's what I would have done differently.

[00:53:04] SY: That is good. I fully support this.

[00:53:07] This idea, you should be testing. I was so upset with you when I was like, ok, let's run yours back. (Laughs). I was like, damn it.

[00:53:17] KG: Technically though, testing in React Native is not as nice as like testing in Rails, just saying.

[00:53:23] SY: All right. All right, fine, fine, you get that one.

[00:53:28] So next, let's do some fill in the blanks. Are you ready?

[00:53:31] KG: I'm going to try.

[00:53:33] SY: Number one. Worst advice I've ever received is?

[00:53:36] KG: So back when I was attempting to build a startup called hashtags - so I was not building it for the right reasons. You know I really just wanted to learn some code, but that sort of turned into two years of the start-up journey, and I think towards the end of that when I started feeling that pressure to not continue, I asked a lot of people what they thought about what I was doing and what they thought about like how I was feeling. And a lot of people wanted me to obviously continue doing it. They saw potential in it and sort of like taking in a new direction. But I think if they really understood where my passion came from in the first place, they would not have recommended that. So I think if I had followed that advice, I'm not really sure where I would be today if I had continued along that path, or just like who I would have been.

[00:54:18] SY: What was the difference between what they saw for you versus what you saw for yourself?

[00:54:24] KG: Innately I knew that my passion was not for the product itself. It was more for learning. That's not something that I realized until like right at the end. So I think for them they saw, oh my God, this has so much potential, you know, you just have to switch directions and do this and do that, which was - it was great advice for somebody that was actually passionate about the product and actually wanted to scale it and take it further.

[00:54:45] But for me, if they had known my personal desires, like if somebody could have dived into my head and figured out, OK Kim, you actually don't really want to do this, so you should just stop, like that would have made everything .

[00:54:57] SY: It would've been different.

[00:54:57] KG: Yeah exactly.

[00:54:58] SY: Number two. My first coding project was about?

[00:55:01] KG: So I do not remember what my mother's business was, but she was the reason why I started coding. She had a small business and she wanted me to build the website for it.

[00:55:11] And to this day I cannot remember if we ever finished our website and how far it even got, but I just know that like she is the reason I'm here today.

[00:55:20] SY: And how old were you?

[00:55:21] KG: I was - we're going into age here? - this was sophomore year of college.

[00:55:26] SY: So you were in college, you were in like college years when you did this.

[00:55:26] KG: Yeah. It was college. I wasn't one of those like young geniuses.

[00:55:33] SY: Well you could have been a young genius in a different way, just not in a coding way.

[00:55:37] KG: Sure.

[00:55:38] SY: So had you heard of coding before your mom said, hey can you make this thing for me? Was it like something that you'd heard of and wanted to look into?

[00:55:46] KG: I can't remember if I had started taking this one web design class that we had at SCAD, the college I went to. But as far as I remember, I just know that like I was doing graphic design and maybe I got into intro to coding just because of the type of teacher that I had in web design, but I can't say for sure. I just know that like, she wanted the web site, I was learning design, so I was going to design it, and I for some reason said, Hey Mom, guess what? I'm going to build this too. And bought a book - bought my first and last full book on HTML, CSS, and JavaScript, because I'm just like, books are too much, and went at it.

[00:56:22] SY: Do you still have that book?

[00:56:24] KG: No. Oh my God. That book was like - this is going to sound really funny. That book was $50. But like in college years, that was a lot of money.

[00:56:31] SY: That is a lot of money!

[00:56:31] KG: Like two days after, I learned everything I needed to know.

[00:56:38] SY: Number three. One thing I wish I knew when I first started to code is?

[00:56:42] KG: So, I wish I learned the value of testing earlier on. I feel like I did not learn the value of it till like -

[00:56:49] SY: Me too.

[00:56:49] KG: (Laughs) I did not learn the value of it till like last year. Somebody really sat down and explained it to me. And now I'm like, it's my fault that I'm like hesitant to obviously always test my code. But, you know, if I was so green I would have been all over it and I probably would have been better at that.

[00:57:07] SY: Yeah, I feel very lucky that the idea and importance of testing was kind of ingrained in me very early in coding because now I like the idea of not testing just scares the crap out of me. But yeah, I agree. Like if I've been, you know, making things successfully and, you know, busting out apps and doing all this fun stuff for years, and then someone came along and was like, you need to add this extra step, it would it would be a lot harder.

[00:57:28] KG: Yeah, exactly.

[00:57:29] SY: What advice would you have for people who are learning React or React Native?

[00:57:37] KG: It's hard.

[00:57:38] SY: Is it being hard the advice, because that's not advice that's just a comment.

[00:57:47] KG: I think I was very in the beginning, very abrasive to some of the concepts that React and React Native were introducing to me. So I think, just calm down a bit, take a step back, and be open to what you're about to learn, because on one hand it definitely is a little bit different from what you're used to doing in a typical web app. Well on the other hand it's also teaching you concepts that are going to be better for you coding-wise down the line.

[00:58:11] SY: Thank you so much for being on the show. You want to say goodbye?

[00:58:13] KG: Thank you for having me!

[00:58:15] SY: And that's the end of our fifth episode of Season One. So let me know what you think. Tweet me @CodeNewbie and send me an email hello@codenewbie.org, and also make sure to tweet these awesome guests. They love hearing from you. They love getting that feedback. If you're in D.C. or Philly, check out our local CodeNewbie meet up groups. They've got community coaching sessions and awesome events each month. So if you're looking for real life human coding interaction, look us up on meetup.com. For more info on the podcast check out www.codenewbie.org/podcast and join us for our weekly Twitter chat. We've got our Wednesday chats 9:00 p.m. Eastern time and our weekly Coding check in every Sunday at 2:00 p.m. Eastern Time.

[00:58:49] And don't forget: Monday September 18 is our very first mentor Monday, so check that out as well. Thanks for listening. See you next week.