Beginning with React Native

[saurabh.ka...@gmail.com]

Hello! 

A few days ago I wrote a few bullet points on Zulip chat for people who were just beginning React Native and wanted to contribute to the project. I am, as of now in the process of creating and pushing an official and proper documentation on how to begin with React Native for people coming from Android or iOS experience( Recently, the collaborators of Zulip announced the fate and plans of Zulip's Native android app so this will help native Java developers) . I have a couple of PR's related to issues I worked on which involved a wide variety of concepts of React and I was a total beginner in React about 2 months ago, hence my experience would be reflected in this documentation. If anyone has good links related to Javascript, JSX, RN, React you can share those with me on my email above and I would compare them with my resources and see whichever's better. So, here are the crude bullet points : 

Learning from my mistakes : 

Now, everyone like me who is working on the RN app but is a beginner is usually coming from two types of backgrounds: either knowing iOS/Android native development or knowing React/JSX for the web.  Now, about two months ago, when I started learning RN, I came across the following hurdles and made the following mistakes. So, you can learn from it and understand RN efficiently.                                                             Note: For, resources the Official React Native Docs and Awesome React Native on GitHub is what I would recommend. Like you can see other tutorials, but these two are the best and should always be by your side.                              

1. Before everything, why is React Native used? Why does Zulip intend to go towards cross platform? This lecture by Joe Fender answers everything, must see: https://forwardcourses.com/lectures/138

1. The three pillars of React: Components, Props, and State. Along with ES6, these are the first set of concepts that native developers should learn and understand totally. Also, people with an experience in React can once revise these concepts as they are vital. 

2.  Styling - Then, you can move towards Views, ScrollView etc. but the main thing here is Flexbox and it's working. Many people are willing to develop for the zulip app by contributing to the UI design. So, you can master this aspect so as to contribute to the fullest.

3. Navigation - something that I took very lightly and because I didn't know it well, had to pay later on. Navigating through pages in an app, how data flows between them is important and can be understood if given enough time. Zulip uses NavigatorExperimental which, in my personal opinion, is not properly covered in the official Docs. Hence, after learning Navigator, you can use this two-part article to get started on NavigatorExperimental : https://medium.com/react-native-training/first-look-react-native-navigator-experimental-9a7cf39a615b#.k7xeqws24

4.  Networking: Networking is also important as it involves fetching of JSON data. Apart from learning the official Fetch API, a third party library like axios(I feel, it's a bit better to use) should also be learned, as it can be handy anytime.

5. Redux: After all of the above, you can move on to handling of states and immutable state tree using Redux and using reducers. For this, the official docs are great and a video series by egghead.io is also excellent to get started with Redux.  

Now, when I saw Zulip's codebase initially, the first idea that popped into my head was that I had to learn RN + flexbox + Redux perfectly and then only I'll be able to construct a project idea for myself and solve issues. But it is not so! If you have learned the first two or three steps mentioned above, you can solve many issues easily, while still learning other stuff. So, I feel that by learning a few concepts, then looking and solving issues can help you strengthen your previous concepts and you'll be learning new stuff simultaneously. Hence, please look into this approach while learning. 

Another note : If you are a bit new to git and want to understand how to contribute to Zulip, you can learn git through beginner tutorials and then solve a few documentation(Markdown is required but) or translation issues and then merge them for Zulip, so that you get a practical  idea of how to contribute code to Zulip, while at the same time, you'll solve a few issues and improve Zulip :)

Hope these tips will be useful to all the newbies, if not Ahh well, no worries! You can have your own approach and master RN.

Happy Coding! :)

[Tim Abbott]

This is great, thanks for doing this writeup :).

We should integrate this advice into the React Native project's developer documentation.

--
You received this message because you are subscribed to the Google Groups "zulip-devel" group.
To unsubscribe from this group and stop receiving emails from it, send an email to zulip-devel+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/zulip-devel/a79e1b5f-35c8-4348-937e-4e3f227a3988%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.