Friday, September 16, 2016

React, Redux, create-react-app Tutorial - Hello World Input Field

This article will explain how do I create React JS application with Redux and create-react-app. The goal is to make hello world application with input field.

I assume you already understand basic React JS, Redux, and create-react-app. I am still learning React JS, Redux, and create-react-app, so any feedback is appreciated. I hope this example application makes you easier to learn react redux.

Github repository: https://github.com/kuntoaji/hello-world-input-field

1. Install create-react-app and create Application with create-react-app

npm install create-react-app -g
create-react-app hello-world-input-field

2. Move to project directory, Install redux and react-redux

cd hello-world-input-field
npm install redux --save
npm install react-redux --save

3. Create Reducer

// src/reducers/HelloReducer.js
const HelloReducer = (state, action) => {
  switch (action.type) {
    case 'CHANGE_TEXT':
      console.log('CHANGE_TEXT from HelloReducer');
      return Object.assign({}, state, {text: action.text});
    default:
      console.log('Default value from HelloReducer');
      return state;
  }
}

export default HelloReducer;

4. Create Action

// src/actions/HelloAction.js
const HelloAction = (newText) => {
  console.log('from HelloAction.js');
  return {
    type: 'CHANGE_TEXT',
    text: newText
  }
}

export default HelloAction;
5. Create Container Component

import { connect } from 'react-redux';
import App from './App';
import { bindActionCreators } from 'redux';
import HelloAction from './actions/HelloAction';

const mapStateToProps = (state) => {
  console.log('map to state to props, state.text: ' + state.text);
  return {
    text: state.text
  }
}

const mapDispatchToProps = (dispatch) => {
  console.log('map to dispatch to props');
  return bindActionCreators({onChange: HelloAction}, dispatch);
}

const AppContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

export default AppContainer;

6. Makes the Redux store available to the connect()

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import HelloReducer from './reducers/HelloReducer'
import AppContainer from './AppContainer';
import './index.css';

console.log('from index.js');
let store = createStore(HelloReducer, {text: 'Initial value from createStore'});

ReactDOM.render(
 <Provider store={store}>
    <AppContainer />
  </Provider>,
  document.getElementById('root')
);

7. Edit src/App.js to accept props from redux

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  onChangeHandler(event) {
    console.log('from onChangeHandler App.js');
    this.props.onChange(event.target.value);
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Hello World React JS, Redux, and create-react-app</h2>
        </div>
        <p className="App-intro">
          Hello, {this.props.text}
          {' '}
          <input onChange={this.onChangeHandler.bind(this)}>
          </input>
        </p>
      </div>
    );
  }
}

export default App;

8. Done. Start server with npm start and open localhost:3000

Github repository: https://github.com/kuntoaji/hello-world-input-field

Sunday, June 12, 2016

Nokogiri 1.6.8 Error When Installing Rails 5.0.0.rc1

My Rails 5.0.0.rc1 installation with Ruby 2.3.1 on Max OS is failed because of Nokogiri error.

Building native extensions.  This could take a while...
ERROR:  Error installing rails:
 ERROR: Failed to build gem native extension.

    current directory: /Users/aji/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/nokogiri-1.6.8/ext/nokogiri
/Users/aji/.rbenv/versions/2.3.1/bin/ruby -r ./siteconf20160612-35324-37mayu.rb extconf.rb
Using pkg-config version 1.1.7
checking if the C compiler accepts ... yes
checking if the C compiler accepts -Wno-error=unused-command-line-argument-hard-error-in-future... no
Building nokogiri using packaged libraries.
Using mini_portile version 2.1.0
checking for iconv.h... yes
checking for gzdopen() in -lz... yes
checking for iconv... yes
************************************************************************
IMPORTANT NOTICE:

Building Nokogiri with a packaged version of libxml2-2.9.4.

Team Nokogiri will keep on doing their best to provide security
updates in a timely manner, but if this is a concern for you and want
to use the system library instead; abort this installation process and
reinstall nokogiri as follows:

    gem install nokogiri -- --use-system-libraries
        [--with-xml2-config=/path/to/xml2-config]
        [--with-xslt-config=/path/to/xslt-config]

If you are using Bundler, tell it to use the option:

    bundle config build.nokogiri --use-system-libraries
    bundle install

