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’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:
iOS and Android App Development from scratch - build fully native mobile apps ridiculously fast!www.udemy.com
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React…egghead.io
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.
So here some notes that I figured out when learning React. Hope it might help you.
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 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
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
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)
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