React Basics - Snippets 2


React Basics: Snippets 2

App.js: Importing a component / basic props / default values

A simple App.js file with the following:
  • Import the Greeting component
  • Passing values to the component via props
  • Setting default values making the passing of props data optional
import React from 'react';
import Greeting from './components/Greeting';

function App() {

  return (
        <Greeting name="Rich" excitement={3}/>
        <Greeting name="Dave" age="31"/>

export default App;

Greeting.js: Imported component

  • Default prop values, use of prop values in component
import React from 'react';

function Greeting({name, age = 22, excitement=1}) {
  return (

Hello there {name}. You are {age} years old. Excitement score is {excitement} {"!".repeat(excitement)}

); } export default Greeting;

Link your website to this page! Copy and paste the URL below: