JavaScript technologies

React tasks

Horváth, Győző
senior lecturer
horvath.gyozo@inf.elte.hu

Financed from the financial support ELTE won from the Higher Education Restructuring Fund of the Hungarian Government

Task

Implement the list filtering with React!

1. step

The expected HTML structure

<h1>Code list</h1>
<div id="main">
  <div id="list-container">
    <div id="filter">
      <form class="form-inline">
        <div class="form-group">
          <label for="text-filter">Filter</label>
          <input type="text" class="form-control" id="text-filter">
        </div>
      </form>
    </div>
    <div id="list">
      <ul id="code-list" class="list-group">
        <li class="list-group-item">title1</li>
        <li class="list-group-item">title2</li>
      </ul>
    </div>
  </div>
</div>

Further steps

2. Component decomposition
3. Dynamic templates with fixture data
4. Defining state
5. Realizing event handling

Final solution

var React = require('react');
var ReactDOM = require('react-dom');

class FilterForm extends React.Component {
    render() {
        return (
            <div id="filter">
              <form className="form-inline">
                <div className="form-group">
                  <label htmlFor="text-filter">Filter</label>
                  <input type="text" className="form-control" id="text-filter" 
                    defaultValue={this.props.filterText}
                    onChange={() => this.props.handleChange(this.refs.filter.value)}
                    ref="filter"
                  />
                </div>
              </form>
            </div>
        );
    }
}

const List = ({data}) => {
    const listItems = data.map(e => (<li key={e} className="list-group-item">{e}</li>));
    
    return (
        <div id="list">
          <ul id="code-list" className="list-group">
            {listItems}
          </ul>
        </div>
    );
};

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            titles: ['title1', 'title2'],
            filterText: ''
        };
    }
    handleChange(value) {
        this.setState({
            filterText: value
        });
    }
    getFilteredList() {
        return this.state.titles.filter(title => title.indexOf(this.state.filterText) > -1);
    }
    render() {
        return (
            <div>
                <h1>Kódlista</h1>
                <div id="main">
                  <div id="list-container">
                  
                    <FilterForm 
                        filterText={this.state.filterText} 
                        handleChange={e => this.handleChange(e)}
                    />
                    <List data={this.getFilteredList()} />
                    
                  </div>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

Task

Implement the displaying and editing features of the code snippets with React!

1. step

The HTML structure

<div id="snippet-container">
  <div id="nav">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default" id="snippet-view">View</button>
      <button type="button" class="btn btn-default" id="snippet-edit">Edit</button>
      <button type="button" class="btn btn-default" id="snippet-delete">Delete</button>
      <button type="button" class="btn btn-default" id="snippet-back">Back</button>
    </div>
  </div>
  <div id="snippetView">
    <h2>Title</h2>
    <pre>
let f = x => x*x;
    </pre>
  </div>
  <div id="snippetEdit">
    Title: <input type="text" value="Title" class="form-control" id="snippet-title">
    Snippet: <br>
    <textarea class="form-control" id="snippet-code">let f = x => x*x;</textarea>
    <input type="button" value="Save" class="form-control btn btn-primary" id="snippet-save">
  </div>
</div>

Further steps

2. Component decomposition
3. Dynamic templates with fixture data
4. Defining state
5. Realizing event handling