The JavaScript blog.


libraries node modules components react-native react

React Component Playground, React Native Fish

Posted on .

React Component Playground

I have a backlog of React submissions, so I thought I'd work through them rather than spacing them out over a few weeks. First, React Component Playground (GitHub: FormidableLabs/component-playground, License: MIT, npm: component-playground) by Ken Wheeler is a React component that allows you to edit a React component with a live preview. You can try it out on the project's homepage -- see the button example near the top.

Normally with React/Angular/etc. you're constantly waiting for the build/refresh cycle, but with this project you can experiment a little bit to get results more quickly. As the example suggests, this is useful when working with React styles.

The same author also wrote nuka-carousel (GitHub: kenwheeler/nuka-carousel, License: MIT, npm: nuka-carousel), which is a React carousel component.

React Native Fish

Fish example

If you're looking for a fun React Native project, then check out Ivan Starkov's react-native-fish (GitHub: istarkov/react-native-fish). It's a graphical experiment that generates a trial of objects that looks like a fish. It's pure JavaScript and doesn't use any images.

It's interesting to see how React Native can be used to draw abstract things that aren't NSWhateverViews. I noticed that it uses arrays from the gl-matrix module, and immutable.


ui angular react react-native

Angular Grid, React Native Introduction

Posted on .

Angular Grid

Angular Gird

Niall Crosby sent in Angular Grid (GitHub: ceolter/angular-grid, License: MIT), a library for managing tables of data with Angular. It supports sorting, filtering, column resizing, CSS themes, and search. There's even an example that extends the cell renderer to show a file browser view.

Like other data tables, you can specify the columns with JSON and then fetch JSON data from the server to populate the table. Here's a short Angular example that uses $http to fetch the JSON:

module.controller('tableController', function($scope, $http) {  
  var columnDefs = [
    { displayName: 'Athlete', field: 'athlete', width: 150 },
    { displayName: 'Age', field: 'age', width: 90 },
    { displayName: 'Country', field: 'country', width: 120 },
    { displayName: 'Year', field: 'year', width: 90 },
    { displayName: 'Total', field: 'total', width: 100}

  $scope.gridOptions = {
    columnDefs: columnDefs,
    rowData: []

      $scope.gridOptions.rowData = res.data;

There are more examples available in the documentation for Angular Grid.

React Native Introduction Tutorial

John Wu has written an introduction to using React Native with iOS apps. It includes details on how to use it with CocoaPods, and how to wire up the JavaScript view code.

If you're new to Objective-C and just want to get React Native up and running, then this should help because it walks through all of the necessary setup details. Installing CocoaPods isn't too hard (it's an Objective-C package manager), so as long as you can compile and run basic iOS apps you should be good to go. There's also a sample application on GitHub.