Configuring ReactJS from scratch

Walthrough of creating a ReactJS application from scratch with every step documented. This should be good enough for someone that is a total beginner.

The code for this post is located on github.

Techology Stack

Please download and install NodeJS and Webstorm to follow this tutorial webpack and react-materialized will be installed later.

Setup directory

I am going to create my project in the ~/Projects/bbq/bbqweb directory.

Create the folder & change into it.

Initialize the directory with npm.

Press return for each question. When complete you should have a package.json file in your directory.

Install react, babel, and webpack.

Install webpack

Install react

Check your setup

List your directory and you should now have a package.json file and a node_modules directory. If you list the contents of the node_modules directory you will find a bunch of directoies for all the components you just installed with those two npm i commands.

Create the .babelrc config file.

Create the following file in your new project directory with your favorite text editor. Make sure it is properly named. Windows users will need to make sure there is not a .txt file extension on the end after saving.

Create the index.html file.

This is the file that serves up the application to the browser and is the first resource loaded by the web browser. The file is basically only going to point to your webpack bundle.


 

This HTML file will not do anything yet. We still need to configure webpack and create the ReactJS index file. Don’t worry that there is no public/bundle.js file. We are going to get that created next.

Create the webpack.config.js

Babel is used to transpile the code we write for ReactJS into a more supported form of JavaScript. This lets us write modern code that would not be directly supported by all browsers. This file configures babel to understand ReactJS.

Configure npm to run and build your application

Edit your package.json file and edit the scripts section to look like mine below. You are adding the dev and build scripts to this file to make things a little easier.

Create the ReactJS entry point to your application index.jsx


 

This post pertains to React Native v0.12.0-rc.

I am attempting to port my iOS app in react-native to Android. I am experiencing a bunch of issues surrounding colors and default styles. I am getting TypeError: expected dynamic type ‘string’, but had type ‘int64’.

Attached the debugger to the processes and I am seeing calls to the following code in CatalystStylesDiffMap.class:

Examining the values I see the color property is an int64.

As it turns out the Android project and the node-module for react-native were out of sync and this caused lots of problem with regard to style color properties.

It looks like my application (even when initing a fresh app) was importing java libraries for 0.11 dependencies:

I verified my installed version of react-native

init’ed a new project and looked at the build.gradle file to see it is 0.11+.

Checked the node_modules/react-native/Libraries/StyleSheet to see 0.11 files (0.12+ has a new processColor.js file in it as seen by recent commits.)

So to make this work I changed the build.gradle to 0.12+, and ran npm i react-native@0.12.0-rc to force the correct android libraries and the correct react-native module. Now the app works.

Is this my machine or npm cache that is horked up or is it an npm install problem with the 0.12.0-rc? I also noticed that none of the files in the $PROJECTDIR$/android folder get updated when doing an npm i or npm update which leaves the native app setting behind in version.

screen-01

There are lots of tools that compare two PostgreSQL databases.  Most are command line and the precious few that are UI based either cost too much money (from an independent developer’s perspective).  So like any persistent developer I decided to write my own and learn about Electron along the way.

I open sourced the tool so anyone can use it for free.  My intent is to provide the schema compare functionality for free forever.

The shell container for the application is my first foray into Electron which uses io.js and Chrome browser to power the desktop application.  The UI is presented as HTML and the HTML side of things is using AngularJS and Bootstrap to make the nifty UI. It’s a pretty cool concept and supports Linux / Mac OS X / Windows.  I will provide binaries as well in the near future.

Here is a link to the homepage.

And here is the link to the Github project site, please feel free to submit pull requests!

screen-01 screen-02 screen-03

 

As of the latest version of pm2 there is a slight bug in the process that writes the startup script to your /etc/init.d directory.  Out of the box the on reboot (or by executing the script as root) you will see the following error:

The fix is simple.  By fixing one line of code in the shell script your pm2 will now startup correctly.

Note the export PM2_HOME line is incorrect.  The PM2_HOME should actually point to the home directory of the USER you told pm2 to run under.  So change that line to the following:

Note that myPm2User should be replaced with whatever user account you want to run pm2 under.

Now when you reboot you will see success:

 

 

 

I screamed at the computer today while looking for examples of how to properly use the whereArgs argument of the SQLiteDatabase.delete() function.  I am pretty sure I puked a little when I read this horrible advice on Stack Overflow:

I am having flashbacks to 1996 when this first became an issue for developers (yikes, showing my age).

The correct way to do this is to use the whereClause and whereArgs arguments to prevent SQL Injection.

Here is the documentation for the method (although it is lacking good guidance).

So correct code would look like this:

 

There are a few links on Stack Overflow about this topic but the solutions seem old (link, link).  I figured out how to do this correctly in the latest version of AngularJS (v1.4.0 as of writing this).

Then add the interceptor to the pipeline like this in your App.run function.

As a side note, I left my session injection code in there.  I use this to insert a sessionid header into every request.  You can remove that part and rename this interceptor from sessionInjector to unauthorizedToLoginInterceptor if you wish.

TL;DR – Use SELECT * FROM functionName(); vs SELECT functionName();

Given the following custom data type in PG:

I created a simple function that selects the correct counts to fill this data type correctly and then returns the data type as a result.

So there are a few ways to use this function.  The first IMHO is useless:

Which results in the following result:

Screen Shot 2015-04-18 at 6.26.16 PM

However querying the following way results in a more useful response:

Which give a useful response:

Screen Shot 2015-04-18 at 6.27.59 PM