React JS для начинающих, часть 1

React JS для начинающих (Front end) Часть-1

Эта статья поможет вам понять основы React Js.

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

Содержание

Настроить простой проект
Компоненты
Жизненный цикл
Состояние
Реквизит
События
Реагировать на CSS

1. Начать:

В этой статье предполагается, что у вас есть базовые знания в области HTML, JavaScript и на вашем компьютере установлена последняя версия Node Js.

Сначала установите «create-response-app» с помощью npm (Node Package Manager) через терминал в первый раз.

npm install -g создать-реагировать-приложение

Создайте свое первое приложение следующим образом:

create-react-app PROJECT_NAME
cd PROJECT_NAME
npm start

Ваш локальный сервер будет запускаться на http: // localhost: 3000 /

Структура папки:

Я использую Редактор кода Visual Studio для своего проекта, а вот структура папок для вновь созданного проекта.

node_modules: пакеты зависимостей проекта будут храниться в этом каталоге.
общедоступный: общедоступный контент, например статические HTML-страницы и т. д.
src: в этой папке будут храниться файлы проекта, такие как компоненты, файлы css и т. д.
package.json:. Этот файл содержит метаданные, относящиеся к проекту, такие как описание проекта, версия проекта, информация о лицензии и информация о пакетах.

Если вы откроете файл «public / index.html», вы увидите div с идентификатором «root», где содержимое вашего приложения будет отображаться в этом div.

src / index.js: это точка входа в файл для приложения. Здесь вы можете добавить свой первый компонент вашей страницы. По умолчанию проект создан с помощью компонента App (App.js).

ReactDOM.render(<App />, document.getElementById('root'));

2. Компоненты

Компоненты - это независимые и повторно используемые биты кода. Компонент возвращает HTML через функцию рендеринга. Компоненты принимают реквизиты, похожие на атрибуты HTML.

Компоненты бывают двух типов

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

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

Самый простой способ определить компонент - написать функцию JavaScript. Функциональные компоненты легко читать и понимать.

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="John" />;
ReactDOM.render(element, document.getElementById('root') );

Компонент класса:

Компонент класса требует, чтобы вы расширили React.Component и создали функцию рендеринга, которая возвращает элемент React. Это поможет вам отделить код от одного компонента к другому.

import React from 'react';
default export class Welcome extends React.Component {
constructor(props){
   super(props);
}
render() {
      return <h1>Hello, {this.props.name}</h1>;
 }
}
//Usage
ReactDOM.render(
<Welcome name="John" />, 
document.getElementById('root')
);

Остальное содержание будет рассмотрено в следующей статье ... обновлю ссылки после публикации ..