07 Functional Component - biswajitsundara/react GitHub Wiki

Components are independent and reusable bits of code.

• A component in react is just a java script function but work in isolation.
• The component accepts props as input and returns the HTML/JSX code.
• There are two types of components = Function Components & Class Components
• The web application will have so many components e.g facebook has 30k components.
• Let's focus on function components here.

• The file name, the function name etc should be in Pascal Case = ExpenseItem
• The starting letter of any word should be in capital
• During run time the small case tags are considered as built in tags
• The pascal case tags are considered as custom component tags E.g <ExpenseItem>

Create a folder named components and under that create the component java script file.

function ExpenseItem(){
    return <h1>Your expenses</h1>
}

export default ExpenseItem;

import ExpenseItem  from "./components/ExpenseItem";

function App() {
  return <ExpenseItem />;
}

export default App;

Note: <ExpenseItem /> is self closing tag and is equivalent to <ExpenseItem> </ExpenseItem>

We can create the components using arrow functions also.

const ExpenseItem = () => {
    return <h1>Your expenses</h1>
}
export default ExpenseItem;

• When we mention default export then the name can be changed while importing.

const ExpenseItem = () => {
    return <h1>Your expenses</h1>
}
export default ExpenseItem;
----------------------------------------------------
import MyItem  from "./components/ExpenseItem";

function App() {
  return <MyItem />;
}

• For named export its not possible to change the name & we will have to mention the name within curly braces

export const ExpenseItem = () => {
    return <h1>Your expenses</h1>
}
----------------------------------------------
import {ExpenseItem}  from "./components/ExpenseItem";

function App() {
  return <ExpenseItem />;
}

Real time the components will return a block of codes containing multiple HTML elements.

• In react there's a rule, components must return only one root element.
• This is correct return <h1>Hello World>
• This is incorrect return <h2>Hello</h2><p>Greet</p>
• The solution is to wrap the code within brackets and within a div return (<div>.....</div>)

return (
    <div>
      <div>March 28th 2021</div>
      <div>
        <h2>Car Insurance</h2>
        <div>43.5</div>
      </div>
    </div>
  );

We can add stylings, data in our component

• Create a CSS file and in the component java script file import the same.
• Then use the class names from the css files to apply the stylings
• Please note in react class attribute is not used instead we should use className
• We can use any java script expression within {expression} inside our component
• The expression can be 1+1, Math.Random() or any variable name, it will output the evaluated data.

import './ExpenseItem.css'

function ExpenseItem() {

    const expenseDate = new Date(2021, 2, 8);
    const expenseTitle = 'Car Insurance';
    const expenseAmount = 294.67;

  return (
    <div className='expense-item'>
      <div>{expenseDate.toISOString()}</div>
      <div className='expense-item__description'>
        <h2>{expenseTitle}</h2>
        <div className='expense-item__price'>{expenseAmount}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;