1. Not doing more research and jumping on the first react-native tutorials I saw

During my time at bootcamp, I quickly discovered what my learning style is. I code to learn and even if I don’t understand what I’m typing at the time, I piece together what different lines do and how they work together to produce a cohesive project. This was all and well while I learned the basics of heavily documented frameworks and libraries however this would prove to be my downfall as I attempted to make my first React Native app. I turned to Google and Youtube to find a quick and easy tutorial to get my iPhone simulator up and running. I had four days to piece together an app to demonstrate at the end of the hackathon in front of my peers. After the first day of working on this and doing some brainstorming and research on React Native, I was getting a red screen of death on my Xcode Simulator which leads me to a very important piece of information I wish I knew before jumping on the first tutorial I found.

2. Starting up React native for the first time and not realizing there are a couple different ways to do this

There are two ways of initializing a React Native app from your command line: |create-react-native-app| and |react-native init|. I had no idea there was even a difference between the two which is why when I was following tutorials and documentation all together, I was looking for ios and android folders in my filesystem that you don’t get with create-react-native-app, which is what I used when I started up my app. CRNA also uses the Expo client which makes getting an app up and running as fast as possible. Remember how I said I didn’t do enough research? Expo docs have a specific page called ‘Why not Expo?’ which outlines certain scenarios where Expo may not be the right choice to use depending on what your goals are for your application. One sentence in the docs particularly spoke to me (post hackathon of course) that said ‘The intention of this document is to outline some of those cases, so that you don’t end up building an app with Expo and getting frustrated when you encounter an obstacle that you can’t overcome without detaching to ExpoKit or ejecting to using React Native without Expo at all.’

In the next section I will go into ejecting a little more but basically what I learned from this is that I have 20/20 hindsight. So if you ever decide to learn a new library, framework, or API, READ THROUGH THE DOCS. To give you a little more context to this issue, for a my project I wanted to create an interval training workout app that either played a sound or played text to speech on each interval. I went through package after package and followed the installation instructions step by step (and there were not that many steps) but had no luck and got the red screen of death again. This is one of the big issues when it comes to using CRNA opposed to react-native init. With CRNA and Expo, it is much easier to set up your project quickly but with those restrictions unless you eject the app. On the other hand, you do not have to worry about ejecting with react-native init but this method takes more development time. For more information differentiating the two methods, I found the following thread to be extremely helpful when deciding on which one is best for your needs:

Difference between react-native-init and create-react-native-app · Issue #516 · react-community/create-react-native-app

3. Eject… don’t do it… unless you know what you’re doing

So this is only an issue if you decide to go the create-react-native-app route like I did. It’s much faster development but you cannot user native modules unless you eject which if you know what you’re doing, by all means go for it. I for one did not know what I was doing and followed a tutorial that said to eject my app in order to incorporate sound into it. This is where I lost half a day trying to revive my app from the dead. I CTRL-Z’d but no luck. If it weren’t for the time constraint, I would later find out that I just needed to rework my entry point and filesystem so that everything was pointing to the correct files but the other part of this lesson was to COMMIT OFTEN. I got so consumed in writing code that I neglected the many git commits I should have been making to my repo that I had to save all the functionality I had after my last commit and before ejecting. Thankfully I did save my initial set up with the infamous ‘Hello World’ screen and was able to quickly rework my files back into that version, this time with many commits.

4. If you are familiar with React.js, the tags are very similar but not the same in React Native

There’s not much too this point but it is definitely worth making a note of. Rather than your standard <div>, <h1>,<p> tags etc., React Native has their own set of tags such as <View> and <Text>. You will quickly become familiar with them but also the properties associated with those tags are slightly different as well. The following is a small snippet from one of the screens for my app:

<View style={styles.selectionContainer}>

  <TextInput

  style={styles.right}

  onChangeText={input => this.handleChange(input, 'intervalTime')}

  defaultValue={this.state.intervalTime.toString()} />

</View>

Take a note of how each tag has a style property. This is very similar to how you would normally use CSS for styling but rather than applying to the child tags, it applies to the associated tag directly. To do this, simply import StyleSheet from react-native and create a stylesheet which will look something like this (note how the style is the same as CSS styling except in camel case):