Note, however, that nokogiri is not fully compatible with arbitrary
versions of libxml2 provided by OS/package vendors.
************************************************************************
Extracting libxml2-2.9.4.tar.gz into tmp/x86_64-apple-darwin15.5.0/ports/libxml2/2.9.4... OK
Running 'configure' for libxml2 2.9.4... OK
Running 'compile' for libxml2 2.9.4... ERROR, review '/Users/aji/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/nokogiri-1.6.8/ext/nokogiri/tmp/x86_64-apple-darwin15.5.0/ports/libxml2/2.9.4/compile.log' to see what happened. Last lines are:
========================================================================
    unsigned short* in = (unsigned short*) inb;
                         ^~~~~~~~~~~~~~~~~~~~~
encoding.c:815:27: warning: cast from 'unsigned char *' to 'unsigned short *' increases required alignment from 1 to 2 [-Wcast-align]
    unsigned short* out = (unsigned short*) outb;
                          ^~~~~~~~~~~~~~~~~~~~~~
4 warnings generated.
  CC       error.lo
  CC       parserInternals.lo
  CC       parser.lo
  CC       tree.lo
  CC       hash.lo
  CC       list.lo
  CC       xmlIO.lo
xmlIO.c:1450:52: error: use of undeclared identifier 'LZMA_OK'
    ret =  (__libxml2_xzclose((xzFile) context) == LZMA_OK ) ? 0 : -1;
                                                   ^
1 error generated.
make[2]: *** [xmlIO.lo] Error 1
make[1]: *** [all-recursive] Error 1
make: *** [all] Error 2
========================================================================
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
 --with-opt-dir
 --without-opt-dir
 --with-opt-include
 --without-opt-include=${opt-dir}/include
 --with-opt-lib
 --without-opt-lib=${opt-dir}/lib
 --with-make-prog
 --without-make-prog
 --srcdir=.
 --curdir
 --ruby=/Users/aji/.rbenv/versions/2.3.1/bin/$(RUBY_BASE_NAME)
 --help
 --clean
 --use-system-libraries
 --enable-static
 --disable-static
 --with-zlib-dir
 --without-zlib-dir
 --with-zlib-include
 --without-zlib-include=${zlib-dir}/include
 --with-zlib-lib
 --without-zlib-lib=${zlib-dir}/lib
 --enable-cross-build
 --disable-cross-build
/Users/aji/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/mini_portile2-2.1.0/lib/mini_portile2/mini_portile.rb:366:in `block in execute': Failed to complete compile task (RuntimeError)
 from /Users/aji/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/mini_portile2-2.1.0/lib/mini_portile2/mini_portile.rb:337:in `chdir'
 from /Users/aji/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/mini_portile2-2.1.0/lib/mini_portile2/mini_portile.rb:337:in `execute'
 from /Users/aji/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/mini_portile2-2.1.0/lib/mini_portile2/mini_portile.rb:111:in `compile'
 from /Users/aji/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/mini_portile2-2.1.0/lib/mini_portile2/mini_portile.rb:150:in `cook'
 from extconf.rb:364:in `block (2 levels) in process_recipe'
 from extconf.rb:257:in `block in chdir_for_build'
 from extconf.rb:256:in `chdir'
 from extconf.rb:256:in `chdir_for_build'
 from extconf.rb:363:in `block in process_recipe'
 from extconf.rb:262:in `tap'
 from extconf.rb:262:in `process_recipe'
 from extconf.rb:555:in `<main>'

To see why this extension failed to compile, please check the mkmf.log which can be found here:

  /Users/aji/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/extensions/x86_64-darwin-15/2.3.0-static/nokogiri-1.6.8/mkmf.log

extconf failed, exit code 1

Gem files will remain installed in /Users/aji/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/nokogiri-1.6.8 for inspection.
Results logged to /Users/aji/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/extensions/x86_64-darwin-15/2.3.0-static/nokogiri-1.6.8/gem_make.out
After some googling, the problem is because xz installation with Homebrew. Uninstall xz solve my problme.

brew uninstall xz
gem install rails -v '5.0.0.rc1'

Friday, December 4, 2015

Melodiest 1.0.0 Has Been Released

Melodiest version 1.0.0 has been released a few weeks ago. A lot of changes has been made. In this version Melodiest introduce new application structure and add new gems by default.

© Railsmine