Introduction To React - Officially Published!

It has been a while since I posted that I was writing a second book, Introduction to React. Today it is officially available in both ebook and paperback formats. I hope you enjoy reading the book and the introduction to React as much as I enjoyed writing it.

Introduction to React teaches you React, the JavaScript framework created by developers at Facebook, to solve the problem of building complex user interfaces in a consistent and maintainable way. React.js shrugs away common front-end conventions in an effort to make things more efficient – use Introduction to React to learn about this framework and more today.

You will learn what React is, and why it was created to solve the problems it does. You will get to know the React API, and be introduced to React’s specific JavaScript extension, JSX, which makes authoring React components easier and maintainable. You will also learn how you can test your React applications and the tools you can use while building. Once you understand these core concepts, you can build applications with React. This will help you cement the ideas and fundamentals of React and prepare you to utilize React in your own use case.

What you’ll learn

How to use React to maintain complex user interfaces in an efficient way
How to integrate existing user interfaces and move forward with React
How to manage application architecture using Flux
How to easily utilize JSX, React’s JavaScript extension

Who this book is for

Introduction to React is for a web developer who is comfortable writing JavaScript and CSS. You will apply JavaScript to build web pages that utilize the paradigm shifting React framework. Introduction to React will provide you with the tools to create maintainable complex user interfaces.

Trying to Run React Native Android on Windows

React Native for Android was released yesterday. As soon as I spotted the release I wanted to give it a whirl on my work PC. I did the npm install and got started right away, only to find that the init command was failing. I expected this because officially React Native isn't supported on windows but there is this master tracking issue for this in Github =>  https://github.com/facebook/react-native/issues/2693 ... anyway.. so I got an error:

events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: spawn npm ENOENT
    at exports._errnoException (util.js:837:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
    at onErrorNT (internal/child_process.js:344:16)
    at doNTCallback2 (node.js:429:9)
    at process._tickCallback (node.js:343:17)
    at Function.Module.runMain (module.js:477:11)
    at startup (node.js:117:18)
    at node.js:951:3

Not being one to give up right away I wanted to fix it. I noticed from the error message that the spawn of npm using ('child_process').spawn was causing the error. Luckily, npm contains several modules that can be a drop-in replacement for this and I just grabbed the module cross-spawn. I needed to fix this inside the react-native-cli/index.js file.

This fixed this first error. Next, I encountered an error where the script could not find my Android SDK. This is pretty much expected because on my machine I'm running Android Studio so it is the only place that knows about the SDK.  The quick fix here is to find the path to the Android SDK and add that to a new environment variable ANDROID_HOME.  I also needed to make sure that my JAVA_HOME environment variable was correct so that the build process would be able to find it.

Awesome, now I'm nearly there. I started my JS Server to watch for changes, I'm using Console 2 and Git Bash here

$ react-native start

Then in another console tab I run:

$ react-native run-android

Result:
It works, but not really.

First it seems to think that I'm not running my JS server, but then it kicks in to fetch the file changes. 

This gets my hopes up. but then goes back to the red screen of fail.  Why did it do this?!!?  Well it seems that there may be an underlying issue with the way that the packager works on Windows based on the error that the packager spits out. I'm guessing that there is a simple thing to get this to work, but for now I'm moving back to OSX to do React Native.

        React packager ready.

[1:39:35 PM] <START> Building Dependency Graph
[1:39:35 PM] <START> Crawling File System
[1:39:52 PM] <END>   Crawling File System (17082ms)
[1:39:52 PM] <START> Building in-memory fs for JavaScript
[1:39:54 PM] <END>   Building in-memory fs for JavaScript (1498ms)
[1:39:54 PM] <START> Building in-memory fs for Assets
[1:39:55 PM] <END>   Building in-memory fs for Assets (1421ms)
[1:39:55 PM] <START> Building Haste Map
[1:39:56 PM] <START> Building (deprecated) Asset Map
[1:39:56 PM] <END>   Building (deprecated) Asset Map (326ms)
[1:39:56 PM] <END>   Building Haste Map (905ms)
[1:39:56 PM] <END>   Building Dependency Graph (20907ms)

<--- Last few GCs --->

  157866 ms: Scavenge 1402.8 (1455.6) -> 1402.8 (1455.6) MB, 12.3 / 0 ms (+ 3.0
ms in 1 steps since last GC) [allocation failure] [incremental marking delaying
mark-sweep].
  159306 ms: Mark-sweep 1402.8 (1455.6) -> 1402.7 (1454.6) MB, 1440.1 / 0 ms (+
4.0 ms in 2 steps since start of marking, biggest step 3.0 ms) [last resort gc].
  160988 ms: Mark-sweep 1402.7 (1454.6) -> 1402.7 (1455.6) MB, 1681.5 / 0 ms [last resort gc].


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0000034B02A37349 <JS Object>
    1: join [path.js:~217] [pc=000002DAEE697E24] (this=0000026D39474171 <an Object with map 0000031DF7E23E19>)
    2: arguments adaptor frame: 3->0
    3: /* anonymous */(aka /* anonymous */) [c:\GitHub\AwesomeProject\node_modules\react-native\packager\react-packager\src\DependencyResolver\DependencyGraph\ResolutionRequest.js:~226] [pc=000002DAEEEC76DA] (this=0000034B02A04131 <undefined>,real...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

I'm going to be tracking this all down and hopefully then pushing this work back to the react-native repo as a pull request.