Главная > Блог > Web-разработка > JavaScript и TypeScript >

React.js. Начало работы. Часть 1 из 12

12.10.2019

Теги: JavaScript • React.js • Web-разработка • Компонент • Фреймворк

React — JavaScript библиотека для создания пользовательских интерфейсов. Она позволяет собирать сложный UI из маленьких изолированных кусочков кода, называемых «компонентами». Прежде чем создать первый компонент, создадим чистый документ React, не содержащий компонентов:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React</title>
    <script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/babel">
    ReactDOM.render(
        <div>
            <p>Привет, мир!</p>
        </div>,
        document.querySelector('#container')
    );
    </script>
<body>
</html>

Создаем компонент

Теперь создадим компонент HelloWorld:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>React</title>
    <script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/babel">
    class HelloWorld extends React.Component {
        render() {
            return <p>Привет, мир!</p>
        }
    }
    ReactDOM.render(
        <HelloWorld/>,
        document.querySelector('#container')
    );
    </script>
<body>
</html>

Компонент может принимать произвольные данные, которые называются свойствами:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React</title>
    <script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/babel">
    class HelloWorld extends React.Component {
        render() {
            return <p>Привет, {this.props.name}!</p>
        }
    }
    ReactDOM.render(
        <div>
            <HelloWorld name="Сергей"/>
            <HelloWorld name="Николай"/>
            <HelloWorld name="Андрей"/>
        </div>,
        document.querySelector('#container')
    );
    </script>
<body>
</html>

Компонент может иметь дочерние элементы:

<SomeComponent foo="bar">
    <p>Дочерний элемент</p>
</SomeComponent>

Доступ к дочернему элементу можно получить с помощью this.props.children:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React</title>
    <script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/babel">
    class SomeButton extends React.Component {
        render() {
            return (
                <button type={this.props.behavior}>{this.props.children}</button>
            );
        }
    }
    ReactDOM.render(
        <div>
            <SomeButton behavior="submit">Отправить данные</SomeButton>
        </div>,
        document.querySelector('#container')
    );
    </script>
<body>
</html>

Добавляем стили

Компоненты в React должны содержать внутри себя все, что необходимо им для работы, в том числе и стили. Это способствует повторному использованию компонентов в любом месте приложения.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React</title>
    <script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/babel">
    class Letter extends React.Component {
        render() {
            var style = {
                padding: "10px",
                margin: "10px",
                backgroundColor: "#FFDE00",
                display: "inline-block"
            };
            return (
                <div style={style}>
                    {this.props.children}
                </div>
            );
        }
    }
    ReactDOM.render(
        <div>
            <Letter>A</Letter>
            <Letter>B</Letter>
            <Letter>C</Letter>
        </div>,
        document.querySelector('#container')
    );
    </script>
<body>
</html>

<div>
    <div style="padding: 10px; margin: 10px; background-color: #FFDE00; display: inline-block;">A</div>
    <div style="padding: 10px; margin: 10px; background-color: #FFDE00; display: inline-block;">B</div>
    <div style="padding: 10px; margin: 10px; background-color: #FFDE00; display: inline-block;">C</div>
</div>

Сейчас все буквы черного цвета, сделаем их цветными:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React</title>
    <script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/babel">
    class Letter extends React.Component {
        render() {
            var style = {
                padding: "10px",
                margin: "10px",
                backgroundColor: "#FFDE00",
                display: "inline-block",
                color: this.props.color
            };
            return (
                <div style={style}>
                    {this.props.children}
                </div>
            );
        }
    }
    ReactDOM.render(
        <div>
            <Letter color="#FF0000">A</Letter>
            <Letter color="#00CC00">B</Letter>
            <Letter color="#0000FF">C</Letter>
        </div>,
        document.querySelector('#container')
    );
    </script>
<body>
</html>

Поиск: JavaScript • Web-разработка • Компонент • Фреймворк • React.js