const styles = StyleSheet.create({
  selectionContainer: {
    flexDirection: 'row'
  }
});

Getting used to the different tags for React Native was probably one of the easier parts for me but of course no one is perfect and I got stuck on being able to do your typical event handlers. I definitely was not having the brightest moment and rather than onChange that normally comes as a built-in property for input tags, the React Native counterpart was onChangeText which you can see in the first code snippet. This was another instance of my refusal to thoroughly read the docs beforehand really caught up with me here.

There are definitely a lot of obstacles that I came across when creating a React Native application but in the end I was able to get a working app with about half of the functionality that I had planned out in less than four days. Although it took me awhile to really understand how to set it up for my first time, I can say with confidence that my second React Native app will go much smoother which is what makes the learning process so rewarding and enjoyable even through all the suck.

At the time I was just looking for something to do to stay productive while on the job hunt for a position in finance. I went through interview after interview with no luck but deep down I had a feeling a big part of my struggle came from my inability to go in and pretend like I was passionate about something that I honestly had little interest in. I felt like I was at a crossroad and as a very anxious person, I had to deal with the anxiety that came with not knowing what my future looked liked. Meanwhile I was learning basic Java in one of my classes which felt like pretty dry material at the time because of how slow and dragged out the curriculum was. Despite this, I still enjoyed the labs I had where I wrote simple code and keeping myself preoccupied helped a lot for my mental health.

It was around this time that I started going to local animal shelters to look at kittens but I wasn’t serious about getting one until the the adoption fee was half-priced for the month of October because the shelter was getting a large influx of kittens so they needed to make space. I wasn’t sure if I could take on the responsibility of a pet since I never had one growing up but the more I visited the shelter and did research, the more I felt like I was ready. So on October 29th, 2017, I adopted a 3-month-old medium-haired calico and renamed her Cheeto. I didn’t realize how much of an impact she would have on me but she has been with me for the entirety of my coding journey. She became the support I needed to make the leap and change my path.

After some research I found the Grace Hopper Program, a 13 week immersive coding bootcamp at Fullstack Academy in New York. This is the part where I tell you that I suddenly fell in love with coding and decided to pursue my dream of becoming a software engineer at a big prestigious firm like Google, but it wasn’t that simple (If anyone from Google is reading this, I would really love a job, thanks). For as long as I could remember I always lacked the confidence I needed to really excel at something. From soccer to piano to my short-lived interest in graphic design, I never felt good enough and would keep myself from putting in a little extra effort to be great. I was always average, at least in my eyes, and I would talk myself down and compare myself to those who were better than me so naturally I had some reservations about doing a 180 to programming. I was intimidated by the whole field and coming from almost no experience or exposure put me behind everyone else coming out of college with a degree in computer science.

Finally I decided to make the leap (as you already know) and went through the online Bootcamp Prep provided by the program that taught Javascript basics before later applying/interviewing and eventually being offered a spot in the February cohort for the Grace Hopper Program. Let me just tell you now, the online foundations portion of the program that is required for the three weeks leading up to the immersive portion caught me off guard. My confidence was definitely taking a hit and it set me up for a very nerve-racking first week of Junior phase.

In the six weeks of Junior phase, Grace Hopper went from this scary fast-paced bootcamp to my second home full of friendships I never imagined having (I cringed writing that but it’s true). I learned how incredible and welcoming the tech community is both within Fullstack Academy and outside. I found comfort out of one of the most stressful and uncomfortable positions and realized that I finally found the passion I was lacking for so many years. I did more than just get by during Junior phase, I killed it and not a single mental breakdown or tear was shed (special shoutout to Cheeto for being there after all the 10–14 hour days). By the end of the 6 weeks, I was able to create a full stack single page application all on my own using Javscript, Node, Express, Sequelize, and React-Redux (still with a distaste for CSS that I don’t see going away any time soon). And with that, I comfortably move on to Senior phase and so far so good.

Stay tuned for my next post where I fought my first big monster that is React Native, and won… well sort of.