React

by mizobata

HTML

<div id="app"></div>

CSS

#wrapper {
  width: 100vw;
  height: 100vh;
}

.flex {
  display: flex;
}
.flex.flex-wrap {
  flex-wrap: wrap;
}
.flex.justify-content {
  justify-content: center;
}

.gray-back {
  background: #eee;
  display: flex;
  width: 100%;
  height: auto;
  min-height: 50px;
}

.category {
  border-radius: 10px;
  border: 1px solid #eee;
  margin: 5px;
  padding: 3px;
  text-align: center;
  line-height: 23px;
  width: auto;
  height: 25px;
  cursor: pointer;
}

.category.selected {
  border-radius: 10px;
  border: 1px solid #ee8989;
  background: #ee8989;
}

.category:hover {
  border-radius: 10px;
  border: 1px solid #eeaaaa;
  background: #eeaaaa;
}

.item-list {
  margin: 10px;
  height: 400px;
  overflow-y: scroll;
  border: 1px solid #ccc;
}

.item-list .item {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 10px;
  background: #aaa;
}
.item-list .item:hover {
  border: 1px solid #eeaaaa;
}

React

class SampleApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ name: 'Alice', age: 20 },
        { name: 'Bob', age: 22 },
        { name: 'Mallory', age: 25 },
        { name: 'Dave', age: 30 },
        ]
    }
  }
  
  render() {
  
  	const categoryList = ['Foo', 'Bar', 'Hoge', 'Fuga']
   	const a = categoryList.map(category => (<div className="category">{{category}}</div>))
    return (
			<div id="wrapper">
        <div className="gray-back flex flex-wrap">
         {{ a }}
        </div>
        <div className="item-list flex flex-wrap justify-content">
          <div className="item"></div>
          <div className="item"></div>
          <div className="item"></div>
          <div className="item"></div>
          <div className="item"></div>
          <div className="item"></div>
          <div className="item"></div>
        </div>
      </div>    
    );
  }
}

ReactDOM.render(<SampleApp />, document.querySelector("#app"))