React Basics & working with components

---

What is components?

All user interfaces in the end are made up of components
You may see some building blocks which have same design, but different data or label in web page or web apps.
One big building block can be splitted up as a small input, button things.
In other words, Components is just a custom HTML elements

[ Main point ]

• Reusability : build reusable components so that we don't have to repeat ourselves for making same functions
• Separatin of components: Each components takes one big responsibility and don't do many things. Code independence will help us to maintain and manage our code in a easier way

How do we build components?

There is three parts of building client-side web page: HTML, CSS, JAVASCRIPT.
These components will be combined all togehter at the end for React.
The main part is HTML and JAVASCRIPT , not CSS

Unlike to working with vanilla javascript, you will use declarative approach when you use react. Instead you will define desired target states and then set which states should be used under which conditions

Let's create React App

To get starter directory, you can use 'create-react-app' packages
In terminal, Type this. (By the way, You need node.js to install this packages)
npx create-react-app my-app
After you installed the package, you might find 'src' directory in your app folder.
That is the location where we gonna work

Index.js in starter folder

import ReactDOM from 'react-dom';

import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Here are two weird factor which is different with perspective of vanilla javascript user.
First, Imported css file to javascript code
Second, rendering a kind of html tag (JSX syntax)
But this two can work in react work station.
App.js is exactly a component.

function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
    </div>
  );
}

export default App;

Here also has invalid javascript syntax(return html), but it works in react.js.
When you add something to custom elements and save it, if react listen your app, it will automatically reflect changes. (This is similar to nodemon packages)

As you guessed, you might have a tons of components file during your project. we will handle this at components folder and a components 'App.js' will take a role as a root

[ How to add components in our root? ]
Follow these steps:
1. create a component in your directory
2. write a code and exports it
3. import it in your root
4. Use it like a html tag

• components/ExpressItem.js

function ExpressItem() {
  return <h2>Expense Item in here</h2>;
}

export default ExpressItem;

• App.js

import ExpressItem from "./components/ExpenseItem";
function App() {
  return (
    <div>
      <ExpressItem></ExpressItem>
    </div>
  );
}

The important thing when you make a components is it only can return one container in one component.

function ExpressItem() {
  return (
    <div>
      <div>Date</div>
      <div>Title</div>
      <div>Amount</div>
    </div>
  );
}

React use 'className' to add class into html tag instead of 'class'

return (
    <div className="expense-item">
      <div>March 28th 2021</div>
      <div className="expense-item__description">
        <h2>car</h2>
        <div className="expense-item__price">$100,000</div>
      </div>
    </div>
  );

By the way, As you can see the above code, we are using hard-coded value. It is not the preference of react.
Now it's time to come up with javascript feature in components for reusable code.

To transact data, we need 'props' concept. Simply, App.js use Attributes in specific custom elements and the component which handles that element use props as a parameter to access that attributes.

• App.js

function App() {
  const expenses = [
    {
      id: "e1",
      title: "Toilet Paper",
      amount: 94.12,
      date: new Date(2020, 7, 14),
    }
  ]
  return (
    <div>
      <h2>Let's get started!</h2>
      <ExpenseItem
        title={expenses[0].title}
        amount={expenses[0].amount}
        date={expenses[0].date}
      ></ExpenseItem>
   </div>
  );
}

• components/ExpenseItem.js

function ExpenseItem(props) {
  return (
    <div className="expense-item">
      <div>{props.date}</div>
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </div>
  );
}

[ Nested components ]
While we're working with a project, it is common that one component is located under another components.
So It may have tree structure.
Assuming that there is a two components and last component is located under the other, The first component will take props from App.js (root). But The most important thing is here. The second component doesn't take data from App.js. Because it is exported for the first component, second component take a props of First component.

For example.
In App.js

import ExpensesFrame from "./components/ExpenseFrame";

function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
      <ExpensesFrame data={expenses} />
    </div>
  );
}

we send expenses to ExpensesFram as props.
In ExpensesFrame.js

import ExpenseItem from "./ExpenseItem";
import "./ExpenseFrame.css";

function ExpensesFrame(props) {
  return (
    <div className="expenses">
      <ExpenseItem
        title={props.data[0].title}
        amount={props.data[0].amount}
        date={props.data[0].date}
      />
  </div>
  );
}

It takes expenses data as props and send modified data to ExpenseItem.
So in ExpenseItem, props will have title, amout and date property

Ref : React - The complete guide