My React Native Journey — part 1: Introduction, Resources

Hi, this is my notes about my journey when learning about React, React-Native. I’m building an mobile application to help manage employee, the app have these features:

  • Cool UI/UX, must easy to use with beautiful animation.
  • Scaleable, Testable
  • A HomePage to display employee information & company notifications
  • Chat: Single, Group, Send files, images, typing, emotions
  • Call: Voice, Video

So, hopefully, through my notes, I can share some of my experiences for those who using React Native.

A little bit about me:

I came from an iOS Developer background, a little bit of Android. I have 5 years programming experiences and don’t have much background on web, html, css or javascript, functional programming, etc. So, those who have the same background like me can might face the same issues when they start to use React : )

I’ve hear about React on last year but don’t have time or any change to apply it until now, I got a project that I can fully decide the technologies stack.

Why I choose React, React Native?

To be honest, I just want to try a new technology that people talking about it so much, and the philosophy of react: “Learn once, write anywhere” really convinced me. In some projects, I do on both iOS & Android as well and really tired of writing the same thing for both.

So, when seeing React Native was used by many big names like AirBnB, Facebook, and Skype. I realize the times is come, this will be a new technologies to building mobile in the future. You can check some showcase below.

Where I begin?

Ok, I don’t have any background on Web or JS, So, to speedup, I choose a course to learn, that the fastest. When learning from the master, you’re not only learn the knowledges but also learning how the expert coding, how they organize their code? what tools they use? that can save you a huge of time. so, some course for you to start with:

I’ve learned the 1st one of Plural Sight, still watching the 2nd one of udemy as a reference. For IDE, I choose Atom & Nuclide.

That is it! I skip the JS : )) because when you already know a programming language well, it’s no a big problem to start with JS. But I will learn JS later to have a better background.

Notes:

So here some notes that I figured out when learning React. Hope it might help you.

Terms

1/ React vs React Native: yes, they are different, when I’m starting to learn, I usually mention React Native as React when talking to people.
React: https://reactjs.org/
React Native: https://facebook.github.io/react-native/

2/ NPM vs Yarn: these are packages manager, recently, I was advices using yarn instead of npm. npm install vs npm install --save So, for some libraries you will find that install will have --save these are the libraries that not needed to ship when building the app, these are likes developer tools let say you can use eslint to check your coding style, but it’s not a function of the app, so you put it in dev

3/ Javascript, ES6: so ES6 is the new version of Javascript which provide some cool features, you can check here: https://babeljs.io/learn-es2015/

4/ React, Redux, Redux Thunk, Redux Logger: Quick notes: redux care about all State in the app, redux thunk help to wrap a Promise as an action

Resources

1/ Js.coach: this is like https://www.cocoacontrols.com/ if you are coding iOS: https://js.coach/

2/ Coding conventions: https://github.com/airbnb/javascript

3/ Code Base: https://medium.com/the-react-native-log/organizing-a-react-native-project-9514dfadaa0

4/ Debugger: https://github.com/jhen0409/react-native-debugger
When beginning, I debug through log : )) but it comes very messy when you add state in. So, use the tool above. You also need to add this redux-devtools-extension to be able to print the state. (I add the wrong one remote-redux-devtools and waste an hour figure out why there’re no data on the screen, because the way they are used so much likely)

Next

So, that’s all for the introduction, I will write one notes a week to keep track what I’m doing, next notes is about: navigation, styling tips

Like what you read? Give Tran Quan a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.