)
20 |
21 | return (
22 |
23 | {items}
24 |
25 | {/* we can directly do mapping inside jsx */}
26 | {/* {Data.map( (item, index) => ) } */}
27 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/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/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 |
47 |
48 |
Sign Up
49 |
{searchValue}
50 |
11 | Sign up
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/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/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 |
8 |
9 |
{title}
10 | {
12 | setToggle(!toggle);
13 | }}
14 | >
15 | {toggle ? "-" : "+"}
16 |
17 |
18 | {toggle && {desc}
}
19 |
20 | );
21 | };
22 |
23 | export default FAQ;
24 |
--------------------------------------------------------------------------------
/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 |
11 |
12 | FAQs
13 | {faqs.map((faq) => (
14 |
17 |
18 | );
19 | };
20 |
21 | export default FAQS;
22 |
--------------------------------------------------------------------------------
/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/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/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 |
--------------------------------------------------------------------------------
/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 |
25 |
Register
26 |
59 |
60 |
61 |
32 |
Register
33 |
66 |
67 |
68 |
36 |
Register
37 |
70 |
71 |
72 |
todos is loading
;
10 | const errorMessage = {error}
;
11 |
12 | const todosElement =
13 | data &&
14 | data.map((todo) => {
15 | return {todo.title}
;
16 | });
17 |
18 | return (
19 |
20 |
Todos
21 | {error && errorMessage}
22 | {isLoading && loadingMessage}
23 | {todosElement}
24 |
25 | );
26 | };
27 |
28 | export default DataFetch;
29 |
--------------------------------------------------------------------------------
/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/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 {modalText}
;
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 |
34 |
Book List
35 |
45 |
46 | {bookState.isModalOpen &&
52 | {name}{" "}
53 | {
55 | removeBook(id);
56 | }}
57 | >
58 | Remove
59 |
60 |
61 | );
62 | })}
63 |
64 | );
65 | };
66 |
67 | export default UseReducer;
68 |
--------------------------------------------------------------------------------
/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/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 |
26 | );
27 | };
28 |
29 | export default UserForm;
30 |
--------------------------------------------------------------------------------
/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 |
9 |
11 | );
12 | };
13 |
14 | export default Component1;
15 |
16 | // global state
17 | // component1 -> component2 -> component3 -> component4
18 |
--------------------------------------------------------------------------------
/src/components/HOOKS/useContext/Component2.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Component3 from "./Component3";
3 |
4 | const Component2 = () => {
5 | return (
6 |
7 |
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 |
7 |
9 | );
10 | };
11 |
12 | export default Component3;
13 |
--------------------------------------------------------------------------------
/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 |
8 |
{text}
9 | {user.id}
10 | {user.name}
11 |
12 | );
13 | };
14 |
15 | export default Component4;
16 |
--------------------------------------------------------------------------------
/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/HOOKS/useEffect/DataFetch.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 |
3 | const loadingMessage = todos is loading
;
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 {todo.title}
;
34 | });
35 |
36 | return (
37 |
38 |
Todos
39 | {error &&
{error}
}
40 | {isLoading && loadingMessage}
41 | {todosElement}
42 |
14 | {console.log("rednering")}
15 |
Count: {count}
16 | {
18 | setCount((count) => count + 1);
19 | }}
20 | >
21 | +
22 |
23 | {
25 | setIsLoading(!isLoading);
26 | }}
27 | >
28 | isLoading
29 |
30 |
31 | );
32 | };
33 |
34 | export default useEffectExample;
35 |
--------------------------------------------------------------------------------
/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 && {error}
;
28 | const loadingMessage = isLoading && "data is loading";
29 |
30 | const todosElement =
31 | todos &&
32 | todos.map((todo) => (
33 |
36 | ));
37 |
38 | return (
39 |
40 | {errorMessage}
41 | {loadingMessage}
42 | {todosElement}
43 |
44 | );
45 | };
46 |
47 | export default UseEffectHook;
48 |
--------------------------------------------------------------------------------
/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 |
27 | {/*
36 |
37 | {data.map((item, index) => (
38 | {item.title}
39 | ))}
40 | */}
41 | hi
42 |
29 |
Book Manager
30 |
31 | Book Name : {" "}
32 |
40 |
41 | Book Price : {" "}
42 |
50 |
51 |
52 | Add Book
53 |
54 |
55 | {bookList.map((item, index) => (
56 | // console.log(item)
57 | {`Id: ${item.id}, Name: ${item.name}, Price: ${item.price}`}
60 | ))}
61 |
62 |
16 |
Count : {count}
17 |
18 | Increment
19 |
20 |
21 | Decrement
22 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/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 |
11 |
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/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 |
10 |
Todo App
11 |
{todoTitle}
12 |
{todoDesc}
13 |
{date}
14 | {/*
{fullDate.getDate() + "/" + fullDate.getMonth() + "/"+ fullDate.getFullYear()}
*/}
15 | {/*
{`${fullDate.getDate()}/${fullDate.getMonth()}/${fullDate.getFullYear()}`}
*/}
16 |
41 |
Counter : {this.state.count}
42 | +
43 |
44 | );
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/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 |
17 |
18 | {/*
{this.props.title}
19 |
{this.props.desc}
*/}
20 |
{title}
21 |
{desc}
22 |
{date}
23 |
24 |
18 |
19 | {/*
{props.title}
20 |
{props.desc}
*/}
21 |
22 |
{title}
23 |
{desc}
24 |
{date}
25 |
26 |
7 |
{props.user.id}
8 | {props.user.name}
9 |
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/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 |
8 |
ChildClassComponent : {this.props.userName}
9 |
10 | );
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/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 |
25 |
UserName : {userName}
27 | this.setState({ userName: "Anisul Islam" })}>
28 | set user
29 |
30 |
31 | );
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/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 |
19 | {console.log("render")}
20 |
UserName: {setName}
21 | setName
22 |
23 | );
24 | };
25 |
26 | export default PureFunctionalComponent;
27 |
--------------------------------------------------------------------------------
/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 |
9 |
10 | Card Title
11 |
12 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur
13 | quibusdam non iure accusantium nemo! Aliquam.
14 |
15 | Learn more
16 |
17 |
18 | );
19 | };
20 |
21 | export default ReactBootstrap;
22 |
--------------------------------------------------------------------------------
/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 |
28 | );
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/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 |
9 |
I am child component
10 |
{props.data}
11 |
15 |
18 | );
19 | };
20 |
21 | export default Home;
22 |
--------------------------------------------------------------------------------
/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 |
27 | );
28 | };
29 |
30 | export default NewTodo;
31 |
--------------------------------------------------------------------------------
/src/components/SATET_LIFTING/Todo.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Todo = (props) => {
4 | return {props.todo}
;
5 | };
6 |
7 | export default Todo;
8 |
--------------------------------------------------------------------------------
/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 |
8 | {props.todos.map((todo, index) => (
9 |
12 | );
13 | };
14 |
15 | export default Todos;
16 |
--------------------------------------------------------------------------------
/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 |
30 |
Count : {count}
31 | +
32 | -
33 | {/* - */}
34 |
35 |
36 | )
37 | }
38 | }
39 |
40 | export default STATE_IN_CLASS
41 |
--------------------------------------------------------------------------------
/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/Table/Column.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Column = () => {
4 | return (
5 | <>
6 | Anisul Islam
7 | 32 years old
8 |
9 | );
10 | };
11 |
12 | export default Column;
13 |
--------------------------------------------------------------------------------
/src/components/Table/Table.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Column from "./Column";
3 |
4 | const Table = () => {
5 | return (
6 |
7 |
8 |
10 |
11 |
13 |
14 | );
15 | };
16 |
17 | export default Table;
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 |
21 | );
22 | };
23 |
24 | export default NewTodo;
25 |
--------------------------------------------------------------------------------
/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 | //
16 | //
19 | // );
20 | // }
21 |
22 | import React from "react";
23 |
24 | const Todos = (props) => {
25 | return (
26 |
27 | {props.todos.map((todo, index) => (
28 |
{todo}
29 | ))}
30 |
7 | {toggle && (
8 |
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 |
14 | )}
15 |
16 | {
18 | setToggle(!toggle);
19 | }}
20 | >
21 | {toggle ? "Hide" : "Show"}
22 |
23 |
24 |
26 | {todos.map((todo) => {
27 | const { id, title, desc } = todo;
28 | return (
29 |
30 |
{title}
31 |
{desc}
32 |
33 | );
34 | })}
35 |