├── src
    ├── components
    │   ├── CSS_STYLE
    │   │   ├── style.css
    │   │   └── index.js
    │   ├── SATET_LIFTING
    │   │   ├── Todo.js
    │   │   ├── Todos.js
    │   │   ├── Child.js
    │   │   ├── Home.js
    │   │   └── NewTodo.js
    │   ├── CONDITIONAL_RENDERING
    │   │   ├── SignUpPage.js
    │   │   ├── HomePage.js
    │   │   ├── style.css
    │   │   └── index.js
    │   ├── HOOKS
    │   │   ├── useContext
    │   │   │   ├── UserContext.js
    │   │   │   ├── Component2.js
    │   │   │   ├── Component3.js
    │   │   │   ├── Component4.js
    │   │   │   └── Component1.js
    │   │   ├── useState
    │   │   │   ├── USESTATE_ARRAY
    │   │   │   │   ├── booklist.module.css
    │   │   │   │   └── BookList.js
    │   │   │   ├── USESTATE_BASIC
    │   │   │   │   └── index.js
    │   │   │   └── USESTATE_OBJECT
    │   │   │   │   └── index.js
    │   │   ├── UseReducer
    │   │   │   ├── reducer.js
    │   │   │   └── index.js
    │   │   ├── CustomHooks
    │   │   │   ├── DataFetch.js
    │   │   │   └── useFetch.js
    │   │   ├── useEffect
    │   │   │   ├── UseEffectExample.js
    │   │   │   └── DataFetch.js
    │   │   ├── UseRefExample
    │   │   │   └── UserForm.js
    │   │   └── useEffectExample
    │   │   │   ├── index.js
    │   │   │   └── UseEffectHook.js
    │   ├── Table
    │   │   ├── Column.js
    │   │   └── Table.js
    │   ├── CARD
    │   │   ├── style.css
    │   │   └── index.js
    │   ├── BINDING_EVENT_HANDLER
    │   │   ├── style.css
    │   │   └── index.js
    │   ├── EVENT_HANDLING_FUNCTION
    │   │   ├── style.css
    │   │   └── index.js
    │   ├── PROPS_DESTRUCTURING_CLASS
    │   │   ├── style.css
    │   │   └── index.js
    │   ├── PROPS_DESTRUCTURING_FUNCTIONAL
    │   │   ├── style.css
    │   │   └── index.js
    │   ├── DATA_MAPPING
    │   │   ├── style.css
    │   │   ├── data.json
    │   │   ├── Card.js
    │   │   └── index.js
    │   ├── FAQ
    │   │   ├── faq.module.css
    │   │   ├── faqs.module.css
    │   │   ├── FAQS.js
    │   │   ├── FAQ.js
    │   │   └── data.js
    │   ├── STATE_IN_CLASS
    │   │   ├── style.css
    │   │   └── index.js
    │   ├── FORM
    │   │   ├── style.css
    │   │   ├── index4.js
    │   │   ├── index1.js
    │   │   ├── index2.js
    │   │   └── index3.js
    │   ├── CLASS_COMPONENT
    │   │   └── index.js
    │   ├── PropTypes
    │   │   ├── Users.js
    │   │   └── User.js
    │   ├── PureComponent
    │   │   ├── ChildClassComponent.js
    │   │   ├── PureFunctionalComponent.js
    │   │   └── PureClassComponent.js
    │   ├── EVENT_HANDLING_CLASS
    │   │   ├── style.css
    │   │   └── index.js
    │   ├── Todo_Demo
    │   │   ├── NewTodo.js
    │   │   └── Todos.js
    │   ├── React_Bootstrap
    │   │   └── ReactBootstrap.js
    │   ├── UniqueList
    │   │   └── List.js
    │   ├── JSX_JS_EXPRESSION
    │   │   └── index.js
    │   ├── Toggle
    │   │   └── Toggle.js
    │   ├── RefExample
    │   │   └── UserForm.js
    │   └── LifeCycle
    │   │   └── LifeCycle.js
    ├── App.js
    └── index.js
├── public
    └── index.html
├── .gitignore
├── package.json
└── README.md


/src/components/CSS_STYLE/style.css:
--------------------------------------------------------------------------------
1 | .card-style{
2 |     border-radius: 5px;
3 |     transition: .4s;
4 | }
5 | .card-style:hover{
6 |     box-shadow: 2px 4px 4px black;
7 | }


