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

2 comments:

  1. If you don’t mind feedback, I would say that an input field is an overkill to use Redux for, as React component state is much less verbose. People seeing examples like this might conclude that React+Redux are incredibly convoluted, which they aren’t. Just use React component state for simple things like form inputs, and use Redux for more complex state shared between many components—when you have the need for it.

    ReplyDelete
  2. Ya of course, when you use redux, does mean the application has complex state, and be sure to read the documentation of react about props and state, react can handle the simple thing form input like that :)

    ReplyDelete

© Railsmine