Checklist to Deploy React Native to Production – The React Native Log – Medium

Checklist to Deploy React Native to Production -

  • Checklist to Deploy React Native to ProductionMany React Native developers came to mobile development from a background of web development (like me).
  • That’s one of the reasons React Native is appealing — it’s so much like the web.But because of this we often have a gap of knowledge, namely around bringing the app to production.
  • The web has its challenges but mobile development has a different set of challenges — challenges we may not necessarily be familiar with.I know this is something I struggled with so I wanted to put together a quick checklist of tasks you can use to successfully bring your React Native app to…
  • 🤑AndroidCreate Google Play Developer Account ($25)Add app icons to your app (I typically use this tool to generate all necessary sizes)Add splash screens to your app (I typically use this tool to generate all necessary sizes)Update the package name of your applicationGenerate the Signed Production APKCreate app in the Google…
  • Uploading a new version of your app isn’t quite as fast as it is on the web so you really want to make sure your app isn’t going to crash 😅Add basic offline support.

Many React Native developers came to mobile development from a background of web development (like me). That’s one of the reasons React Native is appealing — it’s so much like the web. But because of…
Continue reading “Checklist to Deploy React Native to Production – The React Native Log – Medium”

Checklist to Deploy React Native to Production – The React Native Log – Medium

Checklist to Deploy React Native to Production -

  • Checklist to Deploy React Native to ProductionMany React Native developers came to mobile development from a background of web development (like me).
  • That’s one of the reasons React Native is appealing — it’s so much like the web.But because of this we often have a gap of knowledge, namely around bringing the app to production.
  • The web has its challenges but mobile development has a different set of challenges — challenges we may not necessarily be familiar with.I know this is something I struggled with so I wanted to put together a quick checklist of tasks you can use to successfully bring your React Native app to…
  • 🤑AndroidCreate Google Play Developer Account ($25)Add app icons to your app (I typically use this tool to generate all necessary sizes)Add splash screens to your app (I typically use this tool to generate all necessary sizes)Update the package name of your applicationGenerate the Signed Production APKCreate app in the Google…
  • Uploading a new version of your app isn’t quite as fast as it is on the web so you really want to make sure your app isn’t going to crash 😅Add basic offline support.

Many React Native developers came to mobile development from a background of web development (like me). That’s one of the reasons React Native is appealing — it’s so much like the web. But because of…
Continue reading “Checklist to Deploy React Native to Production – The React Native Log – Medium”

Checklist to Deploy React Native to Production – The React Native Log – Medium

  • Checklist to Deploy React Native to ProductionMany React Native developers came to mobile development from a background of web development (like me).
  • That’s one of the reasons React Native is appealing — it’s so much like the web.But because of this we often have a gap of knowledge, namely around bringing the app to production.
  • The web has its challenges but mobile development has a different set of challenges — challenges we may not necessarily be familiar with.I know this is something I struggled with so I wanted to put together a quick checklist of tasks you can use to successfully bring your React Native app to production.iOSCreate a development account with apple (this can take some time for verification so do it early — $99/year)Add app icons to your app (I typically use this tool to generate all necessary sizes)Add splash screens to your app (I typically use this tool to generate all necessary sizes)Create a new explicit app id on developer.apple.com (this gives you more flexibility in the future rather than using a wildcard)Select your explicit app id as the bundle identifier in XcodeCreate development and production certificates for your app (Fastlane match can help with this)Create development and production provisioning profiles for your app (Fastlane match can help with this)Create app in iTunes ConnectUpload…Profit?
  • 🤑AndroidCreate Google Play Developer Account ($25)Add app icons to your app (I typically use this tool to generate all necessary sizes)Add splash screens to your app (I typically use this tool to generate all necessary sizes)Update the package name of your applicationGenerate the Signed Production APKCreate app in the Google Play ConsoleUpload…Profit?
  • Uploading a new version of your app isn’t quite as fast as it is on the web so you really want to make sure your app isn’t going to crash 😅Add basic offline support.

