Lesson 1.2

This lesson will teach you the following:

• React DOM
• Component Definition
• Component Instantiation
• React Components

Instructions

Overview

JSX is an XML-based extension to JavaScript which just means it is a way to write JavaScipt code using XML. XML is a standard language similar to HTML that defines other languages. You can think of XML as a cousin to HTML.

React uses JSX elements to represent custom components. If you create a component named DisplayList, you can reuse that component in other components by using a JSX element named DisplayList. You can use any HTML5 element name when you write your React components and the result will be that React will output the HTML5 elements.

The rules of JSX are:

• All elements must be closed
• Attributes that are strings must have quotes around them
• HTML elements in JSX must be lowercase
• Attributes are written in camelCase
• Must return one parent element
• Reserved words such as class and for must be written as className and htmlFor

When you want to include JavaScript variables or a piece of JavaScript in your JSX, you need to use curly braces around it.

The job of a React component is to return an element.

const DisplayList = () => { // DisplayList component

      const greeting = “Good morning”; 
      
      return (
		<h2>{greeting}, Frank.</h2> // returns a React element
     );
} 

A React component is a function or JavaScript class that optionally accepts data and returns a React element that describes some piece of the user interface. A React user interface is made up of a hierarchy of components that build up to a single component (called the root component ) that is rendered in the browser.

Once you import a component into another component, the imported component’s functionality will be included in your new component’s JSX using an element. You can include as many components inside another component, and there is no limit to as many levels of components a tree of components can have.

Once you import a component, you can use the element it defines as many times as you need to and each usage will create a new instance of the component with its own data and memory.

Components that are rendered inside other components are called children, and the component they’re rendered inside of is called their parent. A React UI of any complexity will have many components nested within other components and the parent/child terminology is how their relationships are described.

The HTML elements you define in your JSX of a component are actually built-in React components. React’s built-in HTML element components have the same name as elements from HTML5. Using them in your React app causes the equivalent HTML element to be rendered.

Now put this into action...

Move List into New "Todo List" Component

• Inside /src directory, create a new file called TodoList.jsx
• Open /src/TodoList.jsx
• Create a new functional React component (see below)
  • Declare a function named TodoList
  • Export TodoList function as default module
• Add a multi-line return statement to your TodoList function (this is where we will insert JSX)
  • hint: use parenthesis for multi-line return
• Move list JSX from App.jsx to TodoList.jsx (see below)
  • Open /src/App.jsx
  • Cut (copy and remove) the entire list element (<ul>) code
  • Open /src/TodoList.jsx
  • Inside the multi-line return, paste the list element (<ul>) code
• Move todoList array from App.jsx to TodoList.jsx (see below)
  • Open /src/App.jsx
  • Cut (copy and remove) the entire todoList variable declaration
  • Open /src/TodoList.jsx
  • Below the import, paste the todoList variable
• Refactor App.jsx to use new TodoList component (see below)
  • Open /src/App.jsx
  • Import TodoList
  • Below the level-one heading, use the TodoList component
• Run your application and view in browser
  • Verify that your Todo List still appears correctly

Create "Add Todo Form" Component

• Inside /src directory, create a new file called AddTodoForm.jsx
• Open /src/AddTodoForm.jsx
• Create a new functional React component (see below)
  • Declare a function named AddTodoForm
  • Export AddTodoForm function as default module
• Add a multi-line return statement to your AddTodoForm function (this is where we will insert JSX)
  • hint: use parenthesis for multi-line return
• Write JSX for "Add Todo" form (see below)
  • Create a <form> element
  • Inside the <form> element, create a <label> element with text "Title"
  • Next, create a text <input> element with id "todoTitle"
  • Add htmlFor attribute to <label> element with same value as id above
  • Next, create a submit <button> element with text "Add"
• Use AddTodoForm component in App.jsx (see below)
  • Open /src/App.jsx
  • Import AddTodoForm
  • Below the level-one heading, use the AddTodoForm component
• Run your application and view in browser
  • Verify that "Add Todo" form appears below heading