React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Get started with React! (with Hooks)

This course gets you up and running with react in **under a minute** by using codesandbox.io to skip the painful process of setting up your dev environment. 

You'll learn:

- How to write React code with JSX
- How to "think in React"
- How to use local state to store changing data
- How to pass data from parent components to children components using props

So get started now!  You need some javascript and HTML experience, but no prior React experience is needed.

Go to codesandbox.io and start a new sandbox using the "React" template

Then, you can edit the HTML (which is actually a special form of javascript called JSX) to make your first custom component!

CodeSandbox is great because it skips the need to set up your on development environment - so you can get started super quickly.

Write Your First React Component with CodeSandbox.io

The React UI loop follows these steps:

1. You have data
2. That data gets displayed
3. The data updates (by user input, or a fetch from the server, etc)
4. The UI updates

The React "magic" is in step 4 - React automatically updates the UI based on your changing data in a performant way.  That means you can focus on your data and UI layout, and NOT on how you would have to update the DOM to show those changes.

How React Works

Every UI on the web can be thought of as a tree of "components".

Break down your UI in your mind by separating out "like" components.  Those are what you'll turn into React components for displaying your data.

Think in React by Breaking Your UI into Components

React components are functions that return JSX (which looks like HTML, but is actually a flavor of javascript).

Once you create a new function component that returns JSX, you can then use it from inside of another component by returning it like any other component.

Write a Custom Function Component in React with JSX

You can reuse your custom react components multiple times and build them into a tree of components like this:

```
<Greeting />
<div>
  <Greeting />
</div>
```

Notice that the `<div>` tag contains the `Greeting` tag as a child, but the `Greeting` tag contains no children - so it requires the trailing slash (`/>`) so it can be a "self closing" tag

Building a Tree of UI Components in React with Children or with Self-closing tags

To pass data from a parent react component to a child react component, we can supply "attributes" to the JSX tags like:

```
<Greeting name="React" />
```

