React is JavaScript library for creating user interfaces. Everything in React is a component. React components are independent and reusable pieces of code. Each component contains its own functionality and returns markup.
- can define React
- can define DOM
- can define JSX
- can reproduce the basic structure of a function-based React component
- can describe a component
- can demonstrate the process of setting up a basic function-based React component
- can demonstrate the creation of multiple components
- can display multiple components inside a container component
- React
- DOM
- component
- functional components
- JSX
- React fragments
- component invocation (component call)
cdinto thereact-challengesrepository- Create a new branch:
intro-initials(ex. intro-sp) toucha file with no spaces and.htmlextension:intro-student.html(ex. intro-sarah.html)- Open the file in a text editor
- Code!
- Seeing a blank page? Inspect and look for errors!
React is a JavaScript library used to build webpages, mobile web pages, and even native mobile applications. It was created by Facebook as that application grew and became more dynamic. It is component based, which means that we use it to build many small parts that are joined together to form an entire application. This feature turns out to be extremely scalable.
React is a popular tool not only because of its reusable structure but also because of its efficient response to user interactions. When we look at a website in the browser, we are looking at the DOM. The DOM which stands for Document Object Model is the visual representation of code. React makes very efficient user interactions by identifying the specific element where the change occurred and only updating that particular element.
As developers, we want to write as few lines of code as possible. When we repeat code, it makes the developer gods cry. We put code that we want to reuse in a function and then call that function when we want to use that code!
Components are a specific type of function that can contain JavaScript logic and return markup that gets rendered to the browser. Everything in React is a component. There are different ways of creating React components, but in this lesson, and throughout the course, we will work primarily with functional components. Functional components are React components with the base structure modeled from a JavaScript function.
JavaScript is what we have been learning up to this point. In React, we use a markdown syntax extension to JavaScript known as JSX. JSX is JavaScript flavored markdown that behaves very similarly to HTML. There are a couple small difference between HTML and JSX. JSX uses the syntax className rather than HTML's class to modify the look and behavior of a JSX element. This is because class is already a protected word in JavaScript. JSX is a building block of React components and what allows React to create user interfaces.
To get started, we will focus on just the anatomy of one component. To make this as simple as possible, we will look at the component inside an HTML file. Here's a complete React application, containing just one component, with one line of markup.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<script
src="https://unpkg.com/react@18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>Intro to React</title>
</head>
<body>
<div id="react-container"></div>
<script type="text/babel">
const App = () => {
return <h1>Hello World!</h1>
}
const domContainer = document.querySelector("#react-container")
const root = ReactDOM.createRoot(domContainer)
root.render(<App />)
</script>
</body>
</html>There's a lot there. Let's focus on the React portion. It's the section in <script> within the body of the HTML.
<script type="text/babel">
const App = () => {
return <h1>Hello World!</h1>
}
const domContainer = document.querySelector("#react-container")
const root = ReactDOM.createRoot(domContainer)
root.render(<App />)
</script>Here we start with the function expression of our component. Notice that the component only does one thing. It returns a single JSX element.
The final lines in <script> define a container and tell React to render our component in the container.
This is the barest React application. It is composed of a single component. As our application grows in complexity, we will begin to require many additional components.
Nesting components allows us to call a component within the return of another component. This is the convention for making more complicated React applications with reusable code. Most React components will need to return more than one JSX element. If that is the case, the elements need to be wrapped in a single container tag. While often an element such as a div can be used, there is a special JSX tag that is even more neutral than a div called a React fragment. React fragments are empty JSX tags that can wrap other elements without adding any additional tag structure rendered in the DOM.
First we will wrap the h1 in React fragments. Then we will define another component.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<script
src="https://unpkg.com/react@18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>Intro to React</title>
</head>
<body>
<div id="react-container"></div>
<script type="text/babel">
const App = () => {
return (
<>
<h1>Hello World!</h1>
</>
)
}
const Content = () => {
return <h3>Welcome to LEARN Academy!</h3>
}
const domContainer = document.querySelector("#react-container")
const root = ReactDOM.createRoot(domContainer)
root.render(<App />)
</script>
</body>
</html>Just like any other function, components must be called or invoked. A component invocation (component call) looks like a self closing HTML tag. This will render the component.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<script
src="https://unpkg.com/react@18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>Intro to React</title>
</head>
<body>
<div id="react-container"></div>
<script type="text/babel">
const App = () => {
return (
<>
<h1>Hello World!</h1>
<Content />
</>
)
}
const Content = () => {
return <h3>Welcome to LEARN Academy!</h3>
}
const domContainer = document.querySelector("#react-container")
const root = ReactDOM.createRoot(domContainer)
root.render(<App />)
</script>
</body>
</html>This pattern will allow us to create as many components as needed.
The goal of the following challenge is for us to practice nesting components and getting familiar with the component syntax.
Create a new HTML file. Copy the following code into your file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<script
src="https://unpkg.com/react@18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>Intro to React</title>
</head>
<body>
<div id="react-container"></div>
<script type="text/babel">
const App = () => {
return <></>
}
const domContainer = document.querySelector("#react-container")
const root = ReactDOM.createRoot(domContainer)
root.render(<App />)
</script>
</body>
</html>- As a user, I see a Header component with the name of your cohort.
- As a user, I can see a Content component that contains an unordered list of all your classmates.
- As a user, I can see a Footer component with your name.