Примеры правильного кода в React:
Пример 1: базовый компонент
import React from 'react';
class MyComponent extends React.Component {
render() {
return <div>Hello, World!</div>;
}
}
export default MyComponent;
Пример 2: Функциональный компонент
import React from 'react';
function MyComponent() {
return <div>Hello, World!</div>;
}
export default MyComponent;
Пример 3: Реквизит
import React from 'react';
function MyComponent(props) {
return <div>Hello, {props.name}!</div>;
}
export default MyComponent;
Пример 4: Состояние
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return <div>Count: {this.state.count}</div>;
}
}
export default MyComponent;
Пример 5. Обработка событий
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
handleClick() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<div>Count: {this.state.count}</div>
<button onClick={() => this.handleClick()}>Increment</button>
</div>
);
}
}
export default MyComponent;
Пример 6. Условный рендеринг
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: false
};
}
render() {
return (
<div>
{this.state.isLoggedIn ? (
<div>Welcome, User!</div>
) : (
<div>Please log in.</div>
)}
</div>
);
}
}
export default MyComponent;
Пример 7: списки и ключи
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
items: ['Apple', 'Banana', 'Orange']
};
}
render() {
return (
<ul>
{this.state.items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
}
export default MyComponent;
Пример 8. Жизненный цикл компонента
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
message: ''
};
}
componentDidMount() {
setTimeout(() => {
this.setState({ message: 'Hello, World!' });
}, 1000);
}
render() {
return <div>{this.state.message}</div>;
}
}
export default MyComponent;