React (p.1)
Алина Орлова
React
React - JavaScript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов.
| Stars ⭐️ | Issues 🤔 | |
|---|---|---|
| React | 151,531 | 500 |
| Vue | 167,252 | 323 |
| Angular | 62,886 | 2693 |
| Svelte | 35,120 | 420 |
| Ember | 21,486 | 261 |
| Preact | 26,589 | 99 |
* информация на 05.07.2020
Text
Компоненты
- Классовые
- Функциональные
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}Классовый компонент
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}- es6 класс, который наследуется от React.Component
- имеет обязательный метод render(), который возвращает разметку
Функциональный компонент
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}- обычная JS функция
- принимает объект props как параметр функции
- возвращает разметку
HTML внутри JS? 🤔
class Welcome extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}Это JSX
JSX - расширение языка JavaScript, синтаксический сахар.
JSX компилируется Babel-ем в вызов функции React.CreateElement(component, props, ...children).
JSX -> JS
<body>
<main className="main">
<h1>React</h1>
<p>So cool framework</p>
</main>
<footer className="footer">
<b>(c)</b> Alina Arlova
</footer>
</body>
React.createElement(
"body",
null,
React.createElement(
"main", {
className: "main"
},
React.createElement(
"h1",
null,
"React",
),
React.createElement(
"p",
null,
"So cool framework",
),
),
React.createElement(
"footer", {
className: "footer"
},
React.createElement(
"b",
null,
"(c)",
),
" Alina Arlova",
),
);Props
class Welcome extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}class App extends React.Component {
render () {
return (
<Welcome name="Alina" />
<Welcome name="Dan" />
);
}
}Свойства, которые передаются в компонент, а внутри компонента доступны из объекта props.
props нельзя изменять!
-
Все написанные вами компоненты должны начинаться с большой буквы
- Внутри JSX можно писать обычный JS
Нюансы JSX
<p>{name}</p>
<div>
{isAdmin
? <p>You are admin</p>
: <p>You are user</p>
}
</div>
<div>
{isLoading && <Loader />}
</div>3. Внутри JSX могут быть только выражения (expression)
Props
class Welcome extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}class App extends React.Component {
render () {
return (
<div>
<Welcome name="Alina" />
<Welcome name="Dan" />
</div>
);
}
}Свойства, которые передаются в компонент, а внутри компонента доступны из объекта props.
props нельзя изменять!
State
У каждого компонента может быть свое внутреннее состояние.
В этом случае, можно говорить о stateful компоненте.
Компоненты без состояния называются stateless.
class Counter extends React.Component {
state = { count: 0 };
onButtonClick = () => {
const count = this.state.count;
this.setState({ count: count + 1 });
};
render() {
return (
<button onClick={this.onButtonClick}>
count: {this.state.count}
</button>
);
}
}Обновление состояния
this.state.count += 1;
this.setState({ count: count + 1 });Пример обновления состояния
Стили
import "./buttonStyles.css";
...
<button className="btn">Submit</button>Свойство className - обычная строка.
CSS
Полезные инструменты
07 - React (p.1)
By Startup Summer
