После моей серии JavaScript: https://dev.to/rickavmaniac/javascript-my-learning-journey-part-1-what-is-javascript-role-and-use-case-49a3

Теперь я готов начать свое путешествие в React:)

Нажмите «Следуй», если не хочешь ничего не пропустить. Я опубликую здесь на dev.to, что я узнаю на своем курсе React накануне.

Без лишних слов, вот краткое изложение моих заметок на 2 -й день.

Мой первый компонент

Давайте создадим наш первый компонент React, создав имя функции. Обратите внимание, что имя компонента React всегда начинается с прописного.

Чтобы отобразить компонент, это как любой другой тег HTML, мы помещаем его внутрь <>

function Welcome() {
  return 
Hello React!
}
ReactDOM.render(, document.querySelector('#app'))

Мы также можем передать свойства этому компоненту.

function Welcome(props) {
  return 
Hello {props.name}
}
ReactDOM.render(, document.querySelector('#app'))

Эти свойства содержатся в объекте (реквизит), а в объекте JS можно деконструировать, чтобы упростить понимание логики.

function Welcome({name}) {
  return 
Hello {name}
}
ReactDOM.render(, document.querySelector('#app'))

Поскольку компонент действует как тег HTML, который означает, что также можно приложить что -то внутри.

Содержание, которое передается в компонент, может быть передано с детьми реквизита

function Welcome({name, children}) {
  return 

      
Hello {name}
      
{children}
    
}
ReactDOM.render(
  Welcome to React, document.querySelector('#app'))

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

Поэтому, если вы любите писать два заголовка, вы должны поместить их в родительский элемент, например, элемент Div

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

Функция является одним из способов создания компонента в React. Вы также можете использовать класс

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

          
Hello {this.props.name}
          
{this.props.children}
    
  }
}
ReactDOM.render(Welcome to React, document.querySelector('#app'))

Наконец, мы можем создать основной компонент, который называют другие компоненты

function Home() {
    return 

        
        
    
}
ReactDOM.render(, document.querySelector('#app'))

Вывод

Вот и все на сегодня. Нам еще есть чему поучиться, так что увидимся завтра … Если вы хотите не упустить ничего не пропустить, нажмите, следуй за мной!

Следуйте за мной в Твиттере: Следуйте @justericchapman

Оригинал: “https://dev.to/ericchapman/react-101-part-2-my-first-component-3ack”