Index.js
import React from ‘react’;
import { render } from ‘react-dom’;
import Hello from ‘./Hello’;
import MyButton from ‘./MyButton’;
const styles = {
fontFamily: ‘sans-serif’,
textAlign: ‘center’,
};
const bStyle = {
textAlign: ‘center’,
BackgroundColor: ‘red’,
};
let colors = [‘red’, ‘blue’, ‘green’,];
class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
state = {
colorIndex: 0,
}
handleClick(e){
this.setState ({
colorIndex: 1,
})
}
render() {
return (
Start editing to see some magic happen {’\u2728’}
);
}
}
render(, document.getElementById(‘root’));
MyButton.js
import React from ‘react’;
import {
Button,
ButtonToolbar,
} from ‘react-bootstrap’;
export default class MyButton extends React.Component {
render() {
return (
{/* Standard button */}
<Button
onClick={this.props.onClick}
style={{ backgroundColor: this.props.color }}>
{this.props.name}
</Button>
</ButtonToolbar>
);
}
}