Рубрики
Без рубрики

Реквизит в реакции: Базовый грунт

Я недавно начал изучать реагирование, поэтому я хотел поделиться небольшим количеством этого обучения с вами … Теги с JavaScript, реагируют, начинающим.

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

Реагирование было разработано DEV на Facebook, пытаясь смягчить проблемы безопасности, которые Facebook переживала в 2010 году. Реагировать не является каркасом, который имеет что угодно с безопасностью, но вот как это началось. Это не важная информация для этого конкретного блога, но я большой верующий в непрерывных преимуществах начала новых вещей и исследований … Здесь у нас есть проблема с хакерами, используя JavaScript в браузере, пытаясь украсть данные, и результат попытки решить эту проблему? Может быть, самая популярная веб-каркас всех времен! Я отвлекся…

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

Разработка реагирования все начинается с присоединения нашего верхнего уровня компонента до DOM на «root» div.

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


ReactDOM.render(, document.getElementById('root'))

Обычно эта линия кода живет в файле «index.js», но, как мы все знаем, мы делаем все, что мы хотим, если мы пишем действительный код. Позвоните в файл картофеле, если хотите!

Итак, часть финальной линии – наш родительский компонент. Как вы, возможно, заметили, мы импортируем этот компонент из другого файла под названием «App.js». Это главный принцип реагирования и развития в целом: разделение опасений.

Переезд в наш файл app.js, мы импортируем дочерний компонент “Moviecard”. У нас есть некоторые данные о фильмах, которые мы хотим отображать на каждой карте фильма, поэтому мы назначаем данные переменным и передаем эти переменные в нашу компонент кинокарты. Синтаксис с компонентами реагирования аналогичен тегам HTML, и мы можем просто пройти эти опоры до дочернего компонента, поскольку мы назначаем атрибуты со значениями в элемент HTML.

import React from 'react'
import MovieCard from './moviecard'

class App extends React.Component {

  render() {
     const title = "Mad Max"
     const posterURL = 
          "http://image.tmdb.org/t/p/w342/kqjL17yufvn9OVLyXYpvtyrFfak.jpg"
     const genresArr = ["Action", "Adventure", "Science Fiction", "Thriller"]
    return (

     
     )
  }
}

В нашем компоненте фильма карты мы будем называть эти реквизиты в любом месте, которые нам нужны, используя «this.proops.the_name_of_the_prop_we_passed». Реквизиты – это объекты (не все ??) Таким образом, мы проходим и называем их внутри кудрявых скобок.

class MovieCard extends React.Component {
  render() {
    return (
      

        {this.props.title}
        
{this.props.title}

        {this.props.genres.join(', ')}

Даже с моим ограниченным опытом в реакции я нашел его очень приятным. Если у вас нет опыта работы с реагированием, вы можете проверить их документацию в https://reactjs.org/docs/getting-started.html.

Реагистрация поддерживается Facebook, и их документация является примерной.

Оригинал: “https://dev.to/monkeypineapple/props-in-react-a-basic-primer-1i07”

Читайте ещё по теме: