Starter Code

The Starter Code

Solution Code

The Solution Code

Objectives

• use JavaScript modules to export and import components
• describe props and how data flows in a React application
• demonstrate the ability to compose React components to build out a UI
• pass props as dynamic data to a React component

Step 1:

Talk about imports and exports.

Explain that we will be creating seperate components today for the project. We will take the counter component and the color picker from the break out yesterday and combine them into one application. We will need to export each component and import them in to the main index.js file.

https://www.geeksforgeeks.org/reactjs-importing-exporting/

• Importing default export: Every module is said to have at most one default export. In order to import the default export from a file, we can use only the address and use the keyword import before it, or we can give a name to the import making the syntax as the following.

  import GIVEN_NAME from ADDRESS
  

• Importing named values: Every module can have several named parameters and in order to import one we should use the syntax as follows.

  import { PARA_NAME } from ADDRESS
  

  And similarly for multiple such imports we can use a comma to seperate two parameter name within the curly braces.

  From Stackoverflow: https://stackoverflow.com/questions/36426521/what-does-export-default-do-in-jsx

  Named exports - for example export function func() {} is a named export with the name of func. Named modules can be imported using import { exportName } from 'module';. In this case, the name of the import should be the same as the name of the export. To import the func in the example, you'll have to use import { func } from 'module';. There can be multiple named exports in one module.

  Default export - is the value that will be imported from the module, if you use the simple import statement import X from 'module'. X is the name that will be given locally to the variable assigned to contain the value, and it doesn't have to be named like the origin export. There can be only one default export.

  A module can contain both named exports and a default export, and they can be imported together using import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.

import ColorPicker from "./components/ColorPicker";
import Counter from "./components/Counter";

function App() {
  return (
    <div className="counter">
      <ColorPicker />
      <Counter />
    </div>
  );
}

Step 2:

Set up Counter and CounterButton components

Set up your first 2 components. Talk about passing props between parent and child components. Highlight the number and buttonValue props that is passed between the Counter and CounterButton components. Console.log props and show students the values you get.