Записная книжка ReactJS (Часть 1)

React - это библиотека JavaScript для создания пользовательских интерфейсов, созданная Facebook. Используя React, вы можете создавать пользовательские интерфейсы, в частности, одностраничные приложения (SPA) или веб-сайты. Прежде чем переходить к коду, давайте изучим основы.

ES6: React использует ES6. Это расшифровывается как ECMAScript 6. Он был создан для стандартизации JavaScript.
Основной синтаксис: React использует расширение синтаксиса JavaScript под названием JSX, которое позволяет вам писать тег HTML внутри javaScript и помогает сохранить ваш код читабельным. Например :

const element = ‹h1› Hello World! ‹/h1›

3. Компонент: все в React является компонентом. Компонент - это независимый многократно используемый блок кода. В React есть два типа компонентов.

Компонент класса
Функциональный компонент

Давайте посмотрим на них подробнее

Компонент класса: Компонент класса - это класс ES6. Вы можете создать компонент class, расширив React-Component. У него должен быть метод render (), который возвращает элемент React. Давайте создадим компонент класса Hello:

import React from 'react';
class Hello extends React.Component {  
    render() {  
        return 
          (
            <h1>Hello world!</h1>;  
          )
    }  
}

Здесь класс Hello расширяет React. Component, поэтому React понимает, что этот класс является компонентом. Внутри render() он возвращает элемент React. В приведенном выше примере отображается тег h1 с текстом Hello world! внутри него.

Функциональный компонент: это функция JavaScript / ES6. Он должен возвращать элемент React. Давайте создадим функциональный компонент под названием Hello:

function Hello(){  
        return 
          (
            <h1>Hello world!</h1>;  
          ) 
}

или в виде функции стрелки ES6:

const Hello = ()=> {  
        return 
          (
            <h1>Hello world!</h1>;  
          ) 
}

4. Чтобы ваше приложение отображалось на экране, мы также должны использовать ReactDOM.render():

ReactDOM.render(  
    <Hello />,   
    document.getElementById("root")  
);

Здесь приведенный выше код отображает компонент Hello внутри DOM с идентификатором root.

Установка. Чтобы создать новое приложение, вы можете выбрать один из следующих способов:

1. React требует Nodejs. Вы можете скачать node.js по этой ссылке.

2. После установки Nodejs перейдите в каталог проекта и в терминале или командной строке введите следующую команду для создания приложения React:

npm

npm init react-app my-app

или пряжа

yarn create react-app my-app

3. Перейдите в каталог проекта и введите npm start или yarn start , чтобы запустить приложение на локальном хосте .

cd my-app
yarn start ( or npm start )

Поздравление! Вы успешно запускаете собственное приложение! :)

Спасибо, что прочитали мой пост. Надеюсь, эта статья поможет вам узнать некоторые основы React JS. Не стесняйтесь задавать любые вопросы в разделе комментариев. :)

Щелкните здесь, чтобы прочитать больше статей:

Часть 1: Основы React JS
Часть 2: Обработка данных с помощью Props

Записная книжка ReactJS (Часть 1)

Вопросы по теме