Краткое руководство, которое поможет вам понять и создать программы ReactJS

kratkoe rukovodstvo kotoroe pomozhet vam ponyat i sozdat programmy reactjs?v=1656557424

Этот пост разделен на 2 части

  1. Первая часть показывает, как создать простую программу React с помощью CLI create-react-app и объясняет структуру проекта.
  2. Вторая часть объясняет существующий код, который я опубликовал на Github. Этот код демонстрирует использование компонентов, связь между компонентами, осуществление HTTP-вызовов и React Bootstrap (загрузчик, написанный для React).

Часть 1

Установите NodeJS, если его еще нет

NodeJS требуется, поскольку библиотеки, необходимые для React, загружаются с помощью менеджера пакетов узлов ( npm ). Обратитесь к установке NodeJS.

Установите пакет узла create-react-app

create-react-app Пакет node помогает настроить проект React. Установите глобальный пакет узла create-react-app с помощью следующей команды.

npm install -g create-react-app

Создайте проект

Проект можно создать с помощью create-react-app. Для создания проекта используйте следующую команду.

npx create-react-app first-react-app

программа первой реакции это название программы. Вышеуказанная команда создает папку под названием программа первой реакции которая является папкой проекта. Чтобы проверить, правильно ли настроено все, перейдите в папку проекта и запустите программу с помощью следующей команды.

cd first-react-app
npm start

Перейдите в свой браузер и перейдите по следующему URL-адресу локальный хост: 3000
Вы должны видеть, что ваше приложение работает. В вашем браузере приложение будет выглядеть так:

w1SbWWOdE5XDpq25D6aYcw6e7RjJSJupdp1T

Объяснение основной структуры папок

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

  1. package.json: Этот файл содержит список необходимых зависимостей узлов.
  2. public/index.html: Когда приложение запускается, это первая загружаемая страница. Это будет единственный html-файл по всей программе, поскольку React обычно пишется с помощью JSX которую я расскажу позже. Кроме того, этот файл содержит строку кода

    . Эта линия очень важна, поскольку все компоненты программы загруженыdin к этому разделу.

  3. src/index.js: Это файл JavaScript, соответствующий index.html. Этот файл имеет такую ​​строку кода, которая очень важна. ReactDOM.render(document.getElementById(‘root’));
  4. Об этом говорит приведенная выше строка кода App Компонент (в скором времени охватит компонент программы) нужно загрузить в элемент html с идентификатором корень. Это не что иное, как элемент div присутствует в index.html.
  5. src/index.css: файл CSS, соответствующий index.js
  6. src/App.js : Это файл для App Компонент. App Компонент является основным компонентом React, который действует как контейнер для всех остальных компонентов.
  7. src/App.css : Это файл CSS, который отвечает App Компонент
  8. построить: Это папка, в которой хранятся встроенные файлы. Приложения React можно разрабатывать с помощью JSX или обычного JavaScript, но использование JSX, безусловно, облегчает кодировку для разработчика :). Но браузеры не соображают JSX. Поэтому JSX нужно конвертировать в JavaScript перед развертыванием. Эти преобразованные файлы сохраняются в папке сборки после объединения и минимизации. Чтобы увидеть папку сборника, выполните следующую команду
npm run build 

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

Компонент React выполняет определенную функциональность. Приложение – это не что иное, как набор компонентов. Каждый компонент может иметь несколько дочерних компонентов и компоненты могут взаимодействовать друг с другом.

Давайте сейчас создадим компонент React.

Внутри src папку создать файл под названием as FirstComponent.js и скопируйте следующий код FirstComponent.js.

import React, {Component} from 'react';

export default class FirstComponent extends Component {

constructor(props) {
    super(props)
    }

render() {
    const element = (<div>Text from Element</div>)
    return (<div className="comptext">
    <h3>First Component</h3>
        {this.props.displaytext}
        {element}
    </div>)
    }
}
  1. Имя компонента FirstComponent что обозначается именем файла, а также в операторе export default class FirstComponent extends Component
  2. The реквизит атрибут в конструкторе будет содержать все параметры, передаваемые в качестве входных данных для этого компонента.
  3. render(): Возвратное значение этой функции отображается (отображается) на экране. Каждый раз, когда вызывается функция render(), экран повторно воспроизводится. Обычно это делается программой автоматически. Код, который в этой функции очень похож на html, есть не что иное, как JSX.