--------------------------------------------------------------------------------
/src/components/SATET_LIFTING/Todo.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | const Todo = (props) => {
4 |   return <p>{props.todo}</p>;
5 | };
6 | 
7 | export default Todo;
8 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Users from "./components/PropTypes/Users";
 3 | 
 4 | export default function App() {
 5 |   return (
 6 |     <div>
 7 |       <Users />
 8 |     </div>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/src/components/CONDITIONAL_RENDERING/SignUpPage.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function SignUpPage() {
 4 |     return (
 5 |         <div>
 6 |             <h1>Please Sign up</h1>
 7 |         </div>
 8 |     )
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/components/CONDITIONAL_RENDERING/HomePage.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function HomePage() {
 4 |     return (
 5 |         <div>
 6 |             <h1>Welcome to HomePage</h1>
 7 |         </div>
 8 |     )
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/useContext/UserContext.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | export const UserContext = React.createContext();
3 | 
4 | // setp1 : create context
5 | // step2: wrap childs with context provider
6 | // setp3: state access useContext hook
7 | 


--------------------------------------------------------------------------------
/src/components/Table/Column.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Column = () => {
 4 |   return (
 5 |     <>
 6 |       <td>Anisul Islam</td>
 7 |       <td>32 years old</td>
 8 |     </>
 9 |   );
10 | };
11 | 
12 | export default Column;
13 | 


--------------------------------------------------------------------------------
/src/components/CARD/style.css:
--------------------------------------------------------------------------------
 1 | .card-style{
 2 |     border-radius: 5px;
 3 |     transition: .4s;
 4 |     background-color : palegreen;
 5 |     width : 350px;
 6 |     padding: 10px
 7 | }
 8 | .card-style:hover{
 9 |     box-shadow: 2px 4px 4px black;
10 | }


--------------------------------------------------------------------------------
/src/components/BINDING_EVENT_HANDLER/style.css:
--------------------------------------------------------------------------------
 1 | button{
 2 |     padding: 5px;
 3 |     border: none;
 4 |     border-radius: 5px;
 5 |     background: green;
 6 |     color: white;
 7 |     margin-right: 10px;
 8 |     font-size: 1rem;
 9 |     width: 80px;
10 | }
11 | 
12 | 


--------------------------------------------------------------------------------
/src/components/EVENT_HANDLING_FUNCTION/style.css:
--------------------------------------------------------------------------------
 1 | button{
 2 |     padding: 5px;
 3 |     border: none;
 4 |     border-radius: 5px;
 5 |     background: green;
 6 |     color: white;
 7 |     margin-right: 10px;
 8 |     font-size: 1rem;
 9 |     width: 80px;
10 | }
11 | 
12 | 


--------------------------------------------------------------------------------
/src/components/PROPS_DESTRUCTURING_CLASS/style.css:
--------------------------------------------------------------------------------
 1 | .card-style{
 2 |     border-radius: 5px;
 3 |     transition: .4s;
 4 |     background-color : palegreen;
 5 |     width : 350px;
 6 |     padding: 10px
 7 | }
 8 | .card-style:hover{
 9 |     box-shadow: 2px 4px 4px black;
10 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App";
4 | import "bootstrap/dist/css/bootstrap.min.css";
5 | import "font-awesome/css/font-awesome.min.css";
6 | 
7 | ReactDOM.render(<App />, document.getElementById("root"));
8 | 


--------------------------------------------------------------------------------
/src/components/PROPS_DESTRUCTURING_FUNCTIONAL/style.css:
--------------------------------------------------------------------------------
 1 | .card-style{
 2 |     border-radius: 5px;
 3 |     transition: .4s;
 4 |     background-color : palegreen;
 5 |     width : 350px;
 6 |     padding: 10px
 7 | }
 8 | .card-style:hover{
 9 |     box-shadow: 2px 4px 4px black;
10 | }


--------------------------------------------------------------------------------
/src/components/DATA_MAPPING/style.css:
--------------------------------------------------------------------------------
 1 | .card-style{
 2 |     border-radius: 5px;
 3 |     transition: .4s;
 4 |     background-color : palegreen;
 5 |     width : 350px;
 6 |     padding: 10px;
 7 |     margin: 15px;
 8 | }
 9 | .card-style:hover{
10 |     box-shadow: 2px 4px 4px black;
11 | }


--------------------------------------------------------------------------------
/src/components/HOOKS/useContext/Component2.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Component3 from "./Component3";
 3 | 
 4 | const Component2 = () => {
 5 |   return (
 6 |     <div>
 7 |       <Component3 />
 8 |     </div>
 9 |   );
10 | };
11 | 
12 | export default Component2;
13 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/useContext/Component3.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Component4 from "./Component4";
 3 | 
 4 | const Component3 = () => {
 5 |   return (
 6 |     <div>
 7 |       <Component4 />
 8 |     </div>
 9 |   );
10 | };
11 | 
12 | export default Component3;
13 | 


--------------------------------------------------------------------------------
/src/components/FAQ/faq.module.css:
--------------------------------------------------------------------------------
 1 | .faq {
 2 |   margin: 1rem;
 3 |   background-color: rgb(229, 231, 233);
 4 |   padding: 1rem;
 5 |   border-radius: 0.6rem;
 6 |   box-shadow: 0.1rem 0.1rem #2c2c2c;
 7 | }
 8 | 
 9 | .faq div {
10 |   display: flex;
11 |   justify-content: space-between;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/STATE_IN_CLASS/style.css:
--------------------------------------------------------------------------------
 1 | button{
 2 |     padding: 10px;
 3 |     border: none;
 4 |     border-radius: 5px;
 5 |     background: limegreen;
 6 |     color: white;
 7 |     margin-right: 10px;
 8 |     font-size: 2rem;
 9 |     width: 80px;
10 | }
11 | 
12 | p{
13 |     color: red;
14 |     font-weight: bold;
15 | }


--------------------------------------------------------------------------------
/src/components/FORM/style.css:
--------------------------------------------------------------------------------
 1 | button {
 2 |   padding: 5px;
 3 |   border: none;
 4 |   border-radius: 5px;
 5 |   background: green;
 6 |   color: white;
 7 |   margin: 10px 0 0 100px;
 8 |   font-size: 1rem;
 9 | }
10 | 
11 | input {
12 |   margin: 5px;
13 |   font-size: 1rem;
14 |   padding: 5px;
15 |   width: 250px;
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/CONDITIONAL_RENDERING/style.css:
--------------------------------------------------------------------------------
 1 | button{
 2 |     padding: 10px;
 3 |     border: none;
 4 |     border-radius: 5px;
 5 |     background: limegreen;
 6 |     color: white;
 7 |     margin-right: 10px;
 8 |     font-size: 2rem;
 9 |     width: 80px;
10 | }
11 | 
12 | p{
13 |     color: red;
14 |     font-weight: bold;
15 | }


--------------------------------------------------------------------------------
/src/components/Table/Table.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Column from "./Column";
 3 | 
 4 | const Table = () => {
 5 |   return (
 6 |     <table>
 7 |       <tr>
 8 |         <Column />
 9 |       </tr>
10 |       <tr>
11 |         <Column />
12 |       </tr>
13 |     </table>
14 |   );
15 | };
16 | 
17 | export default Table;
18 | 


--------------------------------------------------------------------------------
/src/components/SATET_LIFTING/Todos.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import Todo from "./Todo";
 4 | 
 5 | const Todos = (props) => {
 6 |   return (
 7 |     <div>
 8 |       {props.todos.map((todo, index) => (
 9 |         <Todo key={index} todo={todo} />
10 |       ))}
11 |     </div>
12 |   );
13 | };
14 | 
15 | export default Todos;
16 | 


--------------------------------------------------------------------------------
/src/components/CLASS_COMPONENT/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | class CLASS_COMPONENT extends Component {
 4 |     render() {
 5 |         return (
 6 |             <div>
 7 |                 <h1>Example of a class component</h1>
 8 |             </div>
 9 |         )
10 |     }
11 | }
12 | 
13 | export default CLASS_COMPONENT
14 | 


--------------------------------------------------------------------------------
/src/components/SATET_LIFTING/Child.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Child = (props) => {
 4 |   const data = "I am from child component";
 5 |   props.onChildData(data);
 6 | 
 7 |   return (
 8 |     <div>
 9 |       <p>I am child component</p>
10 |       <p>{props.data}</p>
11 |     </div>
12 |   );
13 | };
14 | 
15 | export default Child;
16 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/useState/USESTATE_ARRAY/booklist.module.css:
--------------------------------------------------------------------------------
 1 | button {
 2 |   padding: 5px;
 3 |   border: none;
 4 |   border-radius: 5px;
 5 |   background: green;
 6 |   color: white;
 7 |   margin: 10px 0 0 100px;
 8 |   font-size: 1rem;
 9 | }
10 | 
11 | input {
12 |   margin: 5px;
13 |   font-size: 1rem;
14 |   padding: 5px;
15 |   width: 250px;
16 | }
17 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>React App</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="root"></div>
10 |     <script src="../src/index.js" type="text/jsx"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/components/PropTypes/Users.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import User from "./User";
 3 | 
 4 | const Users = () => {
 5 |   const [user, setUser] = useState({
 6 |     id: 1302020017,
 7 |     name: "anisul islam",
 8 |   });
 9 | 
10 |   return (
11 |     <>
12 |       <User user={user} />
13 |     </>
14 |   );
15 | };
16 | 
17 | export default Users;
18 | 


--------------------------------------------------------------------------------
/src/components/PureComponent/ChildClassComponent.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | 
 3 | export default class ChildClassComponent extends Component {
 4 |   render() {
 5 |     console.log("rerender in childClassComponent");
 6 |     return (
 7 |       <div>
 8 |         <h2>ChildClassComponent : {this.props.userName}</h2>
 9 |       </div>
10 |     );
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/EVENT_HANDLING_FUNCTION/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './style.css'
 3 | 
 4 | export default function EVENT_HANDLING_FUNCTION() {
 5 | 
 6 |     const handleClick = () =>{
 7 |         console.log("button is clicked")
 8 |     }
 9 |     return (
10 |         <div>
11 |             <button onClick={handleClick}>Sign up</button>
12 |         </div>
13 |     )
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/EVENT_HANDLING_CLASS/style.css:
--------------------------------------------------------------------------------
 1 | button{
 2 |     padding: 5px;
 3 |     border: none;
 4 |     border-radius: 5px;
 5 |     background: limegreen;
 6 |     color: white;
 7 |     margin-right: 10px;
 8 |     font-size: 1rem;
 9 |     width: 80px;
10 | }
11 | 
12 | input{
13 |     margin: 5px;
14 |     font-size: 1.2rem;
15 | }
16 | 
17 | p{
18 |     color: red;
19 |     font-weight: bold;
20 | }


--------------------------------------------------------------------------------
/src/components/DATA_MAPPING/data.json:
--------------------------------------------------------------------------------
 1 | [
 2 |     {
 3 |         "title" : "call family",
 4 |         "desc" : "call your family whenever possible..."
 5 |     },
 6 |     {
 7 |         "title" : "go to sleep",
 8 |         "desc" : "sleep more. why do you sleep less?..."
 9 |     },
10 |     {
11 |         "title" : "go to shopping",
12 |         "desc" : "This week needs to buy rice, oil, eggs..."
13 |     }
14 | ]


--------------------------------------------------------------------------------
/src/components/HOOKS/useContext/Component4.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react";
 2 | import { UserContext } from "./UserContext";
 3 | const Component4 = () => {
 4 |   const { user, text } = useContext(UserContext);
 5 | 
 6 |   return (
 7 |     <div>
 8 |       <h2>{text}</h2>
 9 |       <h3>{user.id}</h3>
10 |       <h3>{user.name}</h3>
11 |     </div>
12 |   );
13 | };
14 | 
15 | export default Component4;
16 | 


--------------------------------------------------------------------------------
/src/components/FAQ/faqs.module.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   min-height: 100vh;
 3 |   display: flex;
 4 |   justify-content: center;
 5 |   align-items: center;
 6 |   background-color: rgb(233, 232, 232);
 7 |   padding: 1rem;
 8 | }
 9 | 
10 | .faqs {
11 |   width: 50rem;
12 |   max-width: 100%;
13 |   background-color: white;
14 |   border-radius: 0.6rem;
15 |   padding: 1rem;
16 | }
17 | 
18 | h1 {
19 |   text-align: center;
20 | }
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | /.eslintcache
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # production
13 | /build
14 | 
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 


--------------------------------------------------------------------------------
/src/components/SATET_LIFTING/Home.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | import NewTodo from "./NewTodo";
 4 | import Todos from "./Todos";
 5 | 
 6 | const dummyTodos = ["todo1", "todo2"];
 7 | const Home = () => {
 8 |   const [todos, setTodos] = useState(dummyTodos);
 9 | 
10 |   const handleNewTodo = (newTodo) => {
11 |     setTodos([...todos, newTodo]);
12 |   };
13 |   return (
14 |     <div>
15 |       <NewTodo onTodo={handleNewTodo} />
16 |       <Todos todos={todos} />
17 |     </div>
18 |   );
19 | };
20 | 
21 | export default Home;
22 | 


--------------------------------------------------------------------------------
/src/components/PropTypes/User.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | const User = (props) => {
 5 |   return (
 6 |     <div>
 7 |       <h3>{props.user.id}</h3>
 8 |       <h3>{props.user.name}</h3>
 9 |     </div>
10 |   );
11 | };
12 | 
13 | User.propTypes = {
14 |   // key-value
15 |   user: PropTypes.shape({
16 |     id: PropTypes.number,
17 |     name: PropTypes.string,
18 |   }),
19 | };
20 | 
21 | // User.defaultProps = {
22 | //   userName: "default name",
23 | //   userId: 0,
24 | // };
25 | 
26 | export default User;
27 | 


--------------------------------------------------------------------------------
/src/components/DATA_MAPPING/Card.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './style.css'
 3 | 
 4 | export default function CARD(props) {
 5 |     const {title, desc} = props
 6 |     const fullDate = new Date();
 7 |     const date = fullDate.getDate() + "/" + fullDate.getMonth() + "/"+ fullDate.getFullYear();
 8 | 
 9 |     return (
10 |         <div>
11 |             <div  className="card-style">
12 |                 <h3>{title}</h3>
13 |                 <p>{desc}</p>
14 |                 <p>{date}</p>
15 |             </div>            
16 |         </div>
17 |     )
18 | }
19 | 


--------------------------------------------------------------------------------
/src/components/FAQ/FAQS.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | import style from "./faqs.module.css";
 4 | import { faqsData } from "./data";
 5 | import FAQ from "./FAQ";
 6 | const FAQS = () => {
 7 |   const [faqs, setFaqs] = useState(faqsData);
 8 | 
 9 |   return (
10 |     <main className={style.container}>
11 |       <section className={style.faqs}>
12 |         <h1>FAQs</h1>
13 |         {faqs.map((faq) => (
14 |           <FAQ key={faq.id} {...faq} />
15 |         ))}
16 |       </section>
17 |     </main>
18 |   );
19 | };
20 | 
21 | export default FAQS;
22 | 


--------------------------------------------------------------------------------
/src/components/FAQ/FAQ.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | import style from "./faq.module.css";
 4 | const FAQ = ({ id, title, desc }) => {
 5 |   const [toggle, setToggle] = useState(false);
 6 |   return (
 7 |     <article className={style.faq}>
 8 |       <div>
 9 |         <h4>{title}</h4>
10 |         <button
11 |           onClick={() => {
12 |             setToggle(!toggle);
13 |           }}
14 |         >
15 |           {toggle ? "-" : "+"}
16 |         </button>
17 |       </div>
18 |       {toggle && <p>{desc}</p>}
19 |     </article>
20 |   );
21 | };
22 | 
23 | export default FAQ;
24 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/useContext/Component1.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import Component2 from "./Component2";
 3 | import { UserContext } from "./UserContext";
 4 | const Component1 = () => {
 5 |   const [user, setUser] = useState({ id: 101, name: "Anisul Islam" });
 6 |   const [text, setText] = useState("hello I am text");
 7 |   return (
 8 |     <UserContext.Provider value={{ user, text }}>
 9 |       <Component2 />
10 |     </UserContext.Provider>
11 |   );
12 | };
13 | 
14 | export default Component1;
15 | 
16 | // global state
17 | // component1 -> component2 -> component3 -> component4
18 | 


--------------------------------------------------------------------------------
/src/components/Todo_Demo/NewTodo.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | const NewTodo = (props) => {
 4 |   const [todo, setTodo] = useState("");
 5 | 
 6 |   const handleTodoChange = (event) => {
 7 |     setTodo(event.target.value);
 8 |   };
 9 | 
10 |   const handleSubmit = (event) => {
11 |     event.preventDefault();
12 |     props.onAddTodo(todo);
13 |   };
14 | 
15 |   return (
16 |     <form onSubmit={handleSubmit}>
17 |       <label htmlFor="todo"></label>
18 |       <input type="text" name="todo" value={todo} onChange={handleTodoChange} />
19 |       <button>Add Todo</button>
20 |     </form>
21 |   );
22 | };
23 | 
24 | export default NewTodo;
25 | 


--------------------------------------------------------------------------------
/src/components/React_Bootstrap/ReactBootstrap.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import Button from "react-bootstrap/Button";
 4 | import Card from "react-bootstrap/Card";
 5 | 
 6 | const ReactBootstrap = () => {
 7 |   return (
 8 |     <Card style={{ width: "20rem" }}>
 9 |       <Card.Body>
10 |         <Card.Title>Card Title</Card.Title>
11 |         <Card.Text>
12 |           Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur
13 |           quibusdam non iure accusantium nemo! Aliquam.
14 |         </Card.Text>
15 |         <Button>Learn more</Button>
16 |       </Card.Body>
17 |     </Card>
18 |   );
19 | };
20 | 
21 | export default ReactBootstrap;
22 | 


--------------------------------------------------------------------------------
/src/components/PureComponent/PureFunctionalComponent.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useMemo } from "react";
 2 | 
 3 | const PureFunctionalComponent = () => {
 4 |   const [userName, setUserName] = useState("");
 5 | 
 6 |   const handleUserName = () => {
 7 |     setUserName("Anisul Islam");
 8 |   };
 9 | 
10 |   const setName = useMemo(() => {
11 |     if (userName !== "") {
12 |       return userName;
13 |     }
14 |     return false;
15 |   }, [userName]);
16 | 
17 |   return (
18 |     <div>
19 |       {console.log("render")}
20 |       <h1>UserName: {setName} </h1>
21 |       <button onClick={handleUserName}>setName</button>
22 |     </div>
23 |   );
24 | };
25 | 
26 | export default PureFunctionalComponent;
27 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/UseReducer/reducer.js:
--------------------------------------------------------------------------------
 1 | export const reducer = (state, action) => {
 2 |   // action.type, action.payload
 3 |   if (action.type === "ADD") {
 4 |     const allBooks = [...state.books, action.payload];
 5 |     return {
 6 |       ...state,
 7 |       books: allBooks,
 8 |       isModalOpen: true,
 9 |       modalText: "book is added",
10 |     };
11 |   }
12 |   if (action.type === "REMOVE") {
13 |     const filteredBooks = [...state.books].filter(
14 |       (book) => book.id !== action.payload
15 |     );
16 |     return {
17 |       ...state,
18 |       books: filteredBooks,
19 |       isModalOpen: true,
20 |       modalText: "book is removed",
21 |     };
22 |   }
23 |   return state;
24 | };
25 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/useState/USESTATE_BASIC/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | export default function HOOKS_USESTATE() {
 4 |   const [count, setCount] = useState(0);
 5 | 
 6 |   const handleIncrement = () => {
 7 |     setCount(count + 1);
 8 |   };
 9 | 
10 |   const handleDecrement = () => {
11 |     setCount(count - 1);
12 |   };
13 | 
14 |   return (
15 |     <div>
16 |       <h1>Count : {count}</h1>
17 |       <button onClick={handleIncrement} disabled={count === 5 ? true : false}>
18 |         Increment
19 |       </button>
20 |       <button onClick={handleDecrement} disabled={count === 0 ? true : false}>
21 |         Decrement
22 |       </button>
23 |     </div>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/CARD/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './style.css'
 3 | 
 4 | export default function CARD() {
 5 | 
 6 |     const todoTitle = "Call Family"
 7 |     const todoDesc = "Ipsum no sea sadipscing consetetur vero. Nonumy justo diam sed lorem sit, sed sit clita sit takimata sed sanctus invidunt."
 8 |     const fullDate = new Date();
 9 |     const date = fullDate.getDate() + "/" + fullDate.getMonth() + "/"+ fullDate.getFullYear();
10 | 
11 |     return (
12 |         <div>
13 |             <div  className="card-style">
14 |                 <h3>{todoTitle}</h3>
15 |                 <p>{todoDesc}</p>
16 |                 <p>{date}</p>
17 |             </div>            
18 |         </div>
19 |     )
20 | }
21 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/CustomHooks/DataFetch.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import useFetch from "./useFetch";
 3 | 
 4 | const DataFetch = () => {
 5 |   const { data, isLoading, error } = useFetch(
 6 |     "https://jsonplaceholder.typicode.com/todos"
 7 |   );
 8 | 
 9 |   const loadingMessage = <p>todos is loading</p>;
10 |   const errorMessage = <p>{error}</p>;
11 | 
12 |   const todosElement =
13 |     data &&
14 |     data.map((todo) => {
15 |       return <p key={todo.id}> {todo.title} </p>;
16 |     });
17 | 
18 |   return (
19 |     <div>
20 |       <h1>Todos</h1>
21 |       {error && errorMessage}
22 |       {isLoading && loadingMessage}
23 |       {todosElement}
24 |     </div>
25 |   );
26 | };
27 | 
28 | export default DataFetch;
29 | 


--------------------------------------------------------------------------------
/src/components/SATET_LIFTING/NewTodo.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | const NewTodo = (props) => {
 4 |   const [todo, setTodo] = useState("");
 5 | 
 6 |   const handleInputChange = (event) => {
 7 |     setTodo(event.target.value);
 8 |   };
 9 | 
10 |   const handleSubmit = (event) => {
11 |     event.preventDefault();
12 |     props.onTodo(todo);
13 |   };
14 | 
15 |   return (
16 |     <form onSubmit={handleSubmit}>
17 |       <label htmlFor="todo">New Todo: </label>
18 |       <input
19 |         type="text"
20 |         id="todo"
21 |         name="todo"
22 |         value={todo}
23 |         onChange={handleInputChange}
24 |       />
25 |       <button>Add Todo</button>
26 |     </form>
27 |   );
28 | };
29 | 
30 | export default NewTodo;
31 | 


--------------------------------------------------------------------------------
/src/components/UniqueList/List.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import { v4 as uuidv4 } from "uuid";
 4 | 
 5 | const todos = [
 6 |   {
 7 |     id: uuidv4(),
 8 |     title: "todo1",
 9 |     desc: "todo1 description 1",
10 |   },
11 |   {
12 |     id: uuidv4(),
13 |     title: "todo2",
14 |     desc: "todo2 description 1",
15 |   },
16 |   {
17 |     id: uuidv4(),
18 |     title: "todo3",
19 |     desc: "todo3 description 1",
20 |   },
21 | ];
22 | 
23 | const List = () => {
24 |   return (
25 |     <div>
26 |       {todos.map((todo) => {
27 |         const { id, title, desc } = todo;
28 |         return (
29 |           <div key={id}>
30 |             <h3>{title}</h3>
31 |             <p>{desc}</p>
32 |           </div>
33 |         );
34 |       })}
35 |     </div>
36 |   );
37 | };
38 | 
39 | export default List;
40 | 


--------------------------------------------------------------------------------
/src/components/JSX_JS_EXPRESSION/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function JSX_JS_expression() {
 4 |     const todoTitle = "Call Family"
 5 |     const todoDesc = "Ipsum no sea sadipscing consetetur vero. Nonumy justo diam sed lorem sit, sed sit clita sit takimata sed sanctus invidunt."
 6 |     const fullDate = new Date();
 7 |     const date = fullDate.getDate() + "/" + fullDate.getMonth() + "/"+ fullDate.getFullYear();
 8 |     return (
 9 |         <div>
10 |             <h1>Todo App</h1>
11 |             <h3>{todoTitle}</h3>
12 |             <p>{todoDesc}</p>
13 |             <p>{date}</p>
14 |             {/* <p>{fullDate.getDate() + "/" + fullDate.getMonth() + "/"+ fullDate.getFullYear()}</p> */}
15 |             {/* <p>{`${fullDate.getDate()}/${fullDate.getMonth()}/${fullDate.getFullYear()}`}</p> */}            
16 |         </div>
17 |     )
18 | }
19 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/useEffect/UseEffectExample.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | 
 3 | const useEffectExample = () => {
 4 |   const [count, setCount] = useState(0);
 5 |   const [isLoading, setIsLoading] = useState(false);
 6 | 
 7 |   useEffect(() => {
 8 |     // calls with first render and depened on count
 9 |     console.log("useEffect");
10 |   }, [count]);
11 | 
12 |   return (
13 |     <div>
14 |       {console.log("rednering")}
15 |       <h1>Count: {count} </h1>
16 |       <button
17 |         onClick={() => {
18 |           setCount((count) => count + 1);
19 |         }}
20 |       >
21 |         +
22 |       </button>
23 |       <button
24 |         onClick={() => {
25 |           setIsLoading(!isLoading);
26 |         }}
27 |       >
28 |         isLoading
29 |       </button>
30 |     </div>
31 |   );
32 | };
33 | 
34 | export default useEffectExample;
35 | 


--------------------------------------------------------------------------------
/src/components/PROPS_DESTRUCTURING_FUNCTIONAL/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './style.css'
 3 | 
 4 | // export default function PROPS_DESTRUCTURING(props) {
 5 | 
 6 | //destruturing inside function parameter
 7 | export default function PROPS_DESTRUCTURING_FUNCTIONAL({title, desc}) {
 8 | 
 9 | 
10 |     //destruturing inside function body
11 |     // const {title, desc} = props
12 | 
13 |     const fullDate = new Date();
14 |     const date = fullDate.getDate() + "/" + fullDate.getMonth() + "/"+ fullDate.getFullYear();
15 | 
16 |     return (
17 |         <div>
18 |             <div  className="card-style">
19 |                 {/* <h3>{props.title}</h3>
20 |                 <p>{props.desc}</p> */}
21 | 
22 |                 <h3>{title}</h3>
23 |                 <p>{desc}</p>
24 |                 <p>{date}</p>
25 |             </div>            
26 |         </div>
27 |     )
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/useState/USESTATE_OBJECT/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | export default function USESTATE_OBJECT() {
 4 |   const [user, setUser] = useState({ userId: "", fullName: "" });
 5 |   const { userId, fullName } = user;
 6 |   const handleChange = (e) => {
 7 |     setUser({ ...user, [e.target.name]: e.target.value });
 8 |   };
 9 |   return (
10 |     <div>
11 |       <form>
12 |         <input
13 |           type="text"
14 |           name="userId"
15 |           value={userId}
16 |           onChange={handleChange}
17 |         />
18 |         <input
19 |           type="text"
20 |           name="fullName"
21 |           //   value={user.fullName}
22 |           value={fullName}
23 |           onChange={handleChange}
24 |         />
25 |         <h1>
26 |           User: {userId}, {fullName}
27 |         </h1>
28 |       </form>
29 |     </div>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/src/components/Todo_Demo/Todos.js:
--------------------------------------------------------------------------------
 1 | // import React, { useState } from "react";
 2 | // import NewTodo from "./components/STATE_LIFTING/NewTodo";
 3 | // import Todos from "./components/STATE_LIFTING/Todos";
 4 | 
 5 | // const dummyTodos = ["item1", "item2"];
 6 | 
 7 | // export default function App() {
 8 | //   const [todos, setTodods] = useState(dummyTodos);
 9 | 
10 | //   const handleAddTodo = (newTodo) => {
11 | //     setTodods([...todos, newTodo]);
12 | //   };
13 | 
14 | //   return (
15 | //     <div>
16 | //       <NewTodo onAddTodo={handleAddTodo} />
17 | //       <Todos todos={todos} />
18 | //     </div>
19 | //   );
20 | // }
21 | 
22 | import React from "react";
23 | 
24 | const Todos = (props) => {
25 |   return (
26 |     <div>
27 |       {props.todos.map((todo, index) => (
28 |         <p key={index}>{todo}</p>
29 |       ))}
30 |     </div>
31 |   );
32 | };
33 | 
34 | export default Todos;
35 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/CustomHooks/useFetch.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | 
 3 | const useFetch = (url) => {
 4 |   const [data, setData] = useState(null);
 5 |   const [isLoading, setIsLoading] = useState(true);
 6 |   const [error, setError] = useState(null);
 7 | 
 8 |   useEffect(() => {
 9 |     fetch(url)
10 |       .then((res) => {
11 |         if (!res.ok) {
12 |           throw Error("fecthing is not successful");
13 |         } else {
14 |           return res.json();
15 |         }
16 |       })
17 |       .then((data) => {
18 |         setData(data);
19 |         console.log(data);
20 |         setIsLoading(false);
21 |         setError(null);
22 |       })
23 |       .catch((error) => {
24 |         setError(error.message);
25 |         setIsLoading(false);
26 |       });
27 |   }, [url]);
28 | 
29 |   return { data, isLoading, error };
30 | };
31 | 
32 | export default useFetch;
33 | 


--------------------------------------------------------------------------------
/src/components/Toggle/Toggle.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | const Toggle = () => {
 4 |   const [toggle, setToggle] = useState(true);
 5 |   return (
 6 |     <div style={{ margin: "1rem", backgroundColor: "pink", padding: "1rem" }}>
 7 |       {toggle && (
 8 |         <p>
 9 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum vel ipsam
10 |           error ex? Doloribus voluptatibus, esse et culpa ullam cum consequuntur
11 |           aperiam alias sapiente! Itaque similique delectus fugit labore
12 |           doloribus?
13 |         </p>
14 |       )}
15 |       <div style={{ textAlign: "center" }}>
16 |         <button
17 |           onClick={() => {
18 |             setToggle(!toggle);
19 |           }}
20 |         >
21 |           {toggle ? "Hide" : "Show"}
22 |         </button>
23 |       </div>
24 |     </div>
25 |   );
26 | };
27 | 
28 | export default Toggle;
29 | 


--------------------------------------------------------------------------------
/src/components/DATA_MAPPING/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Data from './data.json'
 3 | import Card from './Card'
 4 | 
 5 | export default function DATA_MAPPING() {
 6 | 
 7 |     //checking the data is imported correctly
 8 |     // console.log(Data)
 9 | 
10 |     //component listing using for loop
11 |     /*
12 |     let items = []
13 |     for(let x=0; x<Data.length; x++){
14 |         items.push(<Card key={x} title={Data[x].title} desc={Data[x].desc}/>)
15 |     }
16 |     */
17 | 
18 |     //component mapping using map
19 |     let items = Data.map( (item, index) => <Card key={index} title={item.title} desc={item.desc}/>)
20 | 
21 |     return (
22 |         <div>
23 |             {items}
24 | 
25 |             {/* we can directly do mapping inside jsx */}
26 |             {/* {Data.map( (item, index) => <Card key={index} title={item.title} desc={item.desc}/> ) } */}
27 |         </div>
28 |     )
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/PROPS_DESTRUCTURING_CLASS/index.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react'
 2 | import './style.css'
 3 | 
 4 | class PROPS_DESTRUCTURING_CLASS extends Component {
 5 | 
 6 |     //destruturing inside function body
 7 |     
 8 |  
 9 |     render(){
10 | 
11 |         const {title, desc} = this.props
12 |         const fullDate = new Date();
13 |         const date = fullDate.getDate() + "/" + fullDate.getMonth() + "/"+ fullDate.getFullYear();
14 | 
15 |         return (
16 |             <div>
17 |                 <div  className="card-style">
18 |                     {/* <h3>{this.props.title}</h3>
19 |                     <p>{this.props.desc}</p> */}
20 |                     <h3>{title}</h3>
21 |                     <p>{desc}</p>
22 |                     <p>{date}</p>
23 |                 </div>            
24 |             </div>
25 |         )
26 |     }
27 | }
28 | 
29 | export default PROPS_DESTRUCTURING_CLASS;


--------------------------------------------------------------------------------
/src/components/PureComponent/PureClassComponent.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import ChildClassComponent from "./ChildClassComponent";
 3 | 
 4 | export default class PureClassComponent extends React.PureComponent {
 5 |   constructor(props) {
 6 |     super(props);
 7 | 
 8 |     this.state = {
 9 |       userName: "",
10 |     };
11 |   }
12 | 
13 |   // shouldComponentUpdate() {
14 |   //   if (this.state.userName === "Anisul Islam") {
15 |   //     return false;
16 |   //   }
17 |   //   return true;
18 |   // }
19 | 
20 |   render() {
21 |     const { userName } = this.state;
22 |     console.log("rerender");
23 |     return (
24 |       <div>
25 |         <ChildClassComponent userName={userName} />
26 |         <h1>UserName : {userName}</h1>
27 |         <button onClick={() => this.setState({ userName: "Anisul Islam" })}>
28 |           set user
29 |         </button>
30 |       </div>
31 |     );
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/UseRefExample/UserForm.js:
--------------------------------------------------------------------------------
 1 | import React, { useRef } from "react";
 2 | 
 3 | const UserForm = () => {
 4 |   const userNameRef = useRef();
 5 |   const passwordRef = useRef();
 6 | 
 7 |   const handleSubmit = (event) => {
 8 |     event.preventDefault();
 9 |     const userName = userNameRef.current.value;
10 |     const password = passwordRef.current.value;
11 |     userNameRef.current.style.color = "red";
12 |     console.log({ userName, password });
13 |   };
14 |   return (
15 |     <form onSubmit={handleSubmit}>
16 |       <div>
17 |         <label htmlFor="userName">UserName: </label>
18 |         <input type="text" id="userName" ref={userNameRef} />
19 |       </div>
20 |       <div>
21 |         <label htmlFor="password">Password: </label>
22 |         <input type="password" id="password" ref={passwordRef} />
23 |       </div>
24 |       <button type="submit">Register</button>
25 |     </form>
26 |   );
27 | };
28 | 
29 | export default UserForm;
30 | 


--------------------------------------------------------------------------------
/src/components/RefExample/UserForm.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, createRef } from "react";
 2 | 
 3 | export default class UserForm extends Component {
 4 |   constructor(props) {
 5 |     super(props);
 6 |     this.userNameRef = createRef();
 7 |     this.state = {};
 8 |   }
 9 | 
10 |   handleSubmit = (event) => {
11 |     event.preventDefault();
12 |     console.log(this.userNameRef.current.value);
13 |     this.userNameRef.current.style.color = "green";
14 |   };
15 |   render() {
16 |     return (
17 |       <form onSubmit={this.handleSubmit}>
18 |         <div className="form-field">
19 |           <label htmlFor="userName">UserName : </label>
20 |           <input type="text" id="userName" ref={this.userNameRef} />
21 |         </div>
22 |         <div className="form-field">
23 |           <label htmlFor="password">Password : </label>
24 |           <input type="password" id="password" />
25 |         </div>
26 |         <button type="submit">Register</button>
27 |       </form>
28 |     );
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/FAQ/data.js:
--------------------------------------------------------------------------------
 1 | export const faqsData = [
 2 |   {
 3 |     id: 1,
 4 |     title: "How can we reach you?",
 5 |     desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dicta nihil neque molestias cupiditate obcaecati officiis magnam numquam iure doloremque.",
 6 |   },
 7 |   {
 8 |     id: 2,
 9 |     title: "When you are available?",
10 |     desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dicta nihil neque molestias cupiditate obcaecati officiis magnam numquam iure doloremque.",
11 |   },
12 |   {
13 |     id: 3,
14 |     title: "Where we can find all the videos?",
15 |     desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dicta nihil neque molestias cupiditate obcaecati officiis magnam numquam iure doloremque.",
16 |   },
17 |   {
18 |     id: 4,
19 |     title: "Can we learn full stack web development in a year?",
20 |     desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dicta nihil neque molestias cupiditate obcaecati officiis magnam numquam iure doloremque.",
21 |   },
22 | ];
23 | 


--------------------------------------------------------------------------------
/src/components/LifeCycle/LifeCycle.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | 
 3 | // Mounting -> constructor -> render -> componentDidMount
 4 | // Updating -> state/props -> render ->
 5 | // Unmounting
 6 | export default class LifeCycle extends Component {
 7 |   constructor(props) {
 8 |     super(props);
 9 |     console.log("constructor");
10 | 
11 |     this.state = {
12 |       count: 0,
13 |     };
14 |   }
15 | 
16 |   shouldComponentUpdate() {
17 |     console.log("shouldComponentUpdate");
18 |     return true;
19 |   }
20 | 
21 |   componentDidMount() {
22 |     console.log("componentDidMount");
23 |   }
24 | 
25 |   componentDidUpdate() {
26 |     console.log("componentDidUpdate");
27 |   }
28 | 
29 |   handleIncrement = () => {
30 |     this.setState({
31 |       count: this.state.count + 1,
32 |     });
33 |   };
34 | 
35 |   render() {
36 |     {
37 |       console.log("render");
38 |     }
39 |     return (
40 |       <div>
41 |         <h1>Counter : {this.state.count}</h1>
42 |         <button onClick={this.handleIncrement}>+</button>
43 |       </div>
44 |     );
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/components/BINDING_EVENT_HANDLER/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export class BINDING_EVENT_HANDLER extends Component {
 4 | 
 5 | 
 6 |     constructor(props) {
 7 |         super(props)
 8 |     
 9 |         this.state = {
10 |              count : 0
11 |         }
12 |         this.handleCounting = this.handleCounting.bind(this)
13 |     }
14 |     
15 | 
16 | 
17 |     handleCounting () {
18 |         this.setState({
19 |             count : this.state.count + 1
20 |         })
21 |     }
22 | 
23 | 
24 |     // handleCounting  = () =>{
25 |     //     this.setState({
26 |     //         count : this.state.count + 1
27 |     //     })
28 |     // }
29 | 
30 | 
31 | 
32 | 
33 |     render() {
34 |         return (
35 |             <div>
36 | 
37 |                 {/* <button onClick={this.handleCounting.bind(this)}>Increment</button> */} */}
38 |                
39 |                 <button onClick={this.handleCounting}>Increment</button>
40 |                 {this.state.count}
41 |             </div>
42 |         )
43 |     }
44 | }
45 | 
46 | export default BINDING_EVENT_HANDLER
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.6",
 7 |     "@testing-library/react": "^11.2.2",
 8 |     "@testing-library/user-event": "^12.5.0",
 9 |     "bootstrap": "^5.1.3",
10 |     "font-awesome": "^4.7.0",
11 |     "react": "^17.0.1",
12 |     "react-bootstrap": "^2.2.1",
13 |     "react-dom": "^17.0.1",
14 |     "react-scripts": "4.0.1",
15 |     "uuid": "^8.3.2",
16 |     "uuidv4": "^6.2.12",
17 |     "web-vitals": "^0.2.4"
18 |   },
19 |   "scripts": {
20 |     "start": "react-scripts start",
21 |     "build": "react-scripts build",
22 |     "test": "react-scripts test",
23 |     "eject": "react-scripts eject"
24 |   },
25 |   "eslintConfig": {
26 |     "extends": [
27 |       "react-app",
28 |       "react-app/jest"
29 |     ]
30 |   },
31 |   "browserslist": {
32 |     "production": [
33 |       ">0.2%",
34 |       "not dead",
35 |       "not op_mini all"
36 |     ],
37 |     "development": [
38 |       "last 1 chrome version",
39 |       "last 1 firefox version",
40 |       "last 1 safari version"
41 |     ]
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/STATE_IN_CLASS/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import './style.css'
 3 | class STATE_IN_CLASS extends Component {
 4 | 
 5 |     constructor(props) {
 6 |         super(props)    
 7 |         this.state = {
 8 |              count : 0
 9 |         }
10 |     }
11 | 
12 |     handleIncrement = () => {
13 |         this.setState({
14 |             count : this.state.count + 1
15 |         });
16 |     }
17 |     
18 |     handleDecrement = () => {
19 |         this.setState({
20 |             count : this.state.count - 1
21 |         });
22 |     }
23 |     
24 |     render() {
25 | 
26 |         const {count} = this.state
27 |         
28 |         return (
29 |             <div>
30 |                 <h1>Count : {count}</h1>
31 |                 <button onClick={this.handleIncrement} disabled={count===5 ? true : false}>+</button>
32 |                 <button onClick={this.handleDecrement} disabled={count===0 ? true : false}>-</button>
33 |                 {/* <button onClick={this.handleDecrement} disabled={count===0 && true}>-</button> */}
34 | 
35 |             </div>
36 |         )
37 |     }
38 | }
39 | 
40 | export default STATE_IN_CLASS
41 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/useEffectExample/index.js:
--------------------------------------------------------------------------------
 1 | // import React, { useState, useEffect } from "react";
 2 | 
 3 | export default function USE_EFFECT() {
 4 |   // const [searchData, setSearchData] = useState("");
 5 |   // const [data, setData] = useState([]);
 6 | 
 7 |   // useEffect(() => {
 8 |   //   fetch("https://jsonplaceholder.typicode.com/posts")
 9 |   //     .then((response) => response.json())
10 |   //     //   .then((json) => console.log(json));
11 |   //     .then((json) => {
12 |   //       setData(json);
13 |   //       // console.log(data);
14 |   //     });
15 |   // }, [data]);
16 | 
17 |   // useEffect(() => {
18 |   //   console.log(searchData);
19 |   // }, [searchData]);
20 | 
21 |   // const handleChange = (e) => {
22 |   //   setSearchData(e.target.value);
23 |   // };
24 | 
25 |   return (
26 |     <div>
27 |       {/* <form action="">
28 |         <h1>{searchData}</h1>
29 |         <input
30 |           type="text"
31 |           name="searchData"
32 |           value={searchData}
33 |           onChange={handleChange}
34 |         />
35 |       </form>
36 |       <ul>
37 |         {data.map((item, index) => (
38 |           <li key={index}>{item.title}</li>
39 |         ))}
40 |       </ul> */}
41 |       hi
42 |     </div>
43 |   );
44 | }
45 | 


--------------------------------------------------------------------------------
/src/components/CSS_STYLE/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './style.css'
 3 | 
 4 | export default function CSS_STYLE() {
 5 | 
 6 |     const todoTitle = "Call Family"
 7 |     const todoDesc = "Ipsum no sea sadipscing consetetur vero. Nonumy justo diam sed lorem sit, sed sit clita sit takimata sed sanctus invidunt."
 8 |     const fullDate = new Date();
 9 |     const date = fullDate.getDate() + "/" + fullDate.getMonth() + "/"+ fullDate.getFullYear();
10 | 
11 |     /**
12 |      * CSS Example - creating JS Object of a CSS Style
13 |      */
14 |     const cardStyle = {
15 |         backgroundColor : 'palegreen', 
16 |         width: '350px', 
17 |         padding:'10px'
18 |     }
19 | 
20 |     return (
21 |         <div>
22 | 
23 |             {/* Inline CSS style Example  */}           
24 |             <h1 style={{backgroundColor : 'purple', textAlign : 'center', padding:'10px', color : 'white'}}>Todo App</h1> 
25 |              
26 |              {/* Inline & external CSS style using className Example  */}
27 |             <div style={cardStyle} className="card-style">
28 |                 <h3>{todoTitle}</h3>
29 |                 <p>{todoDesc}</p>
30 |                 <p>{date}</p>
31 |             </div>            
32 |         </div>
33 |     )
34 | }
35 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/useEffect/DataFetch.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | 
 3 | const loadingMessage = <p>todos is loading</p>;
 4 | 
 5 | const DataFetch = () => {
 6 |   const [todos, setTodos] = useState(null);
 7 |   const [isLoading, setIsLoading] = useState(true);
 8 |   const [error, setError] = useState(null);
 9 | 
10 |   useEffect(() => {
11 |     fetch("https://jsonplaceholder.typicode.com/todos")
12 |       .then((res) => {
13 |         if (!res.ok) {
14 |           throw Error("fecthing is not successful");
15 |         } else {
16 |           return res.json();
17 |         }
18 |       })
19 |       .then((data) => {
20 |         setTodos(data);
21 |         setIsLoading(false);
22 |         setError(null);
23 |       })
24 |       .catch((error) => {
25 |         setError(error.message);
26 |         setIsLoading(false);
27 |       });
28 |   }, []);
29 | 
30 |   const todosElement =
31 |     todos &&
32 |     todos.map((todo) => {
33 |       return <p key={todo.id}> {todo.title} </p>;
34 |     });
35 | 
36 |   return (
37 |     <div>
38 |       <h1>Todos</h1>
39 |       {error && <p> {error} </p>}
40 |       {isLoading && loadingMessage}
41 |       {todosElement}
42 |     </div>
43 |   );
44 | };
45 | 
46 | export default DataFetch;
47 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/useEffectExample/UseEffectHook.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | 
 3 | const UseEffectHook = () => {
 4 |   const [todos, setTodos] = useState(null);
 5 |   const [isLoading, setIsLoading] = useState(true);
 6 |   const [error, setError] = useState(null);
 7 | 
 8 |   useEffect(() => {
 9 |     fetch("https://jsonplaceholde.typicode.com/todos")
10 |       .then((res) => {
11 |         if (!res.ok) {
12 |           throw Error("error while fetching the data");
13 |         }
14 |         return res.json();
15 |       })
16 |       .then((data) => {
17 |         setTodos(data);
18 |         setIsLoading(false);
19 |         setError(null);
20 |       })
21 |       .catch((error) => {
22 |         setIsLoading(false);
23 |         setError(error.message);
24 |       });
25 |   }, []);
26 | 
27 |   const errorMessage = error && <p> {error} </p>;
28 |   const loadingMessage = isLoading && "data is loading";
29 | 
30 |   const todosElement =
31 |     todos &&
32 |     todos.map((todo) => (
33 |       <div key={todo.id}>
34 |         <p>{todo.title}</p>
35 |       </div>
36 |     ));
37 | 
38 |   return (
39 |     <div>
40 |       {errorMessage}
41 |       {loadingMessage}
42 |       {todosElement}
43 |     </div>
44 |   );
45 | };
46 | 
47 | export default UseEffectHook;
48 | 


--------------------------------------------------------------------------------
/src/components/EVENT_HANDLING_CLASS/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import './style.css'
 3 | 
 4 | export class EVENT_HANDLING_CLASS extends Component {
 5 | 
 6 |     constructor(props) {
 7 |         super(props)
 8 |     
 9 |         this.state = {
10 |              searchValue : ''
11 |         }
12 |     }
13 |     
14 | 
15 |     // handleOnChange = (e) =>{
16 |     //    console.log(e.target.value)
17 |     // }
18 |    
19 | 
20 |     // handleOnChange = (e) =>{
21 |     //     this.setState({
22 |     //         searchValue : e.target.value
23 |     //     })
24 |     //     console.log(this.state.searchValue)
25 |     // }
26 | 
27 | 
28 |     handleOnChange = (e) =>{
29 |         this.setState({
30 |             searchValue : e.target.value
31 |         }, () => {
32 |             console.log("Inside setState : "+this.state.searchValue)
33 |         })
34 |         console.log("Outside setState : "+this.state.searchValue)
35 |     }
36 | 
37 | 
38 |     handleSignUpClick = () =>{
39 |         console.log("sign up is clicked")
40 |     }
41 | 
42 | 
43 |     render() {
44 |         const {searchValue} = this.state
45 |         return (
46 |             <div>
47 |                 <input type="text" value={searchValue} onChange={this.handleOnChange}/>
48 |                 <button onClick={this.handleSignUpClick}>Sign Up</button>
49 |                 <p>{searchValue}</p>
50 |             </div>
51 |         )
52 |     }
53 | }
54 | 
55 | export default EVENT_HANDLING_CLASS
56 | 


--------------------------------------------------------------------------------
/src/components/CONDITIONAL_RENDERING/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import './style.css'
 3 | import HomePage from './HomePage'
 4 | import SignUpPage from './SignUpPage'
 5 | class CONDITIONAL_RENDERING extends Component {
 6 | 
 7 |     constructor(props) {
 8 |         super(props)
 9 |     
10 |         this.state = {
11 |              isLoggedIn : false
12 |         }
13 |     }
14 |    
15 |     
16 |     render() {
17 | 
18 |         const {isLoggedIn} = this.state
19 |         let element;
20 | 
21 |         /** conditional rending based on if-else */
22 |         /*
23 |             if(isLoggedIn){
24 |             return <HomePage />
25 |             }else{
26 |                 return <SignUpPage />
27 |             }
28 |         */
29 | 
30 |         //element variable rendering
31 |        /*
32 |             if(isLoggedIn){
33 |             element =  <HomePage />
34 |         }else{
35 |             element =  <SignUpPage />
36 |         }
37 |         return (
38 |             <div>
39 |                 {element}
40 |             </div>
41 |         )
42 |        */
43 | 
44 |        //ternary operator
45 |       element =  isLoggedIn ? <HomePage /> : <SignUpPage />
46 |       return (
47 |           <div>
48 |               {element}
49 |               {/* {isLoggedIn ? <HomePage /> : <SignUpPage />} */}
50 | 
51 |               {/* short circuit method */}
52 |               {/* {isLoggedIn && <HomePage />} */}
53 |           </div>
54 |       )
55 |     }
56 | }
57 | 
58 | export default CONDITIONAL_RENDERING
59 | 


--------------------------------------------------------------------------------
/src/components/FORM/index4.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import "./style.css";
 3 | 
 4 | export default function FORM4() {
 5 |   const [user, setUser] = useState({
 6 |     name: "",
 7 |     email: "",
 8 |     password: "",
 9 |   });
10 | 
11 |   const { name, email, password } = user;
12 | 
13 |   const handleChange = (e) => {
14 |     setUser({ ...user, [e.target.name]: e.target.value });
15 |   };
16 | 
17 |   const handleSubmit = (e) => {
18 |     console.log(user);
19 |     e.preventDefault();
20 |   };
21 | 
22 |   return (
23 |     <div>
24 |       <h1>Register</h1>
25 |       <form onSubmit={handleSubmit}>
26 |         <div>
27 |           <label>Name : </label>
28 |           <input
29 |             onChange={handleChange}
30 |             value={name}
31 |             type="text"
32 |             name="name"
33 |             id="name"
34 |             required
35 |           />
36 |         </div>
37 |         <div>
38 |           <label>Email : </label>
39 |           <input
40 |             onChange={handleChange}
41 |             value={email}
42 |             type="email"
43 |             name="email"
44 |             id="email"
45 |             required
46 |           />
47 |         </div>
48 |         <div>
49 |           <label>Password : </label>
50 |           <input
51 |             onChange={handleChange}
52 |             value={password}
53 |             type="password"
54 |             name="password"
55 |             id="password"
56 |             required
57 |           />
58 |         </div>
59 |         <button type="submit">Register</button>
60 |       </form>
61 |     </div>
62 |   );
63 | }
64 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/useState/USESTATE_ARRAY/BookList.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import styles from "./booklist.module.css";
 3 | 
 4 | export default function BookList() {
 5 |   const [bookList, setBookList] = useState([]);
 6 |   const [book, setBook] = useState({ bookName: "", bookPrice: "" });
 7 | 
 8 |   const { bookName, bookPrice } = book;
 9 | 
10 |   const addBook = () => {
11 |     setBookList([
12 |       ...bookList,
13 |       {
14 |         id: bookList.length + 1,
15 |         name: book.bookName,
16 |         price: book.bookPrice,
17 |       },
18 |     ]);
19 |     // console.log(bookList);
20 |   };
21 | 
22 |   const handleChange = (e) => {
23 |     setBook({ ...book, [e.target.name]: e.target.value });
24 |     // console.log(e.target.value);
25 |   };
26 | 
27 |   return (
28 |     <div>
29 |       <h1>Book Manager</h1>
30 |       <div>
31 |         <label htmlFor="bookName">Book Name : </label>{" "}
32 |         <input
33 |           type="text"
34 |           id="bookName"
35 |           name="bookName"
36 |           value={bookName}
37 |           onChange={handleChange}
38 |         />
39 |       </div>
40 |       <div>
41 |         <label htmlFor="bookPrice">Book Price : </label>{" "}
42 |         <input
43 |           type="text"
44 |           id="bookPrice"
45 |           name="bookPrice"
46 |           value={bookPrice}
47 |           onChange={handleChange}
48 |         />
49 |       </div>
50 | 
51 |       <button onClick={addBook} style={{ display: "block" }}>
52 |         Add Book
53 |       </button>
54 |       <ul>
55 |         {bookList.map((item, index) => (
56 |           //   console.log(item)
57 |           <li
58 |             key={index}
59 |           >{`Id: ${item.id}, Name: ${item.name}, Price: ${item.price}`}</li>
60 |         ))}
61 |       </ul>
62 |     </div>
63 |   );
64 | }
65 | 


--------------------------------------------------------------------------------
/src/components/HOOKS/UseReducer/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useReducer } from "react";
 2 | import { reducer } from "./reducer";
 3 | const booksData = [
 4 |   { id: 1, name: "Pather Panchal" },
 5 |   { id: 2, name: "Padma Nadir Majhi" },
 6 |   { id: 3, name: "  Srikanta" },
 7 | ];
 8 | 
 9 | const Modal = ({ modalText }) => {
10 |   return <p>{modalText}</p>;
11 | };
12 | 
13 | const initialState = {
14 |   books: booksData,
15 |   isModalOpen: false,
16 |   modalText: "",
17 | };
18 | const UseReducer = () => {
19 |   const [bookState, dispatch] = useReducer(reducer, initialState);
20 |   const [bookName, setBookName] = useState("");
21 | 
22 |   const handleSubmit = (e) => {
23 |     e.preventDefault();
24 |     const newBook = { id: new Date().getTime().toString(), name: bookName };
25 |     dispatch({ type: "ADD", payload: newBook });
26 |     setBookName("");
27 |   };
28 | 
29 |   const removeBook = (id) => {
30 |     dispatch({ type: "REMOVE", payload: id });
31 |   };
32 |   return (
33 |     <div>
34 |       <h3>Book List</h3>
35 |       <form onSubmit={handleSubmit}>
36 |         <input
37 |           type="text"
38 |           value={bookName}
39 |           onChange={(e) => {
40 |             setBookName(e.target.value);
41 |           }}
42 |         />
43 |         <button type="submit">Add Book</button>
44 |       </form>
45 | 
46 |       {bookState.isModalOpen && <Modal modalText={bookState.modalText} />}
47 | 
48 |       {bookState.books.map((book) => {
49 |         const { id, name } = book;
50 |         return (
51 |           <li key={id}>
52 |             {name}{" "}
53 |             <button
54 |               onClick={() => {
55 |                 removeBook(id);
56 |               }}
57 |             >
58 |               Remove
59 |             </button>
60 |           </li>
61 |         );
62 |       })}
63 |     </div>
64 |   );
65 | };
66 | 
67 | export default UseReducer;
68 | 


--------------------------------------------------------------------------------
/src/components/FORM/index1.js:
--------------------------------------------------------------------------------
 1 | import React,{useState} from 'react'
 2 | import './style.css'
 3 | 
 4 | export default function FORM1() {
 5 | 
 6 |     const [name, setName] = useState("");
 7 |     const [email, setEmail] = useState("");
 8 |     const [password, setPassword] = useState("");
 9 | 
10 |     const handleNameChange = (e) =>{
11 |         setName(e.target.value)
12 |     }
13 | 
14 |     const handleEmailChange = (e) =>{
15 |         setEmail(e.target.value)
16 |     }
17 | 
18 |     const handleSubmit = (e) =>{
19 |         console.log(name, email, password)
20 |         e.preventDefault();
21 |     }
22 | 
23 |     return (
24 |         <div>
25 |             <h1>Register</h1>
26 |             <form onSubmit={handleSubmit}>
27 |                 <div>
28 |                     <label>Name : </label>
29 |                     <input
30 |                         onChange={handleNameChange}
31 |                         value={name}
32 |                         type="text"
33 |                         name="name"
34 |                         id="name"
35 |                         required />
36 |                 </div>
37 |                 <div>
38 |                     <label>Email : </label>
39 |                     <input
40 |                         onChange={handleEmailChange}
41 |                         value={email}
42 |                         type="email"
43 |                         name="email"
44 |                         id="email"
45 |                         required />
46 |                 </div>
47 |                 <div>
48 |                     <label>Password : </label>
49 |                     <input
50 |                         onChange={(e) => setPassword(e.target.value)}
51 |                         value={password}
52 |                         type="password"
53 |                         name="password"
54 |                         id="password"
55 |                         required />
56 |                 </div>
57 |                 <button type="submit">Register</button>
58 |             </form>
59 | 
60 |            
61 |         </div>
62 |     )
63 | }
64 | 


--------------------------------------------------------------------------------
/src/components/FORM/index2.js:
--------------------------------------------------------------------------------
 1 | import React,{useState} from 'react'
 2 | import './style.css'
 3 | 
 4 | export default function FORM2() {
 5 | 
 6 |    const [user, setUser] = useState({
 7 |        name : '',
 8 |        email : '',
 9 |        password : ''
10 |    })
11 | 
12 |    const {name, email, password} = user
13 | 
14 |     const handleNameChange = (e) =>{
15 |         setUser({name : e.target.value, email, password});
16 |     }
17 | 
18 |     const handleEmailChange = (e) =>{
19 |         setUser({name, email : e.target.value, password});
20 |     }
21 |     const handlePasswordChange = (e) =>{
22 |         setUser({name, email, password: e.target.value});
23 |     }
24 | 
25 |     const handleSubmit = (e) =>{
26 |         console.log(user)
27 |         e.preventDefault();
28 |     }
29 | 
30 |     return (
31 |         <div>
32 |             <h1>Register</h1>
33 |             <form onSubmit={handleSubmit}>
34 |                 <div>
35 |                     <label>Name : </label>
36 |                     <input
37 |                         onChange={handleNameChange}
38 |                         value={name}
39 |                         type="text"
40 |                         name="name"
41 |                         id="name"
42 |                         required />
43 |                 </div>
44 |                 <div>
45 |                     <label>Email : </label>
46 |                     <input
47 |                         onChange={handleEmailChange}
48 |                         value={email}
49 |                         type="email"
50 |                         name="email"
51 |                         id="email"
52 |                         required />
53 |                 </div>
54 |                 <div>
55 |                     <label>Password : </label>
56 |                     <input
57 |                         onChange={handlePasswordChange}
58 |                         value={password}
59 |                         type="password"
60 |                         name="password"
61 |                         id="password"
62 |                         required />
63 |                 </div>
64 |                 <button type="submit">Register</button>
65 |             </form>
66 | 
67 |            
68 |         </div>
69 |     )
70 | }
71 | 


--------------------------------------------------------------------------------
/src/components/FORM/index3.js:
--------------------------------------------------------------------------------
 1 | import React,{useState} from 'react'
 2 | import './style.css'
 3 | 
 4 | export default function FORM3() {
 5 | 
 6 |    const [user, setUser] = useState({
 7 |        name : '',
 8 |        email : '',
 9 |        password : ''
10 |    })
11 | 
12 |    const {name, email, password} = user
13 | 
14 |     const handleChange = (e) =>{
15 |         const fieldName = e.target.name;
16 |         if(fieldName === 'name'){
17 |             setUser({name : e.target.value, email, password});
18 |         }
19 |         else if(fieldName === 'email'){
20 |             setUser({name, email : e.target.value, password});
21 |         }
22 |         else if(fieldName === 'password'){
23 |             setUser({name, email, password: e.target.value});
24 |         }
25 | 
26 |         
27 |     }  
28 | 
29 |     const handleSubmit = (e) =>{
30 |         console.log(user)
31 |         e.preventDefault();
32 |     }
33 | 
34 |     return (
35 |         <div>
36 |             <h1>Register</h1>
37 |             <form onSubmit={handleSubmit}>
38 |                 <div>
39 |                     <label>Name : </label>
40 |                     <input
41 |                         onChange={handleChange}
42 |                         value={name}
43 |                         type="text"
44 |                         name="name"
45 |                         id="name"
46 |                         required />
47 |                 </div>
48 |                 <div>
49 |                     <label>Email : </label>
50 |                     <input
51 |                         onChange={handleChange}
52 |                         value={email}
53 |                         type="email"
54 |                         name="email"
55 |                         id="email"
56 |                         required />
57 |                 </div>
58 |                 <div>
59 |                     <label>Password : </label>
60 |                     <input
61 |                         onChange={handleChange}
62 |                         value={password}
63 |                         type="password"
64 |                         name="password"
65 |                         id="password"
66 |                         required />
67 |                 </div>
68 |                 <button type="submit">Register</button>
69 |             </form>
70 | 
71 |            
72 |         </div>
73 |     )
74 | }
75 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `npm start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 | 
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 | 
17 | ### `npm test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `npm run eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 | 
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 | 
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | ### Code Splitting
49 | 
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 | 
52 | ### Analyzing the Bundle Size
53 | 
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 | 
56 | ### Making a Progressive Web App
57 | 
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 | 
60 | ### Advanced Configuration
61 | 
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 | 
64 | ### Deployment
65 | 
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 | 
68 | ### `npm run build` fails to minify
69 | 
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 | 


--------------------------------------------------------------------------------