0xNord / learningReact

learningReact - Заметки

Подключаем React

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

• Добавляем ссылку на компилятор для js - Babel(babeljs.io).
• позволяет превращать код JSX в JavaScript.

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

методы React

• ReactDOM.render(JSX,destination);
  • var destination = document.querySelector("#some"); // outside render // before component class.

Компоненты React

class ComponentName extends React.Component {
	render(){
		var xStyle = {backgroundColor: this.props.bgcolor}; /* css styles */

		return (
			<div style={xStyle}>
				<button type={this.props.behavior}>
					{this.props.children}
				</button>
			</div>
		)
	}
}
ReactDOM.render(
	<div>
		<ComponentName bgcolor="#ff605f" behavior="submit">Send Data</ComponentName>
	</div>, destination);

#стилизация

• className!! instead of class(js)
  Руководство по трём способам стилизации в React

counter

ReactAPI

важно !!! (создаем объект state перед созданием компонента)

class ComponentName extends React.Component {
constructor(props) { // ???
				super(props); // ???

				this.state = { strikes: 0 };
				this.timerTick = this.timerTick.bind(this); // bind timer
}
timerTick() { // timer
				this.setState({
					strikes: this.state.strikes + 100 // update value
				});
			}

			componentDidMount() { // after component render
				setInterval(this.timerTick, 1000); 
			}
render(){
	var count = this.state.strikes.toLocaleString();
	return( {count} )} // render