День 2 - Обучение React

Привет и добро пожаловать обратно. Это второй день обучения React [JavaScript Framework]. Если вы не читали предыдущий пост, сначала проверьте это, поскольку я уже говорил о настройке моего компьютера и настройке среды, а также о структуре проекта со всеми зависимостями, которые будут полезны для начала. И без дальнейших задержек, давайте вернемся к сегодняшней теме.

Что я узнал сегодня?

JSX - JavaScript XML

Да, JSX - это внешняя функция, предоставляемая функцией response для улучшения и полного использования реакции путем расширения синтаксиса JavaScript. JSX действует как расширение синтаксиса JavaScript. Итак, что в основном помогает JSX, так это то, что мы можем написать наш HTML-код внутри файла JavaScript нашего проекта React. Да, правда, здорово? Я думаю, это действительно помогает писать независимый от других код. А также привязка логики и разметки в одном файле с физическими лицами. Вот почему наиболее популярно реагирование, которое они называют компонентами. Эти компоненты можно использовать повторно.

Как работает JSX?

Поместите HTML-код в файл JavaScript, так как React отобразит HTML-код в браузере.

const user = {
    name: "mdz",
}
const template = (
    <div>
        <h1>Hello, world!</h1>
        <p>Welcome to the world of React {user.name}</p>
    </div>
);

JSX поставляется с множеством упакованных функций. Как видно из приведенного выше кода, мы можем использовать всю мощь JavaScript внутри самой разметки. Вся логика, написанная в коде JavaScript, должна быть заключена в пару фигурных скобок. мы можем добавить массив, переменную, строки и число.

В JSX есть несколько строгих правил, которым необходимо следовать. Реакция не любит объекты, логические внутри разметки. Поскольку это произойдет из-за ошибки, код не будет скомпилирован. Все элементы тега, такие как h1, p, img и т. Д., Должны быть помещены внутри тега div.

Реагировать на функцию рендеринга

Функция Reacts render () принимает 2 аргумента: один - это шаблон, который должен быть отображен, а другой аргумент - где отображать шаблон в DOM.

ReactDOM.render(template, document.getElementById('app'))

Приложение React

Это небольшое приложение-переключатель, которое я написал. Детали будут отображаться после нажатия кнопки «Показать детали», а также изменить текст кнопки на «скрыть детали». При нажатии кнопки «Скрыть детали» детали не будут отображаться, и текст кнопки также изменится на «показать детали». Да, я знаю, что это не круто показывать, но это то, что я могу сделать за пару минут. Сообщите мне о своем проекте в разделе ответов ниже, я хотел бы знать об этом. И следите за моими крупными проектами на react.

let state = 0;
const renderDetail = () => {
    if (state === 0) {
        state+= 1;
        render();
    } else {
        state-= 1;
        render();
    }
}
const render = () => {
    const template = (
        <div>
            <h1>Visibilty Toggle</h1>
            <button onClick={renderDetail}>{state === 1 ? "hide detail" : "show detail"}</button>
            {state === 1 ? <p>showing details</p> : <span></span>}
        </div>
    );
    const appRoot =document.getElementById('app');
    ReactDOM.render(template, appRoot);
}
render();

Подведение итогов

Заканчиваю уроки на сегодня. Я просмотрел видеоуроки и официальную документацию по React. Надеюсь, вам понравилось.

Что ж, спасибо за прочтение. пожалуйста, напишите аплодисменты, так как это будет мотивировать меня в моем путешествии по изучению React. Следите за мной в Instagram. Спасибо, я увижу вас в следующем посте.

День 2 - Обучение React