Become a React Native Developer in 2022: The *hardcoded* way
You can get it if you really want, but you must try, try and try...
Summary: This is a breakdown of what I believe to be a sure-fire way to start a career in mobile development, and especially as a React Native developer within a year.
Disclaimer: Clearly, there is no one way to become a React Native (or any type of software) developer. This is an approach that came to me only after a while, and was made primarily to assist people who are struggling with the "abundance of choice" problem in an age of information overload. So, chill...
Preconceived notions on writing this blog post:
1. You have a working knowledge of JavaScript.
If this is not the case, I beg of you to do this first, as anything from here onwards is an exercise in futility. While a knowledge of React is not necessary to learn React Native (it practically comes along with learning React Native in a sense), the same cannot be said about React Native.
2. You have decided to learn React Native.
You're not thinking about what to learn, but how to learn what you have decided to learn.
3. You want to get a job, (and possibly make a career) out of this within a reasonable amount of time.
I always peg that at a one year period because a number of people I have suggested this to do work full time in another section at the time.
4. You are using Expo.
Expo in 2022 has closed the gap between itself and React Native and the fact you can easily setup is crucial for the beginner developer. Of course, you can (and should) handle bare React Native over the course of your career. But, at the beginning at least, stick with Expo and switch to React Native at whatever point you feel comfortable. Here are resources to help you set up on Windows and MacOS respectively.
Introduction:
In 2022, it has never been as easy to learn a programming language and probably change your life for the better. This much is true. The internet has provided a wide array of resources, a decent amount of them free, or for very little payment. That becomes the problem though. In a world where statistically speaking, abundance is at its peak in recorded history, there has never been much more talk of people feeling stuck, spoilt for choice, feeling in a rut or feeling overwhelmed by the sheer weight of options they have that they become paralyzed in choosing what to do.
Now, I'm no psychoanalyst so I won't delve deep into that end. But this idea, of hard-coding what a beginner developer would want to learn was something that I approached quite clumsily about a year back. This was my bumbling approach in learning React Native and one I have suggested to many since, and they seem to have found it useful. So, in the quest of aiding the beginner become a 10x developer, here is my outline for exactly how he/she/(insert pronoun here) can make it happen. But first, mentality...
On mentality
Before you delve into the wonderful world of programming, the average person will have an idea of not only what he expects to achieve, but what he expects to go through. This is a normal human tactic in facing something. This is what brings about, from the developer perspective the rise of How I would learn to code (if I was starting again) videos on YouTube. Or the Mistakes I made when learning to code. The premise is rather decent. "Know this and avoid these and you could get to your destination in shorter time than I did." Indeed, some of these articles are excellent, here's one if you need it so bad.
Here's my qualm with them though, they don't help much. You are going to make the mistake and knowing the mistake you are making does not really help as it would appear to. Now, notes on tutorial hell and its companions are all good and fine, but these become a form of dependency on their own, numbing one when things get tough. Here's the kicker:
You will suck a lot as you start, then you will suck a little less over time.
Know this and know peace. The goal, if you want to frame any in your learning journey (that never really ends, mind you), should be what Artsy here* calls a T- developer. This means you should have knowledge of a wide variety of things even as what one would call a junior developer, but still be able to claim (pseudo-) expertise in one particular area.
"The difference between a senior developer and a junior developer is simply that a senior one has seen something like it before."
This speaks to gaining a deep knowledge base.
Finally, the steps to be provided here can be based on one advice I received, that I will blog about separately soon. But here it is: "Read the source, Luke" To write great code, you must read great code. This is similar to the great literary geniuses, authors and poets who we all know about, even if we may have never seen them or are not with us on earth at this time. It is no secret that the programmer over the course of his life will probably read way more code than he writes, but writing tends to emphasized more to the beginner. The basis of what follows may appear contrarian but here is its own basis: To gain that wide knowledge base that you seek, it would be far more gainful to read great code (and understand it), then implement your learnings than to just go ahead and write your own. You simple will cover more of a base that way anyways.
A final note is this model you should approach every learning with. I call it the R-B-R model and it stands for Read, Break, Repair. Here it the breakdown:
Read
You go through the codebase or follow the video tutorial as best as you can and implement what you have parsed through. Get it working.
Break
Now, it is time for a change...a BREAKING change. See that boolean state value, change it. What happens? See that input, add another and change a few props. See that component being imported, switch values.
Repair
In repair, we don't just revert to how it was before breaking. We create something different. It can be as simple as changing the color of the button or a bit more complex like animating that button. As you gather more knowledge, repair becomes transplanting the technique from one piece of code. At the end, you create a new piece of code that is its own thing but is the result of multiple existing things.
Topics
- React basics.
- Styling (Flexbox).
- Navigation.
- Global state management (e.g. Redux)
- Data manipulation (e.g. fetch)
- Version control (Git, GitHub)
- Authentication and Database management (e.g Firebase).
- Animations.
- Static type checking (TypeScript)
- Testing.
- Performance optimizations.
- Debugging, among others.
Steps
So here we are, finally. Grasshopper developer, this is your hard-coded path to React Native awesomeness. The learning steps are as shown below.
1. React core concepts:
In particular, these are
- JSX
- Props
- State
- Components(function and class.)
The React (and React Native) documentation do a pretty neat job of getting the point across about these so read this first. This probably should have been obvious with all we have said till this point, but a lot of reading will ye be doing on this path you have chosen, grasshopper.
2. Tutorial:
Your first guided tutorial will be following this 2-part series by a YouTuber named Matt Frances. You will build a ToDo app.
Things learnt: state; props; component-based approach; CRUD functionality.
3. Tutorial:
Your second guided tutorial will be from React Native School, a website run by Spencer Carli. In this, you will build a currency converter.
Things learnt:
- navigation (stack)
- context
- core components usage
- folder structure
- working with system keyboard
4. Tutorials:
This is a two-fer and it is to be your intro to version control. The first is a short video from FreeCodeCamp that introduces you to the key commands you will need at this point.
It should have already being mentioned but you should create a GitHub profile at this point, and move all your previous code into this profile in their separate repositories. The goal should be more than five contributions per week, though on this track you should be able to far exceed that.
Another tip I will drop here is the use of what I call the TIL (Today I Learned) file. This will be a private repo in your GitHub profile that will contain only the README.
Here is it's use. Everyday, document all you have learnt, every tip, trick, StackOverflow answer in short concise snippets that you can easily refer to. Add the date and key topic to each entry every day. Go through it every day after you add each entry.
This does two things:
First, it reinforces all you are learning by constantly reminding yourself of it, and
Secondly, it contributes to your contributions chart which is just great.
The second video goes deeper into how git does version control. It is by a Professor from MIT who does a great job explaining the whole concept. I suggest documenting your learnings here and posting them somewhere online. The lecture comes with a list of git reference materials that may interest you. But overall, with git and GitHub, simply googling something whenever you're stuck, and then adding it to your TIL file is great for the beginner developer.
5. Codebase read:
It is time for your codebase. This is a UI clone by a developer named Caleb Nance. This will be your first experience with a lot of things, so do not forget the RBR model and simply follow the flow of the codebase from it's entry App.js file.
Things learnt:
- larger scale use of 3rd-party react native packages, nested navigation (stack and bottom-tabs)
- caching & preloading files
- custom fonts
- linting with eslint and prettier + type checking prop-types
- class components
- hooks
- animations.
Note:
This will be a lot so take care to work carefully through it. It is probably prudent to keep this file private while working through the Read section of our model. Only when you decide to make significant changes (which could be much later) can you decide to make it public. It is someone's work after all and we don't want to appear to pass it off as ours. An acknowledgement of the original is not too hard done.
Here, google starts to become your close companion. For every thing that seems strange, every line of code for a package that seems foreign, simply google it and see what comes. A good amount will simply be to take through the documentation, most of which are quite explicit in this project.
6. TypeScript and DefinitelyTyped:
In the world of React Native development, the question is no longer if one should learn TypeScript but when. This video has the added benefit of showing one TypeScript as well as being a full-on introduction into the world of animations. It is the React Native Fashion series by William Candillon, a prominent developer in the community, especially as it comes to animations. Google is your friend here. Again, I say...
__"Google is your friend"__
As an accompanying guide, I link you to this cheat-sheets developed by a pair of awesome developers. It was written for React but the benefit for the React Native developer is immense still.
The second part of this is what this article linked here discusses. For your next task, should you choose to accept it, you will add your own entry to the DefinitelyTyped repo. By definition, this should be the first contribution to open source for you. Creating your own TypeScript type definition files (.d.ts) not only helps in sealing your knowledge of static typing in React but it serves as the solid gateway into open source, which is where we're headed next.
Before that, see below, a list of code-bases to study. It has been graded by a three-level system and it is for reference from this time onwards. You are not expected to have a codebase read on this part.
7. Codebase read:
Congratulations to you if you managed to complete the last assignment. You have to be feeling good if you were about to have a decent understanding on how everything came together.
Coding assignments (and other technical assignments) are a big part of the hiring process. The following codebases were answers to what I have found is a common task for startups: to build a weather app. Here is the repo. Have a gander at the code and (more particularly) the way this developer made issues, pull requests (PRs) and tests. You do not need to understand the latter, we will address it below.
8. Open source:
Here is where the "leash" loosens, because even this hard-codedness can only go so far. By the time you get to this point, this should be your full-time job (at least full-time for the time you allot to programming.) This is also in two parts:
- Publish an app to the app store(s): I solidly believe that anyone that has gotten to this point can go ahead with this. Please understand that this does not mean all you need to know to build one has been covered. Instead, it means the mentality needed to conquer any and all concepts going forward have been accorded to you, grasshopper developer.
A suggestion for the fellow(s) that may not be able to afford the fees for either play store. This does not hinder. Building this project with Expo creates an avenue to still showcase your work. Make the repo public and well-furnished with good code practices and simply share the published QR-code on your repo or blog or wherever for people to see.
- Make ~5 significant contributions to projects: Open source is a crucial part to the React Native community. Of course, the fact that the framework itself is an open-source project by Facebook (Meta if you're being pedantic) and the vast majority of packages employed in any given app are also open-sourced. So, without further ado, here are 4 open-source links for the beginner developer:
Note that these were simply searched for on GitHub. The more organic way though would be for one to simply contribute to the package he/she/(insert pronoun here) has experience with. Again, some of these things are not to be hard-coded after all. Also note that you are not restricted to just React Native packages, which is why a good understanding of JavaScript is encouraged. The advantages of this step are simply humongous. So go on then.
Concluding notes
There are two key areas that we have not considered above, but if we were to number would probably hang between nos. 7 and 8. They are performance optimizations and testing. Again, a simple resource for each I believe is good to have a going understanding of. Performance optimizations - The good people at Callstack, a Polish-based React Native consultancy group and open-source enthusiasts released a free e-book that handles this subject much more than any I have seen on the topic. Simply download, read and be enlightened, young grasshopper.
Testing
For this, the recommendation is a set of tutorials (and videos) at the website reactnativetesting.io. For the eagled-eyed reader that has followed so far. You will notice that testing has already being covered in part by some of the codebases we have come across. This just entrenches whatever you may have known till now.
Finally, for the developer reading this who is definitely not a beginner, here is an article I think you will like as I have come to. This medium post was curated from a reddit post which is pretty interesting from the point of yours truly as at times, the "wisdom of the crowd" is the best advice.
All the best to you, young grasshoppers. I wait to hear of your massive successes. Till then...
Cheers.
Links: Gist to React Native codebases as mentioned above.