Skip to content
← back to home

React in 100 Seconds

Fireship

youtube· 2:05standard

1.React Basics: Components and JSX

0:00 / 0:45

This chapter introduces React as a JavaScript library for building user interfaces, developed by Facebook. It explains that React uses components, which are essentially JavaScript functions, to create reusable UI parts. The chapter also covers JSX, a special syntax that allows combining JavaScript with HTML markup for defining the UI.

  • React
  • Components
  • JSX

What's inside this course

  1. 0:00

    1. React Basics: Components and JSX

    This chapter introduces React as a JavaScript library for building user interfaces, developed by Facebook. It explains that React uses components, which are essentially JavaScript functions, to create reusable UI parts. The chapter also covers JSX, a special syntax that allows combining JavaScript with HTML markup for defining the UI.

  2. 0:45

    2. Managing State with Hooks

    This chapter delves into how React handles dynamic data and user interaction. It explains the concept of props for passing data into components and introduces the state hook for managing a component's internal state. The chapter demonstrates how to use `useState` to create reactive state and update the UI based on user actions, such as button clicks.

  3. 1:45

    3. React Ecosystem and Related Technologies

    This chapter highlights the extensive ecosystem surrounding React, emphasizing that its strength lies not just in the library itself but in the vast community and supporting tools. It discusses how React focuses on UI and allows other concerns like routing, state management, and animation to be handled by specialized open-source libraries. Examples of popular libraries for various use cases are provided.

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

Full transcript of “React in 100 Seconds”

— 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