JSX

JSX выглядит очень похоже на HTML, но имеет полную мощность javascript. Здесь я объясню код JSX и что он пытается сделать.

render() {
    const element = (<div>Text from Element</div>)
    return (<div className="comptext">
    <h3>First Component</h3>
        {this.props.displaytext}
        {element}
    </div>)
    }

Первая строчка const element = (<div>Text from Element</div>) Создает элемент div и назначает его константе, которая называется элементом. Это своеобразный синтаксис, который вы видите Ничегоing но JSX.

Внутри оператора Return вы увидите следующий синтаксис кода.

<div className="comptext">
    <h3>First Component</h3>
        {this.props.displaytext}
        {element}
</div>

Здесь className используется для указания класса CSS. <h3>First Component</h3> это просто обычный синтаксис html. {this.props.displaytext} используется для доступа к атрибуту, который называется displaytext из props (поэтому displaytext передается как вход всякий раз, когда этот компонент вызывается). Здесь текст дисплея это только имя, которое я дал. {element} – создана константа, содержащая, в свою очередь, элемент div.

Использование компонента

FirstComponent создано, но пока нигде не используется. Добавим FirstComponent к App Компонент. Вот модифицированный код для App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import FirstComponent from './FirstComponent'
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <FirstComponent displaytext="First Component Data"/>
      </div>
);
  }
}
export default App;

FirstComponent нужно импортировать в App Component First, выполняемую в строке import FirstComponent from ‘./FirstComponent’

Затем FirstComponent прилагается к App Компонент с помощью линии <FirstComponent displaytext=”First Component Data”/>

Здесь текст дисплея передается как атрибут FirstComponent.

Теперь вы можете запустить приложение с помощью команды npm start

Вы должны увидеть следующий результат в обозревателе.

1HRMdkexuXF6YgrAp1NwPXyzZsIuebRpiFjB

Приветствую?

Теперь вы знаете, как создать приложение React, а также создать и использовать компоненты React. Вы также немного знаете о JSX 🙂

Следующая часть объясняет существующий код React от Github. Код части 2 отличается от кода, который мы написали в части 1.

Часть 2

код

Нижеследующий код объясняется здесь, поэтому клонируйте репо на свой компьютер. Repo содержит инструкции по клонированию и настройке кода на вашем компьютере.

https://github.com/aditya-sridhar/simple-reactjs-app

URL-адрес программы

Чтобы увидеть, как выглядит конечная программа, вы можете нажать на такой URL-адрес. Это даст хорошее представление о том, что программа пытается сделать

https://aditya-sridhar.github.io/simple-reactjs-app

На экране мобильного телефона приложение будет выглядеть так

0aE6v5BOa389ObdKL-9oglyr4KLYhBTKhrTm

Что делает эта программа

Это приложение отображает список клиентов. Когда клиент выбран, он отображает детали выбранного клиента. Это одностраничное приложение (SPA). React лучше всего подходит для одностраничных программ. Одностраничная программа отображает все на одной странице.

Объяснение структуры программы

Клиенты Компонент

Этот компонент отображает список клиентов. Это соответствует файлу src/Customers.js . Этот компонент имеет следующий конструктор.

constructor(props) {
    super(props)
    this.state = {
        selectedCustomer: 1
    }
}

реквизит уже были объяснены. Но здесь вы тоже видите это.состояние. Каждый раз, когда состояние меняется, компонент воспроизводится повторно. Здесь государство имеет один параметр называется избранныйКлиент который должен отслеживать, какой клиент выбран. Если избранныйКлиент меняется потом компонент и его дочерние компоненты отображаются повторно. Конструктор используется только для установки реквизит и государство. также, реквизит след никогда не редактироваться внутри компонента.

Следующее, что вы заметите, это следующий код.

componentDidMount() {
    this.getCustomerData();
}

componentDidMount() это функция, которая вызывается, как только компонент воспроизводится. Таким образом, это можно использовать для установки некоторых исходных значений, а также данных о загрузке. Здесь он вызывает функцию под названием as getCustomerData()