Many React Native developers came to mobile development from a background of web development (like me). That’s one of the reasons React Native is appealing — it’s so much like the web. But because of…
Continue reading “Checklist to Deploy React Native to Production – The React Native Log – Medium”

Mollie – Better payments

  • We make sure that all of Mollie’s packages and plugins, built by us and the community, are open-source and freely available.
  • So whether you prefer building on our API or a quick WooCommerce or Magento plugin, our host of packages and plugins will always allow you to efficiently integrate Payments and Recurring into any project.

Mollie builds payment products, commerce solutions and APIs that let you accept online and mobile payments, for small online stores and Fortune 500s alike.
Continue reading “Mollie – Better payments”

Full-stack React + GraphQL Tutorial – Apollo GraphQL

  • /App.css’;const ChannelsList = () = ul liChannel 1/li liChannel 2/li /ul;class App extends Component { render() { return ( div className=”App” div className=”App-header” img src={logo} className=”App-logo” alt=”logo” / h2Welcome to Apollo/h2 /div ChannelsList / /div ); } }export default App;create-react-app sets up hot reloading for you, so as soon as you save the file, the browser window with your app should update to reflect the changes:If it looks like this, you’re on the right track …3.
  • Let’s install Apollo Client and some helper packages that we’ll need to get GraphQL into our app: npm i -S react-apolloreact-apollo is a neat integration of Apollo Client with React that lets you decorate your components with a higher order component called graphql to get your GraphQL data into the component with zero effort.
  • Now with that, let’s add a few imports at the top of our App.js and create an instance of Apollo Client:import { ApolloClient, gql, graphql, ApolloProvider,} from ‘react-apollo’;const client = new ApolloClient();Next, we decorate the original ChannelsList with a GraphQL HOC that takes the query and passes the data to our component:const channelsListQuery = gql` query ChannelsListQuery { channels { id name } } `;const ChannelsListWithData = wrapped with the graphql higher order component, our ChannelsList component will receive a prop called data, which will contain channels when it’s available, or error when there is an error.
  • In addition data also contains a loading property, which is true when Apollo Client is still waiting for data to be fetched.We’ll modify our ChannelsList component to make sure the user knows if the component is loading, or if there has been an error:const ChannelsList = ({ data: {loading, error, channels }}) = { if (loading) { return pLoading …/p; } if (error) { return p{error.message}/p; } return ul { channels.map( ch = li key={ch.id}{ch.name}/li ) } /ul; };Finally, we have to replace the ChannelsList inside our App’s render function with ChannelsListWithData.
  • In order to make an instance of Apollo Client available to the component we just created, we also wrap our top-level app component with ApolloProvider, which puts an instance of the client on the UI.Your App component should now look like this:class App extends Component { render() { return ( ApolloProvider client={client} div className=”App” div className=”App-header” img src={logo} className=”App-logo” alt=”logo” / h2Welcome to Apollo/h2 /div ChannelsListWithData / /div /ApolloProvider ); } }Okay, we’re almost done!

GraphQL is a new API-definition and query language that has the potential to become the new REST. It makes it easy for UI components to declaratively fetch data without having to worry about backend…
Continue reading “Full-stack React + GraphQL Tutorial – Apollo GraphQL”

Surge VS GitHub Pages: How to deploy a create-react-app project

Surge VS GitHub Pages: How to deploy a create-react-app project  #ReactJS

  • Minimal configuration to deploy a project
  • npm run deploy will first build your project via npm run build .
  • After entering the project path, Surge will suggest a random domain to use.
  • Then use npm run build to prepare your project for deployment.
  • Surge VS GitHub Pages: How to deploy a create-react-app project

As a developer, there are several ways you can show off your skills to peers and prospective employers. Open source contributions are great. Blogging is great. But at some point you’ll want to get…
Continue reading “Surge VS GitHub Pages: How to deploy a create-react-app project”