Hi,:wave: this is my first React project, I chose to build a task tracker to learn all the basics and get a good understanding how Reactjs framework works.
Note: Go to the Build-code branch to get the production code for this project and how to deploy it on your machine.

Set up my first react development envierment
by running the following command:
npx crear-react-app my-app

export default class Header extends React.Component{
constructor(props) {
    super(props);
    this.state = {}
}
    render()  {
        return (
            <div>
	<h1> My Header </h1>
            </div>
        )

   }
}

export const Header = () => {

      const name = ‘reda’

      return (
            <div>
	<h1> Hi {name} </h1>
            </div>
}

Import Header from ‘./Header’;

 and use:  <Header />

< Component name=’reda’ />

Component.propTypes = {
name: PropTypes.string
}
{string, number, bool, func, array, object...}

<Button onClick={buttonClicked} />
<input  type="text"  onChange={e => console.log(e.target.value)} />

The React useState Hook allows us to track state in a function component.
1 – Import the hook:

import { useState } from "react";

2 - Initialize useState:

const [variabl, setVariable] = useState([one, two, three]);

variable: is the name of our state.
SetVariable: the function we use to update our state.
UseState: the initial state of our state.

UseEffect( ()=>{ } ) when we want something to happen right after page loads.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{number}</li>);

const users = [{name:’reda’, age:25},{name:’john’, age:28}];
const usersAge = users.map((key) => <p>{key.age}</p>);

1 - install react icons: npm I react-icons
2 - import to file: import {FaTimes} from 'react-icons/fa'
3 – use the icons in code: <FaTimes />

After finishig the app we can create a statc version.
npm run build (Creat new folder named build with all files)