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 (
    <div>
      <header>
        <Greeting name="Rich" excitement={3}/>
        <Greeting name="Dave" age="31"/>
      </header>
    </div>
  );
}

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:
http://www.cfsnap.com/react/react-basics-snippets2/