That `name` attribute is then available in the `Greeting` component as a `prop` (which is an object passed in as the first argument to the react function component.

That means we can display that name from the `props` argument like this:

```
function Greeting(props) {
  return(<p>{props.name}</p>)
}
```

And so you can customize any react component by passing data down in the form of that props argument.

Reusing Custom React Components by Passing Data Down as Props

Data inside of a react component that can change (with user or server interaction) is called `state`.

import `useState` from react, and then we can use that function to create some local state by calling it with a default value:

```
const [count, setCount] = useState(5)
```

`useState` returns an array of two items: the first is the current value of the state, and the second is a function that we can use to update that state.

Create State Data that can Change in a React Component with useState

After creating some state with `useState`, we can call the set function to update the data in local state, which will automatically "re-render" the component, and update the UI.

To do that, we'll first create a new function that will update the state that we want:

```
const updateCount = () => {
  setCount(count + 1)
}
```

and then we can pass that `updateCount` function into the `onClick` of a button:

```
<button onClick={updateCount}>Click Me!</button>
```

which will then call `updateCount` once clicked, which will call `setCount`, which will update the `count` state, and automatically display that update on the UI.

Create a Button in React that Changes Local State and Automatically Updates the UI

To display a list of items in react, we can `map` (or loop) over that list and return JSX from inside the map function:

```
    <div>
      {
        props.items.map(item => {
          return <p key={item.id}>{item.title}</p>
        })
      }
    </div>
```

Remember to always include a `key` attribute though! That lets React keep track of each list item internally, which gives you better performance, and may save you from subtle bugs

Display a List in React by Looping Over an Array of Items

There are two main (default) ways to add styles to React components:

First, just normal CSS classes can be added to react components by setting a `className` attribute:

```
<p className='big-text'>BIG</p>
```

(It's called `className` instead of `class` because "class" is a reserved keyword in javascript)

Second, "inline styles can be added as javascript objects to the `style` attribute of a component:

```
<p style={{ fontSize: 20, color: 'blue' }}>Blue</p>
```

Notice that the "double curly braces" represent a javascript object being created _inside_ of JSX, and also that the css attributes are camel cased.

Adding Styles to React Components with CSS or Inline Styles

**🚨 The correct url is now "https://swapi.dev/api/people/"**

Whenever doing a side effect (like fetching data) in React, we can use the `useEffect` hook to perform that action and then set state afterwards.

So we'll fetch some data inside of useEffect like this:

```
  useEffect(() => {
    console.log(props.id)
    fetch("https://swapi.co/api/people/"+props.id)
      .then(response => response.json())
      .then(result => setData(result))
  }, [props.id])
```

Caution! make sure to set the dependency array (the second argument to useEffect) to contain any data that you use inside of the `useEffect`.  Otherwise you could end up with an infinite loop as the useEffect will run every time the component in re-rendered.



Perform Asynchronous Actions (like fetching http data) in React with useEffect

This course is for React newbies and anyone looking to build a solid foundation. It’s designed to teach you everything you need to start building web apps in React right away.

The Beginner's Guide to React

In this course, you'll work through refactoring a component to use a custom hook and learn to apply the patterns used by the React team to your own code.

Shareable Custom Hooks in React

Learn Hooks by taking a modern React codebase that uses classes and refactor the entire thing to use function components as much as possible.

Simplify React Apps with React Hooks

React Crash Course with Hooks

https://app.egghead.io/api/v1/lessons/react-write-your-first-react-component-with-codesandbox-io/subtitles

Chris Achard: [0:00] For this React crash course, we're going to be using CodeSandbox.io. If you want to follow along, go to codesandbox and then click Create Sandbox, and then, in the Overview, you can click the React template.

[0:15] Here we go. We have the files, on the left side here, which we'll minimize, our code, and our browser. We can edit the code to say Hello React, and when we save it, it re-runs, force the Sandbox, and we get to see Hello React.

[0:35] To make a nappy centered in this big browser window, we can hit Command-B and type in styles to get to styles.css. We will just remove the text-align: center and save it again, to line it up on the left.

[0:49] That's it. Congratulations! You've written your first React component.

https://app.egghead.io/api/v1/lessons/react-write-your-first-react-component-with-codesandbox-io/transcript

https://app.egghead.io/api/v1/lessons/react-how-react-works/subtitles

Chris Achard: [0:00] We're going to start with the React UI cycle, which is that you have data, either in your app or you fetch it from a server. You want the data to get displayed on the screen, so you write a React component to do that. The user then interacts with your website, which may cause the data to update. That is going to update the UI automatically.

[0:17] The beauty of React is that happens automatically after you define your components. Once we have a component that is defined by a function, it will be displayed on the screen with ReactDOM. The way we're going to write React will make it so that whenever the data updates, our component will automatically update in the browser.

https://app.egghead.io/api/v1/lessons/react-how-react-works/transcript

https://app.egghead.io/api/v1/lessons/javascript-think-in-react-by-breaking-your-ui-into-components/subtitles

Chris Achard: [0:00] The key UI paradigm in React is components. Everything we're going to break into custom components, and then display that on screen. Here we have a TodoList and we wrap the whole thing in a container. Then we have a SearchBar, which is separate from the TodoList itself. Inside the TodoList there are four TodoItems.

[0:19] Within those components then, we also have the base HTML components. We have text inputs and checkboxes and strings. Those are part of our tree as well.

[0:30] In our sample app so far, we only have a <div> with an <h1> inside of it, but we can build a tree like this, and now we've created a tree of base HTML components which make up our entire React application.

https://app.egghead.io/api/v1/lessons/javascript-think-in-react-by-breaking-your-ui-into-components/transcript

https://app.egghead.io/api/v1/lessons/javascript-write-a-custom-function-component-in-react-with-jsx/subtitles

Chris Achard: [0:00] To define our custom components, we can just write regular functions. We write a function, maybe call it Greeting(). Notice it starts with a capital letter. That's important for functions, by convention.

[0:10] We want to return from that some JSX, which is what this is called down here. JSX looks like HTML, but it's a version of JavaScript that's compiled by Babel before it goes to the browser.

[0:21] From here, we could return a <div>, for example, with an <h1> that says Hello. Inside of JSX, say we have a variable here called name, and it says React. To display that inside of JSX, we use curly braces. Inside the curly braces, we can put any JavaScript expression. Name, by itself, is an expression that will return React.

[0:44] To use this Greeting, we can come down to our app and we can use it like a regular tag. We can use <Greeting /> as a tag. It's a self-closing tag because it has no children. When we save this, we get "Hello, React!" with our custom component.

https://app.egghead.io/api/v1/lessons/javascript-write-a-custom-function-component-in-react-with-jsx/transcript

There are various ways to embed PDFs into your HTML document. Let's explore three of them:

### 1. Using the `embed` Tag

The `embed` tag is a part of the HTML5 specification, making it compatible with most modern browsers. You can embed a PDF using the `embed` tag as follows:

```html
<embed src="home.pdf" type="application/pdf" width="100%" height="100%">
```

However, there's a catch. If the browser does not support PDF embedding (common with some mobile devices), your users might see nothing.

### 2. Using the `iframe` Tag

A safer option to ensure that your users can access the PDF is by using an `iframe`. If a browser fails to render the PDF, it usually triggers a download:

```html
<iframe src="home.pdf" width="100%" height="100%">
  <a href="home.pdf">Download the PDF</a>
</iframe>
```

The message "Download the PDF" will only be displayed if the browser does not support the `iframe` tag. Still, it's not the best experience if the PDF isn't available.

### 3. Using the `object` Tag

The `object` tag offers even more flexibility. If the PDF isn't found, you can provide a fallback, such as an image or a message:

```html
<object data="home.pdf" type="application/pdf" width="100%" height="100%">
  <img src="broken.png" alt="PDF not found">
  <p>Download the PDF <a href="home.pdf">here</a></p>
</object>
```

This way, you can provide a more appropriate error message or an alternative for your users when the PDF isn't available.

In conclusion, while there are multiple ways to embed a PDF in your HTML document, it's essential to consider the user experience, especially in scenarios where the PDF might not be accessible. Using fallback options ensures your users can still access the content one way or another.


https://app.egghead.io/api/v1/lessons/javascript-building-a-tree-of-ui-components-in-react-with-children-or-with-self-closing-tags/subtitles

Embed PDFs in HTML with embed, iframe, and object tags

[00:00] The first way to embed PDFs inside of a document without using JavaScript is using the embed tag. The embed tag takes a source, which in our case is going to be home.pdf, and a type, in our case going to be application.pdf. We can also pass in a width to allow you to take up the

[00:19] full space of the container and a height. Now embed is part of the HTML5 spec, so it's compatible with all modern browsers, but in static markup, the element doesn't provide a mechanism for fallback content. If the browser doesn't support PDF embedding, which still happens frequently

[00:36] with browsers and mobile devices, the end user will see nothing. So there's two ways around that. The first is by using an iframe. With an iframe, we're pointing at the source, which in this case is home.pdf. We don't need to pass in a type, but we will use the width, 100%, and a height.

[00:55] If the browser cannot render a PDF file, it will normally trigger a download. In the very rare occasions a browser doesn't support the iframe tag, we can give a fallback message. We could say

[01:08] download the PDF and then do a href tag. Then if the PDF is not found, we will get our normal iframe. It cannot find something. This message will only be rendered if the iframe tag itself is not

[01:24] supported. But that's not a great experience if the PDF isn't there, which brings us to our third approach, the object tag. The object element takes a data attribute of our home.pdf, takes a type of our application.pdf, and then we'll take our width and our height.

[01:42] So in this case, our fallback can be a fully blown HTML container. So in this case, I might put an image of source broken.png and maybe the same message we had above. Download the PDF here.

[02:00] Now if the PDF can't be found, we have our fallback message that we asked for, which you might decide is more appropriate error handling in this context.

https://app.egghead.io/api/v1/lessons/javascript-building-a-tree-of-ui-components-in-react-with-children-or-with-self-closing-tags/transcript

https://app.egghead.io/api/v1/lessons/javascript-reusing-custom-react-components-by-passing-data-down-as-props/subtitles

Chris Achard: [0:00] To pass data from a parent to a child, we use something called props, or properties. We can pass them as attributes on the JSX tag. This name might be React, and this name might be something different, like Chris. Inside of our function component, the props come in as the first argument to the function.

[0:20] Now, we do not have this name anymore. We have it coming in on our props, so we're going to say props.name, because props is an object filled with whatever attributes we add to it. If we save, we get "Hello, React!" and "Hello, Chris!" Notice how these two Greeting components they can have different props, because they are independent.

https://app.egghead.io/api/v1/lessons/javascript-reusing-custom-react-components-by-passing-data-down-as-props/transcript

https://app.egghead.io/api/v1/lessons/javascript-create-state-data-that-can-change-in-a-react-component-with-usestate/subtitles

Chris Achard: [0:00] To describe data that we want to change, we're first going to import useState from 'react', and useState will give us some state that can change when we'll re-render our application.

[0:10] We can call useState and we pass in a default value. Let's say we're making a counter here. We can pass in the default value of . useState returns an array. We can destructure that array like this.

[0:23] That array contains two things. The first is it contains the value of the state. The second is it returns a function that can be used to update that state. We call these count and setCount. You can name these anything you'd like.

[0:37] To display the state, we can put that in curly braces like normal, so we can say You've clicked, and inside of curly braces we can say {count} times. If we run this now, each greeting says, "You've clicked  times." Let's say we change our default to 5. Now it will say, "You've clicked 5 times."

[1:01] We have a state value in count that we're going to be able to change inside of our function component and automatically re-render and re-display our component.

https://app.egghead.io/api/v1/lessons/javascript-create-state-data-that-can-change-in-a-react-component-with-usestate/transcript

https://app.egghead.io/api/v1/lessons/javascript-create-a-button-in-react-that-changes-local-state-and-automatically-updates-the-ui/subtitles

Chris Achard: [0:00] To update this count state, we're going to call setCount with some new value. Let's make a button to do that. The button can say Click Me. As an attribute to the button we're going to say onClick. Notice how onClick is camel cased, not like the HTML onclick. Inside of there, we're going to put curly braces because we want a JavaScript reference to a function that we're going to write.

[0:25] Let's write that function first. We can say updateCount, and that will be a regular function. Inside of that, we can say setCount, so we're going to call the updater function with count + 1. It's going to take whatever the value of count is and set it to that plus one.

[0:43] In the onClick attribute down here, we can just pass the updateCount function, and then, on a click of button, it will call updateCount which will set the count to the count + 1. Save that and see if it works.

[0:55] It starts at 5, because we have the default set at 5. If we change that back to , then it starts at  and we can click up on Hello, React! And click up on Hello, Chris!

[1:06] Notice how the state here is different and independent than the state here. Each component has its own internal state.

https://app.egghead.io/api/v1/lessons/javascript-create-a-button-in-react-that-changes-local-state-and-automatically-updates-the-ui/transcript

https://app.egghead.io/api/v1/lessons/javascript-display-a-list-in-react-by-looping-over-an-array-of-items/subtitles

Chris Achard: [0:00] Let's say we have some data here and we want to display that in a list on the web browser. First, let's make a new function component. We'll call that function component MyList for now. That will take props because what we're going to do is render the list down here. We can render it, and we're going to pass the data as props.

[0:19] We might say items = the JavaScript value, DATA. Now this props will have props.items, which will be the data array. We did that mostly for practice in passing props.

[0:34] From MyList, we're going to return JSX. Let's make a <div> wrapper. To loop over this data, we're going to use curly braces to run JavaScript, and we're going to call props.items -- so we have access to the array -- .map(). Map takes a function which will return each item in a loop. From there, we want to return just a paragraph with the title. Inside of here we can say item.title.

[1:04] We're almost done, but on every iteration of the loop we're going to also want to set a key. The key is React specific and lets React keep track of which paragraph tag goes to which row in the data. It means you'll get better performance. We're going to set that to item.id because id is unique across all of these.

[1:22] If we save this now, we get our three list items displayed with our map function.

https://app.egghead.io/api/v1/lessons/javascript-display-a-list-in-react-by-looping-over-an-array-of-items/transcript

https://app.egghead.io/api/v1/lessons/javascript-adding-styles-to-react-components-with-css-or-inline-styles/subtitles

Chris Achard: [0:00] There are two built-in ways to use CSS inside of React. The first is to use regular style sheets. Let's go to styles.css and make a new style called big-text. This is really just a regular CSS file.

[0:12] We can say that our font-size might be 40 pixels. Let's save that and go back to index. Now, we can make a new function component. We'll call this NormalCSS.

[0:24] From that, we're going to return in paragraph tag and we can say BIG. To set the class, normally we would set class equals HTML. The problem is class is reserved keyword in JavaScript.

[0:35] We're going to say className and then that can be the string big-text which we'll link it to proper style. Let's render NormalCSS as a custom component here. Then when we save, we get some BIG text.

[0:50] The second method is to use what's called inline styles. We make a new function called InlineStyle. From that, we're also going to return a paragraph and in here, we'll make some Blue Text.

[1:03] To make the style here, we're going to pass a style attribute and instead of taking a string that takes some JavaScript. Inside of that JavaScript, we're going to use another set of curly braces to make a JavaScript object.

[1:16] We have double curlies here. Inside of the style, we can set fontSize, for example, to 20. Now, notice that this is camelCase and not dashes like it is in regular CSS. It's camelCase because this is JavaScript we're writing now.

[1:30] We can say fontSize 20 and we might say the color is going to be 0000ff. Also notice we put the color inside of a string here because since this is JavaScript, we can't just use the pound sign. Now we can render InlineStyle.

[1:48] When we save that, we get some Blue Text as well. If this double curly braces confuses you, then you can do it like this as well. We can say that our const, our style is going to equal a new object with fontSize 20 and a color. Now, instead of declaring it down here, we can say that our style equals the JavaScript value of this style object we just made.

[2:14] If we save that, we get the same result. All we did was take this and cut it and paste it in here. That's why we get the double curlies.

https://app.egghead.io/api/v1/lessons/javascript-adding-styles-to-react-components-with-css-or-inline-styles/transcript

https://app.egghead.io/api/v1/lessons/javascript-perform-asynchronous-actions-like-fetching-http-data-in-react-with-useeffect/subtitles

Chris Achard: [0:00] To perform any asynchronous functions or functions with side effects, first we're going to import useEffect from React. We're going to use useEffect to tell React when we have side effects.

[0:11] Let's make a function called GetData. That's going to take some props. We can use GetData down here. Let's pass an id into that prop. We'll start with 1 as an id. From GetData, we're going to return some JSX. Inside of that, we're going to put whatever comes back from an HTTP call that we're going to do.

[0:33] To do that, let's use useEffect. We need to pass useEffect a function. Here's a function that we're going to pass to useEffect. Now we can do any asynchronous or side effect thing that we want. We could call fetch, for example, to get some JSON from the Star Wars API. We're going to get the person that is in our props.id.

[0:59] As soon as we do that, we have to pass a second argument to useEffect, which is an array of dependencies. To that, we will pass our props.id. What this is saying is that any time the props.id changes, it will rerun this useEffect to fetch the new person.

[1:16] Then we can actually do something with this. Let's first take the response and turn it into JSON. From that, we will have some JSON data. Let's set this so that we can display the person's name on the page. To do that, we can't just go and set the person's name, we have to set state, because setting state is how we change the UI.

[1:40] We're going to make a new bit of state called data and setData. By default, we're going to set that to an empty object. Now we can use setData down here to set the data to the result that comes back. Then down in our render method, we can say that the name equals the data if it exists, so data && data.name. This will only render data.name if data exists, and is not NULL or undefined.

[2:10] Let's save this. We get that the name is Luke Skywalker. You can see a delay there, and that's when this fetch was happening. Then we could change our id to 2, for example. If we save, we get the name is C-3PO. useEffect is how we can get data fetches in our app.

[2:28] One word of warning is that be very sure to remember this array for two reasons now. One is that if the props.id changes, then we want to refetch the name. However, there's something else going on here, which is that setData will change data. If we don't set this array here, then it will rerun the useEffect whenever data changes.

[2:50] If we had nothing here, then what would happen is the useEffect would run. It would set the data which would change data, which would rerun through the component, and rerun the useEffect. That would get into an infinite loop.

[3:02] You have to be careful when using useEffect to always set your dependencies correctly.

https://app.egghead.io/api/v1/lessons/javascript-perform-asynchronous-actions-like-fetching-http-data-in-react-with-useeffect/transcript

React Crash Course with Hooks

Chris Achard

What you'll learn:

You might also like these resources:

The Beginner's Guide to React

Shareable Custom Hooks in React

Simplify React Apps with React Hooks

Course Content

You might also like these resources:

The Beginner's Guide to React

Shareable Custom Hooks in React

Simplify React Apps with React Hooks