Dad Joke Break Using JSX

[00:00] What kind of bagel can fly? A plane bagel! Woo! Haha! Alright, yep, good one. Good time to take a break now. Stand up, stretch, do whatever you need to do to get your body moving. And then, yeah, maybe get a snack or something. Go say something nice to somebody. That would be a good thing. Make somebody's day. And then come back because we've still got some more

[00:19] good stuff about React to Learn. And I'm happy that you're here.

Ever found yourself staring at React code, feeling like you're missing something crucial? You're not alone. Many developers use React without understanding the fundamentals in depth.

This can leave you struggling when faced with more complex challenges down the road.

But you can build a rock-solid React foundation that will transform how you approach React development for the rest of your career.

This tutorial guides you through the essential building blocks of React. You'll start from scratch and gradually build up to creating custom components, gaining invaluable insights along the way. By understanding not just the 'how', but the 'why' behind React's functionality, you'll transform your approach to React development.

### What to Expect:

- **Hello World in JS**: Pure JavaScript to understand the basics.

- **Raw React APIs:** Use React and ReactDOM without JSX.

- **JSX:** Explore the power and syntax of JSX.

- **Custom Components:** Create and use your first React component.

By the end of this tutorial, you'll have a deeper understanding of:

- The relationship between JavaScript and React

- How React elements are created and rendered

- The purpose and power of JSX

- The nature of React components and their role in building UIs

<Callout ctaLink="https://epicreact.dev/buy">
This tutorial is an excerpt from the React Fundamentals workshop
</Callout>

Learn React from scratch: build components, understand JSX, and master core concepts. Understand the 'why' and 'how' behind React's functionality. 

Get Started With React 

Get Started with React Intro

Intro

Hello World in JS

Generate the Root Node

Dad Joke Break

Intro to Raw React APIs

Create React Elements

Nesting Elements

Deep Nesting Elements

Dad Joke Break Raw React APIs

Raw React APIs

Intro to Using JSX

Compiling JSX

Interpolation

Spread props

Nesting JSX

Fragments

Using JSX

Intro to Custom Components

Simple Function

Raw API

JSX Components

Props

Dad Joke Break Custom Components

Custom Components

Get Started with React Outro

Get Started With React

Get Started With React

Transcript

Dad Joke Break Using JSX

Transcript