Skip to content

Instantly share code, notes, and snippets.

@madhums

madhums/react-native-ecosystem-reading.md

Created February 25, 2020 22:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save madhums/1ca0b9ad1ea776b43339b68310424f21 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save madhums/1ca0b9ad1ea776b43339b68310424f21 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. madhums created this gist Feb 25, 2020.
    19 changes: 19 additions & 0 deletions react-native-ecosystem-reading.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    Basically you need to get familiar with the react ecosystem. Here's some that you would be widely using

    - [React](https://reactjs.org/docs/getting-started.html): Some important concepts here are
    - [State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html)
    - [Lists and keys](https://reactjs.org/docs/lists-and-keys.html) - this is important in understanding how rendering works.
    - [Higher order components](https://reactjs.org/docs/higher-order-components.html)
    - I wouldn't say hooks is necessary to learn but it's something you will come across in a lot of examples. It's ok to not use them IMO.
    - Redux: I am assuming you already know about this
    - [Redux Saga](https://redux-saga.js.org/): for async api comms
    - [React Native](https://reactnative.dev/docs/getting-started): Pretty much uses the same react, redux stuff except for some new interfaces. Some important things to learn here are
    - [Styling](https://reactnative.dev/docs/style) - this is quite different from web. It requires good knowledge of flex box.
    - [Flexbox](https://reactnative.dev/docs/flexbox)
    - [Native components](https://reactnative.dev/docs/activityindicator) - provides you with an array of components
    - [Expo](https://docs.expo.io/versions/latest/): makes react native builds and development easy by offering a wide array of components on top of React Native.
    - Understand the different [workflows](https://docs.expo.io/versions/v36.0.0/introduction/managed-vs-bare/)
    - [React Navigation](https://reactnavigation.org/docs/getting-started): your go to navigation library for react-native. Navigation is one of the core functionality that gives a snappy UX so it's important to get familiar with this and stick to a native approach. (There will be some learning curve / boilerplate in integrating these libraries together but that's a one off)
    - [React Native Elements](https://react-native-elements.github.io/react-native-elements/docs/overview.html): some common elements used in an app. It's best to stick with standard elements and use theming to provide colours and such. You can also checkout material design equivalent of this so that you simply stick with a standard component library. Try not to style too much and stick with standard stuff.
    - Use a [Spacing system](https://github.com/hirokazutei/react-native-spacing-system): One of the things that heavily affects the user experience is inconsistent spacing, use a proper spacing system. [Learn more](https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62).
    - [React Native Community](https://github.com/react-native-community): has a lot of components that you can pick from - you will come across this while going through expo and react-native.