Skip to content
← back to home

React in 100 Seconds

Fireship

youtube· 2:05standard

1.Основы React: компоненты, JSX и состояние

0:00 / 1:45

В этой главе мы узнаем, что такое React, как создавать компоненты с помощью JSX и как управлять внутренним состоянием компонента с помощью хука useState. Мы также рассмотрим, как передавать данные в компоненты через props.

  • React
  • Компоненты
  • JSX
  • Props
  • useState

What's inside this course

  1. 0:00

    1. Основы React: компоненты, JSX и состояние

    В этой главе мы узнаем, что такое React, как создавать компоненты с помощью JSX и как управлять внутренним состоянием компонента с помощью хука useState. Мы также рассмотрим, как передавать данные в компоненты через props.

  2. 1:45

    2. Экосистема React и ее преимущества

    Эта глава посвящена обширной экосистеме React, которая предлагает множество библиотек для маршрутизации, управления состоянием, анимации и других задач. Мы также узнаем о React Native для разработки мобильных приложений.

Every chapter ends with a checkpoint (quiz, flashcards, retell, diagram, or prediction) and the course closes with a final boss-fight. More courses →

Transcript (67 segments)
0:00react a javascript library for building
0:03user interfaces developed at facebook
0:05and released in 2013 it's safe to say
0:07react has been the most influential ui
0:09library of recent memory we use it to
0:11build components that represent logical
0:13reusable parts of the ui the beauty of
0:15react is that the simplicity of building
0:17a component has been brought down to its
0:19theoretical minimum it's just a
0:21javascript function it's so easy a
0:23caveman could do it the return value
0:25from this function is your html or ui
0:27which is written in a special syntax
0:29called jsx allowing you to easily
0:31combine javascript with html markup if
0:34you want to pass data into a component
0:35you simply pass it a props argument
0:37which you can then reference inside the
0:38function body or in the ui using braces
0:41if the value changes react will react to
0:44update the ui if we want to give our
0:46component its own internal state we can
0:48use the state hook the hook is just a
0:50function that returns a value as well as
0:52a function to change the value in this
0:54case count is our reactive state and
0:56setcount will change the state when used
0:58in the template the count will always
1:00show the most recent value then we can
1:02bind set count to a button click event
1:03so the user can change the state react
1:06provides a variety of other built-in
1:07hooks to handle common use cases but the
1:09main reason you might want to use react
1:11is not the library itself but the
1:12massive ecosystem that surrounds it
1:14react itself doesn't care about routing
1:16state management animation or anything
1:18like that instead it lets those concerns
1:20evolve naturally within the open source
1:22community no matter what you're trying
1:23to do there's very likely a good
1:25supporting library to help you get it
1:26done need a static site you have gatsby
1:28need server side rendering you have next
1:30for animation you have spring for forums
1:32you have formic state management you've
1:34got redux mobx flux recoil x state and
1:36more you have an endless supply of
1:38choices to get things done the way you
1:39like it as an added bonus once you have
1:41reactdown you can easily jump into react
1:43native and start building mobile apps
1:45and it's no surprise that knowing this
1:47little ui library is one of the most
1:48in-demand skills for front-end
1:50developers today this has been react in
1:52100 seconds if you want to see more
1:53short videos like this make sure to like
1:55and subscribe and check out more
1:56advanced react content on fire ship i o
1:59and if you're curious how i make these
2:00videos make sure to check out my new
2:01personal channel and video on that topic
2:04thanks for watching and i will see you
2:05in the next one