Следующий фрагмент кода, который вы видите

getCustomerData() {
    axios.get('assets/samplejson/customerlist.json').then(response => {
        this.setState({customerList: response})
    })
};

Эта функция getCustomerData() выполняет HTTP-вызов, чтобы прочитать образец json, содержащий список клиентов активы/samplejson/customerlist.json. После успешного получения ответа состояние системы изменяется путем назначения ответ к customerList. Вы можете удивиться, почему мы никогда не добавили customerList в конструктор. Причина в том, что можно динамически добавлять параметры в State в любой момент кода. Единственное требование состоит в том, что в конструкторе должно быть определено по крайней мере пустое состояние.

Здесь axios библиотека используется для вызова HTTP. Я предоставил документацию для axios в разделе Ссылки.

Следующая функция – это render() функция, которая возвращает элементы, которые необходимо отобразить на экране. Основные моменты в функции визуализации

<Button bsStyle="info" onClick={() => this.setState({selectedCustomer: customer.id})}>

Click to View Details

</Button>

Каждый клиент в списке имеет кнопку, которая называется Нажмите для просмотра сведений. Приведенный выше фрагмент кода сообщает, что каждый раз, когда нажимается кнопка, изменяйте состояние избранныйКлиент идентификатор выбранного клиента. Поскольку здесь меняется состояние, компонент и его дочерний компонент будут повторно воспроизведены.

Другой важный фрагмент кода

<CustomerDetails val={this.state.selectedCustomer}/>

Этот фрагмент рассказывает об этом CustomerDetails является дочерним компонентом Клиенты компонент, а также передает избранныйКлиент id как вход в CustomerDetails компонент

Компонент CustomerDetails

Этот компонент отображает детали выбранного клиента. Вот некоторые важные фрагменты кода из этого компонента:

componentDidUpdate(prevProps) {

//get Customer Details only if props has changed
//(props is the input) 
    if (this.props.val !== prevProps.val) {
        this.getCustomerDetails(this.props.val)
    }
}

componentDidUpdate() функция вызывается всякий раз, когда компонент повторно воспроизводится. Вот мы звоним getCustomerDetails() Функция, если вход в этот компонент изменился при повторной визуализации компонента. Вход передан в getCustomerDetails() функция есть this.props.val. this.props.val в свою очередь, получает свое значение от Клиенты Component ( selectedCustomer был передан как вход в это ). Чтобы узнать, изменился ли ввод, используйте фрагмент кода this.props.val !== prevProps.val

getCustomerDetails(id) {
    axios.get('assets/samplejson/customer' + id + '.json').then(response => {
        this.setState({customerDetails: response})
    })
};

getCustomerDetails() функция выполняет HTTP-вызов, чтобы получить образец json, содержащий сведения о клиенте. The id Параметр используется, чтобы узнать, какие данные клиента нужны. id есть не что иное, как this.props.val. Когда ответ успешно получен, состояние этого компонента изменяется путем назначения ответ к Детали клиента.

The render() Функция для этого компонента достаточно проста и проста, поэтому не будем рассматривать это здесь

Ссылки

create-react-app: Обратитесь к, чтобы узнать, что можно сделать с помощью приложения create-react-app

ReactJS: Обратитесь, чтобы понять концепцию ReactJS. Документация очень хорошая.

React Bootstrap: Обратитесь, чтобы понять, как использовать React Bootstrap

axios: Обратитесь к, чтобы узнать больше о том, как использовать библиотеку axios для создания HTTP-запросов

Еще раз поздравляю?

Теперь вы знаете, как использовать компоненты, как общаться от родительского до дочернего компонента, а также немного о рендеринге.

Основные концепции были отражены в этой публикации, и я надеюсь, что это будет полезно

Об авторе

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

Не стесняйтесь связаться со мной в моем аккаунте LinkdIn https://www.linkedin.com/in/aditya1811/

Вы также можете подписаться на меня в Twitter https://twitter.com/adityasridhar18

Мой веб-сайт: https://adityasridhar.com/

Другие ответы от меня

Краткое руководство, которое поможет вам понять и создать программы Angular 6

Краткое поступление в Vue.js

Добавить комментарий

Ваш адрес email не будет опубликован.