Import Export and JSX attribute in React tut 5

# Code To Understand Import Export Concept in React

filename : ExportTut.jsx

var youtuber = "thapa Technical";

var favTut = "React Tutorial";

function favFilm()

{

    var name="URI"

    return name;

}

function favCar()

{

    return "RangeRover";

}

function divide(a,b)

{

    let ans=a/b;

    ans=ans.toFixed(2);       // put 2 number only after decimal 

    return ans;

}

export default youtuber;

export {favTut,favFilm,favCar,divide};

filename : ImportTut.jsx

import React from 'react'

// import favYoutube , {favTut,favCar,favFilm} from './ExportTut' // first way to import  , note : favYoutube(any name can use) is default 

import * as favList from "./ExportTut"; // import all as favList

function List()

{

    return(

      <>      

      <h1>My Fav List</h1>

        {/* first way  */}

        {/* <ol>           

            <li>{favYoutube}</li>

            <li>{favTut} </li>       

            <li>{favFilm()}</li>

            <li>{favCar()}</li>

        </ol> */}

        {/* second way using obj */}

        <ol>           

            <li>{favList.default}</li>

            <li>{favList.favTut} </li>       

            <li>{favList.favFilm()}</li>

            <li>{favList.favCar()}</li>

            <li> divide of 10 by 3 is {favList.divide(10,3)}</li>

        </ol>

      </>

    )

}

export default List;

# JSX Attribute in React

1. We use " className " instead of  "class" because "class " keyword is already reaserved in React.
2. For Every Attribute we have use the camelCase ex: " className " .