JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/dist/linkify.js"></script>
<script src="https://unpkg.com/[email protected]/dist/linkify-react.js"></script>
<div id="root"></div>
Babel + JSX
function textGenerator(num, postfix) {
return Array.apply(null, {length: num}).map(Function.call, Number).map(i => 'pre line\nhttp://' + i + postfix + '\npost line');
}
const lists = [textGenerator(300, '.com'), textGenerator(50, '.net')];
class ListItem extends React.Component {
render() {
return (
<div style={{margin: 3, border: 'thin dotted', padding: 5}}>
<span>{this.props.text.split('\n').map((text, idx) =>
<span key={idx}>{text}</span>).reduce((prev, cur, idx, arr) => {
return prev.concat(cur, idx < arr.length - 1 ? <br key={arr.length+idx} /> : undefined);
}, [])}</span>
{this.props.func1 ?
<input type="button" value="Func1" onClick={this.props.func1} style={{marginLeft: 6}} />
: undefined}
{this.props.func2 ?
<input type="button" value="Func2" onClick={this.props.func2} style={{marginLeft: 6}} />
: undefined}
</div>
)
}
}
let counter = 0;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
list: lists[0]
};
}
button() {
counter++;
this.setState({ list: lists[counter % 2] });
}
perfEnd() {
React.addons.Perf.stop();
React.addons.Perf.printExclusive();
}
render() {
return (
<div>
<button onClick={this.button.bind(this)}>Swap lists</button>
<button onClick={() => React.addons.Perf.start()}>Perf start</button>
<button onClick={() => this.perfEnd()}>Perf stop</button>
<ul>
{
this.state.list.map((str, i) => <ListItem key={i} text={str} func1={() => {}} func2={() => {}} />)
}
</ul>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));