{
  "$type": "site.standard.document",
  "path": "/getting-started-with-react-native-and-redux/",
  "publishedAt": "2017-02-26T13:38:42.000Z",
  "site": "at://did:plc:6gssgguzeecdttuw4gpdshg2/site.standard.publication/self",
  "tags": [
    "react",
    "react-native",
    "redux"
  ],
  "textContent": "It's been far too long that I've been saying to myself: \"Brooks you really should give React Native a try\". So I've whipped up a quick 'how-to' article from my first foray into React Native. In this tutorial, we will create a new React Native project, integrate Redux and deploy on Android and iOS. To keep this first project simple we'll be remaking the Redux counter example.\n\nGetting Started\n\nYou will have to install and configure React Native. You can find that documentation here: http://facebook.github.io/react-native/docs/getting-started.html\n\nI recommend setting up both Android and iOS if you want to see the final product on both platforms.\n\nWe will call our project 'ReactNativeCounter'. To create a new project use this command:\n\n[Code block]\n\nIntegrating Redux\n\nWe will need Redux and React Redux. Redux integrates smoothly with React Native so you can pull these in via npm.\n\n[Code block]\n\nDesign\n\nWe will cover 5 basic React/Redux concepts. In three sections:\n\nActions\n\nStores/Reducers\n\nContainers and Components\n\nActions\n\nAn action is sent when something has happened that will change our applications state. In this example, we will have 3 actions: 'INCREMENT', 'DEINCREMENT' and 'RESET'.\n\nStores and Reducers\n\nA store is an object that represents the state of your application. In our case, the store for our application is simple a Number. This is the current counter value shown in the application.\n\nReducers handle actions. They are responsible for updating the applications state based on the action being handled. Reducer functions must be pure functions.\n\nContainers and Components\n\nTo increase testability and ensure we properly separate concerns, I recommend using containers and components when creating renderable parts of a React application.\n\nContainers\n\nContainers are responsible for fetching data and rendering their components.\n\nComponents\n\nComponents are responsible for rendering data to the screen.\n\nWhile our application is simple this is a React best practice so I've included it anyways.\n\nApp Layout\n\nWe'll add all our app related code in a new folder called 'App' in the root of our newly created project. Create theses folders as you follow along with the code below.\n\n[Image: Screen-Shot-2017-02-26-at-8.17.00-AM.png]\n\nThe code!\n\nFirst, we will look at our reducer and the store it creates:\n\n[Embedded code (GitHub Gist)]\n\nThe reducer handles 3 simple actions. We should also write some tests for our reducing function.\n\n[Embedded code (GitHub Gist)]\n\nOur reducer isn't that useful unless something generates actions. We will bind our actions and app state to our components via their containers.\n\n[Embedded code (GitHub Gist)]\n\nNow our component only needs to render its view and bind the action generating functions we passed into it.\n\n[Embedded code (GitHub Gist)]\n\nNow that we have all the moving pieces, we can wire them together. In App.js we connect our application to the Redux store and render a CounterContainer.\n\n[Embedded code (GitHub Gist)]\n\nNow all that remains is configuring React Native to render this application for iOS and Android. There are two index files representing what each operating system will render. In our case we want both to render the application we designed above. This will be the code for BOTH index.ios.js and index.android.js.\n\n[Embedded code (GitHub Gist)]\n\nIf you have already configured Xcode and Android Studio you can see the resulting by running:\n\n[Code block]\n\nClicking the up and down buttons will change the counter, clicking the counter will reset it to zero.\n\n[Image: Screen-Shot-2017-02-20-at-1.32.02-PM.png]\n\nIf you want to check out the code it's here on GitHub: https://github.com/brookslyrette/ReactNativeCounter\n\nHappy Coding!\n\nRead the original post with all embeds and interactive content at https://rants.broonix.ca/getting-started-with-react-native-and-redux/",
  "title": "Getting Started with React Native and Redux"
}