Orion's Book Reviews

Our project structure So far we have been cheating, we have added script tags to get our code to run.  As our project grows this will become unwieldy and maintenance nightmare.  Let us introduce Webpack. Welcome to Webpack We have one goal in this section, take our JavaScript out of index.html and use Webpack to bundle and inject it.  Create a src folder, add an index.js file to it, add some code to that file  and run the following command node_modules/.bin/webpack src/index.js public/bundle.js Note there is no space between node_modules, and .bin.  I made that mistake when typing it it in. This command tells Webpack to take everything in the first file, and copy it to the second file.  The magic sauce here is that it takes all the dependencies required to make the first file run, and copies them also.  Now it's as simple as including that file in our index.html file, and it should work Bundling files Using webpack to b...

This chapter opens up with the argument for Progressive Web apps (PWA).  Building an app in React does not necessarily make it a PWA, and building a PWA does not have to be done in React exclusively.  There are several sections upcoming, that while they sound exciting, really have almost nothing to do with the programming in any form or fashion.  The author uses a story of a friend who wants you to build an app, and will pay you lots of money for it.  I would skip the following sections: Setting the Scene The Problem The Other Problem Beginning Work A PWA consists of several parts.  Building an app that will work reliably from poor internet connections, to incredibly fast ones.  And secondly, they need to install fast, and be small. Why Progressive Web Apps? We need PWA's because JavasScript based apps, bcan be become very large and complex.  This leads to performance challenges.  We want the app to load as fast as possible, over the w...

Analogies Between HTML and Native Components Many of the React Native components are directly comparable to their HTML counterparts.  While they are similar, they they are not interchangeable.  You cannot share UI code between React on the web and React Native.  The JavaScript code is shareable as long as it only contains JavaScript.  You should put all your business logic in their own files to make converting your code from one to the other much easier.  The Component In React Native, text has to be enclosed in tags.  These are similar to the or tags you may be used to in HTML. The Component The component is almost the same as the HTML tag.  The Image component has a source property.  The source can be local or it can a remote resource.   Working with Touch And Gestures React Native provides API's for using touch and gestures.  Creating Basic Iterations with Button component is a simple API, it allows the s...

The purpose of this chapter is straightforward.  We will write our first app, and deploy it to a device. Setting Up Your Environment There are two approaches to developing React Native: create-react-native-app - used in this book most of the time.  It is quicker and easier installation, but only supports JS apps.   full react-native install - Allows writing Objective-C and Java components Developer Setup: Create React Native App npm install -g React Native uses the node package manager.  To us this, you will need to make sure you have Node.js installed.  Links: https://nodejs.org/en/download/ Creating Your Application with create-react-native-app create-react-native-app first_project This will install all the code you need to start writing a react native app. Previewing You App on iOS or Android Starting Your first project should be easy.  Run npm start From the terminal.  I had an issue starting my server, but the ins...

Anatomy of an interactive device An interactive device senses the environment using sensors and interacts with the real world using actuators. Sensors and Actuators Sensors and actuators are components that allow a piece of electronics to interact with the world.  Micro controllers can only process electric signals.  Our eyes are an example of a sensor.  They convert light into signals that are then processed by the brain.  In electronics, we can use an LDR (light-dependent resistor) or a photoresistor. Blinking an LED The first thing we are going to build is a blinking LED to test our newly installed Arduino.  The Arduino board is equipped with an LED on pin 13.  You can also connect your own LED to pin 13 on the board. LED components: K = cathode (negative) the shorter leg. A = anode (positive) longer leg   Anatomy of an LED We can start writing the code to make you LED blink once it is connected.  Write out the code, and c...

How React Native Works? React works with a virtual DOM.  React computes the necessary changes in memory, and only refreshes the DOM when necessary.  React Native works in a similar fashion.  The virtual DOM is replaced with Native objects on the mobile platform.  There is nothing special about Android, iOS, or the web.  Those are the bridges that existed in React Native.  People have written bridges for Linux, OSX, and Windows. Rendering Lifecycles The page renders, components are mounted to the DOM, and then React Components are rendered.  When a state or props changes, the difference is computed in the Virtual DOM, and React renders the new components. Creating Components in React Native React Native components are largely the same as the React Components Working With Views Instead of using HTML elements, you use platform specific components for React Native.  The most basic which is similar to a in HTML.   Using JSX JSX i...