Counter 1.1:
– 新加了一条HP bar;
– 使用了Inline Style for the component;

import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';

//Import scss
import './scss/bar.scss';

//Component A
class Bar extends React.Component {
	
	render() {
		const { count }  = this.props;
		const rightValue = Math.floor((20 - count)/20*100);
		const colorR = Math.floor(218 - (100 - rightValue)*2.18);
		const colorG = Math.floor(37 + (100 - rightValue)*1.09);
		const colorB = Math.floor(28 - (100 - rightValue)*0.35);
		const barStyle = {
			right: `${rightValue}%`,
			background: `rgb(${colorR},${colorG},${colorB})`
		};
		return (
			<div className="barWrap">
				<div className="bar" style={barStyle}></div>
			</div>
		)
	}
	
};

const mapStateToProps = (state) => {
	return { count: state.count };
};

export default connect(mapStateToProps)(Bar);

样板展示:

参考资料:
https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822