Video details

Chain React 2018: Learning React Native as a Junior Engineer by Erin Fox

React Native

React Native is magical and it’s catching fire. What’s exactly is it? How does it work for iOS AND Android? Not only can you make universal components and save hundreds of lines of code, it allows developers to reuse code across the web AND mobile all with a smooth UI.


I am Aaron Fox on Twitter as Aaron Fooks looks like a spelling mistake. It's not that's where you could find me. And I'm here to talk about learning React Native. As a junior engineer, I got hired at Major League Soccer to build a brand new React Native app straight from the start. So I didn't know much about React Native. So obviously the first thing that I Googled was what is soccer? I'm not a big soccer fan, so I remember when I interviewed, they asked me, they're like, are you here for the soccer? Are you here for the tech? And I was like, I Googled what is soccer before I came to this interview. So I'm definitely here for the tech. But I love this gift because it's a lot like how I felt. I had no idea about React Native. I had no idea about being a software engineer. And I just didn't know much about much. So I could go on and on about being a junior engineer. But for the sake of this ten minutes, I just kind of cherry picked a couple lessons that I've learned and what my team has done to really have successful first timers learning React Native. So these are my five lessons of learning React Native. The first one jumping in headfirst. It's terrifying. It's so scary being a first time junior. I have so many questions, and we're about to build a brand new app for millions of soccer fans around the world. I didn't know that a game is called a match or I'm not sure what the difference between props and state is. So jumping in head first is number one, number two walk before running. So we use a lot of technologies kind of as a booster seat for us. I'll get more into that later. So we started out small and got a little bigger with that three writing checks your API can cash. So understanding API is where it comes from. It's like magic at first. You're like, wow, there's so much information here. Where is it coming from? So it's something that juniors have no much data about information about. And four best way to learn is to teach. Obviously, I love this one because it's not just a valuable lesson for juniors, but people that work with juniors teach juniors, mentor juniors. And the last one is stop, drop, and learn. And this is just kind of an environment that we started doing at MLS. And I'll get more into that in a bit. But I'm going to go ahead and jump right into the first one. Here's a couple of screenshots of our app that we were using or created. And I remember when they first gave us the Zeppelin slides, I was like, oh, my gosh, there's no way I can even get that MLS shield up there. I just had so many questions. Where is this information coming from? And what does two and two mean? And how can you play a soccer game and nobody wins? So there's a lot of questions like that running through my head. But usually juniors are too scared to ask questions. They think you're really busy, or they just have a million questions they don't want to ask too many. So just always know that we always have questions and you guys probably know the answer. You might not know the answer, but when you explain it to us, you might understand it more and we'll get it more. So there's just overall many questions going on. So obviously you might have noticed some of these components that Sam brought up earlier. So we had to really start small. And so the way that we did that was with Storybook, and Storybook was awesome. So coming in to the MLS, I only had about a week of React experience, so I didn't know much about how to build components or anything like that. So Storybook really gave me confidence to pump out these components that we're building for our new app. It's total in isolation. It gave me confidence I didn't have to get Xcode or Android Studio up and running. So it really, again, confidence booster. I think my first two to three months I just built components in Storybook. This is my very first component. It's a button and I had no idea how much goes into a button. You can see here we have the props coming in, the fill, color, the size on press. This is the way we laid it out. But Storybook, it really gets rid of a lot of the noise. And for first timers and for juniors, it's just great to have this one button, this one component that I'm working on so highly recommend it if you have juniors on your team or you're starting out with React native. Another way that we really got rid of the noise was using GraphQL. How many use GraphQL here? Great. I love GraphQL because when I first started out, I was like, oh, these queries are awesome. That's all it is. It just magically is appearing. So that's what I thought it was. I was just magically making these queries and they would show up. But it's not only just a very popular way of getting data for your app now, it's excellent for us to work with because I didn't know much about the APIs that we have and I didn't have to learn everything in the APIs. I was just able to do option space and then all my options were available for me. So GraphQL is really great for discovering what data you have available and kind of a learn on your own aspect of it. Again, the command space really saved me to be able to see what was available, and then I was able to add it to copy and paste it in our app. Here's an example of our simple Match query. I love Graph because the documentation has little bonuses written for you. So really awesome to be able to just figure out what information I could have for a match tile for a component while I'm building it out in Storybook. And it really gives you a lot of confidence that you can get all this information back for you and then you just copy and paste it and you know it's going to work. This is graphical what we're using. We use it probably every day at adolescent. It's just a really great tool that we use for everybody uses it from seniors, leads to juniors. So really awesome. Next part of this is I didn't do this all on my own. They weren't just, okay, here's Storybook, here's GraphQL. You're doing great. We did a ton of pair programming and I'm a huge fan of pair programming. We would pair junior, junior, junior, seniors, senior, senior. It was just great to have a buddy next to you to be able to ask questions or just see how they write their syntax. So pair programming is something that we did for first three months every day or we still do it now. It was more complex things, but if you ever have the opportunity to pair a program with anyone about anything, I highly recommend it and I'm just a very big fan of it. So sometimes we would pair program and it just kind of get a little crazy when you're pair coding and you just don't understand exactly what's going on and it just gets a little more complex. So then we would just be like, Whoa, Whoa, we need to have a teachable moment. And last night at the speaker dinner, someone was telling me that a teachable moment is a bad thing. They're like, oh, you really messed that up. We need to have a teachable moment about that. But unless we see teachable moment as a way to stop what we're doing, drop our laptops and really figure out what your issue is going on and figure out what you don't understand. So we would huddle in a conference room, have a whiteboard junior is able to ask any questions that we had. So it's great to have that safe space to be able to ask questions or say, Well, I thought we did it this way. I thought props and state were the same thing, but it was great to be able to have that environment to ask those questions and have different levels of members from the team there to answer them. So the first example I have here is I always thought React Native was just like one app that you just made and everybody could use it and everybody could have it. You could build anything you wanted on it. But we have a bright, Cove media player for Major League Soccer and the Bridges. I had no idea about bridges. So one of our teachable moments was learning about that. It could be anywhere from 10 seconds to ten minutes. It's just a really quick little teachable moment. Another one was GraphQL. So with our architecture and our infrastructure, I just like, where is GraphQL in this? Like, is it in the database or is it here? And this is when we were at lunch and all of a sudden we moved everything on the table and the ketchup packets became our APIs and the Mason jars are our databases and our happy server was a silverware and I just got it. I really got it. So it's just interesting to see to have these two moments out of the office at lunch. So it was just awesome to be able to have that experience and just that kind of team to ask questions when you're starting out with React native. So kind of to wrap it all up the technologies that we use, there's so many out there that are really benefit for juniors or first timers like react native storybook, pair programming and teachable moments, there's a lot of information out there that can really help your entire team. Not just juniors but seniors and teach to learn and everything like that. So in the end you might be very confused whether it's about soccer or whether you're just starting out as a software engineer trying to learn react native but eventually you start getting it and you're like, this is awesome. React native is actually very cool and then you celebrate because maybe you're not a junior anymore and you actually understand so that's all I got for you guys.