React Основные понятия- Components, Props, State

1. Components

Components in React являются независимыми строительными блоками, которые можно использовать повторно. Они разделены на более мелкие элементы пользовательского интерфейса и могут быть объединены в более крупные элементы components. Например, приложение может иметь components такие имена, как Header, Sidebar и Content. Каждый компонент имеет свои обязанности и может получать props и state отображать соответствующие данные.

Пример:

// Functional Component  
function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
// Class Component  
class Greeting extends React.Component {  
  render() {  
    return <h1>Hello, {this.props.name}!</h1>;  
  }  
}

2. Props

Props in React — это значения, переданные components извне. Они помогают передавать данные от родителя components к дочернему components. Props доступны только для чтения и не могут быть изменены внутри компонента. Чтобы использовать props, мы передаем значения атрибутам компонента и используем их в части пользовательского интерфейса.

Пример:

function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

3. State

State in React — это изменяемые данные, которые можно изменить внутри компонента. Каждый компонент может иметь свой собственный state для хранения и управления динамическими данными. При state изменении React автоматически обновляется соответствующий пользовательский интерфейс. State управляется только в классе components и инициализируется в конструкторе компонента. Для обновления state мы используем State метод `set()`.

Пример:

class Counter extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { count: 0 };  
  }  
  
  increment() {  
    this.setState({ count: this.state.count + 1 });  
  }  
  
  render() {  
    return( 
      <div>  
        <p>Count: {this.state.count}</p>  
        <button onClick={() => this.increment()}>Increment</button>  
      </div>  
   );  
  }  
}