Awesome Expo Apps for React Native – BlechaTech – Medium

Awesome Expo Apps for React Native  #reactnative #reactjs #reactjs

  • Awesome Expo Apps for React NativeI’ve been working through creating an app that I need for my kids baseball activities during the past month and I’ve been really impressed with the toolset that the Expo team has put together.
  • It’s much nicer for me if this doesn’t have to go through the app store for development and testing purposes.JavaScript tool set — I’ve decided to use JavaScript as my primary language for the next bit unless there’s a specific reason not to use it.React — I’m spending most of my front end development in react these days, and I’m very happy about it.
  • The mental model is fairly straightforward and translates from web to mobile gives you an expo app by default.
  • Check out the expo explanation video:I decided I wanted to keep track of the expo apps I’m seeing in publish and the added bonus that they’re typically linked with a github account.
  • The first two are (authors and notes are cited in the github repo, link below):Seattle JS Conference AppGraphQL NYCI’ll keep adding to the list as I find new expo apps and PRs are welcome!Photo Credits:

I’ve been working through creating an app that I need for my kids baseball activities during the past month and I’ve been really impressed with the toolset that the Expo team has put together. Given…
Continue reading “Awesome Expo Apps for React Native – BlechaTech – Medium”

Using Horizon/RethinkDB with React

  • Horizon, which is built on RethinkDB and by the RethinkDB team, facilitates common application development tasks like backend setup, real-time data transfer, security and scalability.
  • This tutorial will give you an introduction to Horizon and RethinkDB while also showing you how to build a simple app with Horizon and React.
  • Before hitting the code, let’s learn a few basic Horizon concepts:

    Horizon groups data into horizon collections and each collection is backed by a RethinkDB table.

  • Here’s a visual to help you make sense of the data flow in this app:

    Note that any change in the data is sent from one React client into Horizon and Horizon sends it back to all React apps so they can update their view, this flow makes sure that all clients are always watching the same without inconsistencies.

  • Our app will use two Horizon collections, one for the “we need list” and other for the “we have list”.

Horizon is an open source Backend as a Service (BaaS) that allows developers to easily build data-driven web and mobile applications. Horizon, which is built on RethinkDB and by the RethinkDB team, facilitates common application development tasks like backend setup, real-time data transfer, security and scalability. Horizon can be run locally, on a private server or in the cloud.
Continue reading “Using Horizon/RethinkDB with React”

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”

Progressive Web Apps, let your users know you care about them

  • Note: Progressive Web Apps are best experienced in Google Chrome on an Android device.
  • As Google states, a Progressive Web App has to be:

    If you want to build a new Progressive Web App from scratch, you have a few ways to get started.

  • To explore other ways to create a Progressive Web App, Addy Osmani from Google has created HNPWA, where you will find a lot of examples and code bases.
  • Install the Lighthouse extension for Google Chrome, and run it on the page that serves your newly created Progressive Web App.
  • Since coining the term Progressive Web Apps, Google has done a lot of collaborations with big companies to discover the real power of the philosophy and practices that come with it.

What are progressive web apps? Why should I use them?
Continue reading “Progressive Web Apps, let your users know you care about them”

Using JSX and React #React #reactjs #javascript #Framework #programming

Using JSX and React  #React #reactjs #javascript #Framework #programming

  • You use JSX within React code to easily create components for your apps.
  • Here is an example of JSX being used to render HTML:

    To create a component, just use a local variable that starts with an upper-case letter, e.g.:

    Note: There are reserved words in JSX, as it is essentially JavaScript after all—so keywords such as and are discouraged as attribute names.

  • Form creation is easy with JSX and sub-components, for example:

    To make this work, you must create the sub-components as attributes of the main component:

    To use some JavaScript to create a result for use in an attribute value, React just needs you to wrap it in curly braces like so:

    You can also just pass a boolean value for form attributes such as , and so on.

  • First we use to establish signalling of a new user connected via the as so:

    Then, to connect to the PeerServer, we use the following:

    We then listen for events via the method:

    We also have our JSX inside components in the directory.

  • Now it’s as simple as pushing your code to heroku:

    Once the push is finished, you will be able to start your web service with the following:

    Now just visit the URL provided, or as a shortcut use the command as so:

    You’ve learned how to create JSX components and interface them with React, with a detailed example of the chat application.

What You’ll Be CreatingJSX is similar to a mix of XML and HTML. You use JSX within React code to easily create components for your apps. JSX transforms into JavaScript when React compiles the…
Continue reading “Using JSX and React #React #reactjs #javascript #Framework #programming”

Deploy create-react-app with PM2 – Ygam Retuta

Deploy create-react-app with PM2  #expressjs #pm2 #react #javascript #reactjs

  • js on localhost:3000 if no port is providedSteps:npm install -g pm2cd into your project directory then pm2 ecosystemedit ecosystem.config.js with:4.
  • setup: pm2 deploy ecosystem.config.js staging setup6.
  • deploy: pm2 deploy ecosystem.config.js staging7.
  • setup whatever proxy server you want to use.
  • here is an example for nginx:listen 80 default_server;server_name _;location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Host $host; proxy_set_header Connection ‘upgrade’; proxy_cache_bypass $http_upgrade; }Gotchas:npm command not found: issue publickey:

Deploy create-react-app with PM2. we want to deploy a create-react-app on a virtual server because for some reason we cannot use a cloud-based deployment.
Continue reading “Deploy create-react-app with PM2 – Ygam Retuta”

5 Reasons Web Developers Love React Native

5 Reasons Web Developers Love #ReactNative @shoutem #webdev #reactjs

  • As you probably know, there are a few other multi-platform solutions, like Cordova and PhoneGap, but they come with a price: the price of relying only on the phone browser and its built-in JavaScript engine, which is often way slower than running native code, like React Native does.
  • Another thing that will make things, if not familiar, then definitely easier to work with is Nuclide, an integrated development environment (IDE) that Facebook is building to give developers a first-class developing environment for React Native.
  • Since this is all pretty new, uncharted territory, a lot of developers are doing their best to build something useful to others and unveil the true potential of React Native.
  • The biggest, most active groups is React Native Community, which offers daily posts about tool kits, components, new apps, and answers to questions about React Native, from basic questions to serious developer problems.
  • That’s where you come in: a new React Native developer, resolving problems and bringing new ideas to this fast-rising framework of the future.

React Native is the future of modern app development. The framework is not just for web developers, the entire development logic uses modern principles. React Native workflow is efficient, easy, and quick to learn and more platforms are using it.
Continue reading “5 Reasons Web Developers Love React Native”