├── .gitignore ├── Anshuman ├── Task2 │ └── src │ │ ├── App.js │ │ ├── Char.js │ │ ├── Index.css │ │ └── Validation.js └── src │ ├── App.js │ └── Validation │ └── Validation.js ├── Ayushi ├── Task_1 │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Person.css │ │ ├── Person.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── serviceWorker.js │ │ └── setupTests.js └── Task_2 │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Char.js │ ├── Validation.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js ├── Isha ├── .gitattributes ├── package.json └── task1 │ ├── .gitattributes │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ ├── Person.css │ ├── Person.js │ └── index.js ├── Kunal ├── Task-1 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Person.css │ │ ├── Person.js │ │ ├── index.css │ │ └── index.js │ └── yarn.lock └── Task-2 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── App.css │ ├── App.js │ ├── Char │ │ └── Char.js │ ├── Validation │ │ └── Validation.js │ ├── index.css │ └── index.js │ └── yarn.lock ├── Lecture1 └── main.js ├── Lecture2 ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Person │ └── Person.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js ├── Lecture3 ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Person │ └── Person.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js ├── Lecture4 ├── lec4pt1 │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Person │ │ └── Person.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── serviceWorker.js │ │ └── setupTests.js └── lec4pt2 │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Person │ └── Person.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js ├── Lecture5 ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Char │ └── Char.js │ ├── Validation │ └── Validation.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js ├── Project Screenshots ├── todo-saransh.jpg ├── todo-satvik.jpg └── todo-tanishq.jpg ├── README.md ├── Tanishq ├── my-app-2 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ └── index.js │ └── yarn.lock ├── my-app │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── components │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── Person.css │ │ │ └── Person.js │ │ └── index.js │ └── yarn.lock └── todolist │ ├── MAIN.md │ ├── README.md │ ├── package.json │ ├── public │ ├── index.html │ └── style │ │ └── style.css │ ├── src │ ├── components │ │ ├── App.jsx │ │ ├── InputForm.jsx │ │ ├── TodoItem.css │ │ └── TodoItem.jsx │ └── index.js │ └── yarn.lock ├── charu ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Person │ │ └── Person.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js └── yarn.lock ├── charuSachdeva ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Char │ │ └── Char.js │ ├── Validation │ │ └── Validation.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js └── yarn.lock ├── sahilcodes └── my-app │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── App.js │ ├── App.test.js │ ├── Person │ │ ├── Person.css │ │ └── Person.js │ ├── index.css │ ├── index.js │ ├── serviceWorker.js │ └── setupTests.js │ └── yarn.lock └── ssbeast └── myapp_task1 ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── Person.css ├── Person.js ├── index.css ├── index.js ├── logo.svg ├── serviceWorker.js └── setupTests.js /.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/.gitignore -------------------------------------------------------------------------------- /Anshuman/Task2/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Validation from './Validation/Validation'; 4 | import Char from './Char/Char'; 5 | 6 | // STATE MANAGEMENT 7 | 8 | class App extends Component{ 9 | 10 | state = { 11 | inputValue : '' 12 | }; 13 | 14 | inputChangedHandler = (event) =>{ 15 | this.setState({ 16 | inputValue: event.target.value 17 | }) 18 | } 19 | 20 | deleteEventHandler = (index) =>{ 21 | 22 | const text = this.state.inputValue.split(''); 23 | 24 | text.splice(index,1); 25 | 26 | const updatedText = text.join(''); 27 | 28 | this.setState({ 29 | inputValue: updatedText 30 | }); 31 | 32 | 33 | } 34 | 35 | render(){ 36 | 37 | // RENDERING LIST 38 | 39 | let charList = this.state.inputValue.split('').map((ch,index)=>{ 40 | return ( 41 | 42 | ) 43 | }); 44 | 45 | 46 | return ( 47 |
48 |

React App

49 |

Track Your todo List

50 |

Omit the things that are done!

51 | 52 |

53 | 54 | {charList} 55 |
56 | ) 57 | } 58 | } 59 | 60 | export default App; 61 | -------------------------------------------------------------------------------- /Anshuman/Task2/src/Char.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | 4 | // STYLING CONCEPT 5 | // PASSING METHODS AS REFERENCES BETWEEN 2 COMPONENTS 6 | 7 | const Char = (props) => { 8 | const styles = { 9 | backgroundColor: "rgb(63, 3, 63", 10 | color:"white", 11 | display : 'inline-block', 12 | padding: '16px', 13 | margin: '16px', 14 | border: '1px solid black', 15 | textAlign: 'center', 16 | 17 | } 18 | return( 19 |
20 | {props.character} 21 |
22 | ) 23 | } 24 | 25 | export default Char; 26 | -------------------------------------------------------------------------------- /Anshuman/Task2/src/Index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: aqua; 4 | 5 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 6 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 7 | sans-serif; 8 | -webkit-font-smoothing: antialiased; 9 | -moz-osx-font-smoothing: grayscale; 10 | } 11 | h1{ 12 | color: darkred; 13 | } 14 | h2{ 15 | font-family: cursive; 16 | color:indigo 17 | 18 | } 19 | h3{ 20 | font-family: cursive; 21 | color:tomato; 22 | } 23 | p{ 24 | color: rgb(18, 2, 63); 25 | 26 | } 27 | 28 | code { 29 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 30 | 31 | 32 | } 33 | -------------------------------------------------------------------------------- /Anshuman/Task2/src/Validation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // CONDITIONAL RENDERING 4 | 5 | const Validation = (props) => { 6 | let validationMessage = (

Text too short! 7 |

); 8 | 9 | 10 | if(props.inputLength >= 5){ 11 | validationMessage = (

Text long enough!

); 12 | } 13 | 14 | return( 15 |
16 | {validationMessage} 17 |
18 | ) 19 | } 20 | 21 | export default Validation; 22 | -------------------------------------------------------------------------------- /Anshuman/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Person from './components/Person'; 3 | import './App.css'; 4 | function App() 5 | { 6 | return ( 7 |
8 | 9 | 10 |
11 | ) 12 | } 13 | 14 | export default App; 15 | 16 | -------------------------------------------------------------------------------- /Anshuman/src/Validation/Validation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // CONDITIONAL RENDERING 4 | 5 | const Validation = (props) => { 6 | let validationMessage = (

Text too short! 7 |

); 8 | 9 | 10 | if(props.inputLength >= 5){ 11 | validationMessage = (

Text long enough!

); 12 | } 13 | 14 | return( 15 |
16 | {validationMessage} 17 |
18 | ) 19 | } 20 | 21 | export default Validation; 22 | -------------------------------------------------------------------------------- /Ayushi/Task_1/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Ayushi/Task_1/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import Person from "./Person.js"; 4 | 5 | class App extends React.Component { 6 | render() { 7 | return ( 8 |
9 | 10 |
11 | ); 12 | } 13 | } 14 | export default App; 15 | -------------------------------------------------------------------------------- /Ayushi/Task_1/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /Ayushi/Task_1/src/Person.css: -------------------------------------------------------------------------------- 1 | .Person { 2 | border: solid 1px blueviolet; 3 | background-color: bisque; 4 | padding: 20px; 5 | height: 100px; 6 | width: 250px; 7 | } 8 | -------------------------------------------------------------------------------- /Ayushi/Task_1/src/Person.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./Person.css"; 3 | 4 | class person extends Component { 5 | render() { 6 | return ( 7 |
8 |

Hey! I'm {this.props.name}

9 |

Happy learning React..

10 |
11 | ); 12 | } 13 | } 14 | 15 | export default person; 16 | -------------------------------------------------------------------------------- /Ayushi/Task_1/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Ayushi/Task_1/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /Ayushi/Task_1/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Ayushi/Task_1/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /Ayushi/Task_2/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | background-color: rgb(199, 233, 222); 4 | } 5 | 6 | h1 { 7 | color: rgb(95, 54, 190); 8 | } 9 | 10 | #textfield { 11 | font-size: large; 12 | color: rgb(95, 54, 190); 13 | } 14 | -------------------------------------------------------------------------------- /Ayushi/Task_2/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Validation from "./Validation.js"; 3 | import Char from "./Char.js"; 4 | import "./App.css"; 5 | 6 | class App extends Component { 7 | state = { 8 | inputValue: "", 9 | }; 10 | 11 | inputChangedhandler = (event) => { 12 | this.setState({ 13 | inputValue: event.target.value, 14 | }); 15 | }; 16 | 17 | deleteEventHandler = (index) => { 18 | const text = this.state.inputValue.split(""); 19 | 20 | text.splice(index, 1); 21 | 22 | const updatedText = text.join(""); 23 | 24 | this.setState({ 25 | inputValue: updatedText, 26 | }); 27 | }; 28 | 29 | render() { 30 | let charList = this.state.inputValue.split("").map((ch, index) => { 31 | return ( 32 | 33 | ); 34 | }); 35 | 36 | return ( 37 |
38 |

Your todo List

39 | 45 |

46 | 47 | {charList} 48 |
49 | ); 50 | } 51 | } 52 | 53 | export default App; 54 | -------------------------------------------------------------------------------- /Ayushi/Task_2/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /Ayushi/Task_2/src/Char.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.js"; 3 | 4 | const Char = (props) => { 5 | const styles = { 6 | backgroundColor: "rgb(95, 54, 190)", 7 | color: "white", 8 | display: "inline-block", 9 | padding: "16px", 10 | margin: "16px", 11 | border: "1px solid black", 12 | textAlign: "center", 13 | }; 14 | return ( 15 |
16 | {props.character} 17 |
18 | ); 19 | }; 20 | export default Char; 21 | -------------------------------------------------------------------------------- /Ayushi/Task_2/src/Validation.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.js"; 3 | 4 | const Validation = (props) => { 5 | let validationmsg =

Text too Short!

; 6 | 7 | if (props.inputlength >= 5) { 8 | validationmsg =

Text long enough!

; 9 | } 10 | 11 | return
{validationmsg}
; 12 | }; 13 | 14 | export default Validation; 15 | -------------------------------------------------------------------------------- /Ayushi/Task_2/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Ayushi/Task_2/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /Ayushi/Task_2/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Ayushi/Task_2/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /Isha/.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /Isha/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "PORT=3006 && react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Isha/task1/.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /Isha/task1/README.md: -------------------------------------------------------------------------------- 1 | #REACT -------------------------------------------------------------------------------- /Isha/task1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "PORT=3006 && react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Isha/task1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Isha/task1/public/favicon.ico -------------------------------------------------------------------------------- /Isha/task1/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Isha/task1/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Isha/task1/public/logo192.png -------------------------------------------------------------------------------- /Isha/task1/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Isha/task1/public/logo512.png -------------------------------------------------------------------------------- /Isha/task1/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Isha/task1/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Isha/task1/src/App.css: -------------------------------------------------------------------------------- 1 | App { 2 | text-align: center; 3 | } -------------------------------------------------------------------------------- /Isha/task1/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import Person from "./Person"; 4 | 5 | class App extends React.Component{ 6 | render(){ 7 | return( 8 |
9 | 10 |
11 | ); 12 | } 13 | 14 | } 15 | export default App; 16 | -------------------------------------------------------------------------------- /Isha/task1/src/Person.css: -------------------------------------------------------------------------------- 1 | .Person { 2 | border: solid 1px black; 3 | padding: 20px; 4 | height: 100px; 5 | width: 250px; 6 | } 7 | -------------------------------------------------------------------------------- /Isha/task1/src/Person.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./Person.css"; 3 | 4 | class Person extends Component { 5 | render() { 6 | return ( 7 |
8 |

{this.props.name}

9 |

{this.props.about}

10 |
11 | ); 12 | } 13 | } 14 | 15 | export default Person; 16 | -------------------------------------------------------------------------------- /Isha/task1/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | 5 | ReactDOM.render(, document.getElementById("root")); 6 | -------------------------------------------------------------------------------- /Kunal/Task-1/.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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Kunal/Task-1/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `yarn start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /Kunal/Task-1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "task1", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Kunal/Task-1/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Kunal/Task-1/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | -------------------------------------------------------------------------------- /Kunal/Task-1/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import Person from "./Person"; 4 | 5 | class App extends React.Component{ 6 | render(){ 7 | return( 8 |
9 | 10 |
11 | ); 12 | } 13 | 14 | } 15 | export default App; -------------------------------------------------------------------------------- /Kunal/Task-1/src/Person.css: -------------------------------------------------------------------------------- 1 | .Person { 2 | border: dashed 2px darkviolet; 3 | padding: 30px; 4 | height: 210px; 5 | width: 250px; 6 | color: red; 7 | } -------------------------------------------------------------------------------- /Kunal/Task-1/src/Person.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Person.css'; 3 | 4 | // class Person extends Component { 5 | // render() { 6 | // return ( 7 | //
8 | //

Hi , i'm { this.props.name } and i'm {this.props.age } years old.

9 | //
10 | // ) 11 | // } 12 | // } 13 | const Person = (props) => { 14 | return ( 15 |
16 |

Hi , i'm { props.name } and i'm { props.age } years old.

17 |
18 | ) 19 | } 20 | 21 | export default Person; -------------------------------------------------------------------------------- /Kunal/Task-1/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Kunal/Task-1/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /Kunal/Task-2/.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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Kunal/Task-2/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `yarn start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /Kunal/Task-2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-task", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Kunal/Task-2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Kunal/Task-2/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } -------------------------------------------------------------------------------- /Kunal/Task-2/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Validation from './Validation/Validation'; 3 | import Char from './Char/Char'; 4 | import './App.css'; 5 | 6 | class App extends Component { 7 | state = { 8 | inputValue: '' 9 | }; 10 | 11 | inputChangeHandler = (event) => { 12 | this.setState( { 13 | inputValue: event.target.value 14 | }) 15 | } 16 | deleteHandler = (index) => { 17 | const text = this.state.inputValue.split('') 18 | text.splice(index, 1) 19 | const updatedText = text.join(''); 20 | this.setState( { 21 | inputValue: updatedText 22 | }) 23 | } 24 | 25 | 26 | render() { 27 | let charList = this.state.inputValue.split('').map((ch, index) => { 28 | return ( 29 | this.deleteHandler(index)} character={ch} key={index}/> 30 | ) 31 | }); 32 | return ( 33 |
34 |

React App

35 | 36 | 37 | { charList } 38 |
39 | ) 40 | } 41 | } 42 | 43 | export default App; 44 | -------------------------------------------------------------------------------- /Kunal/Task-2/src/Char/Char.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Char = (props) => { 4 | const styles = { 5 | backgroundColor:'purple', 6 | display: 'inline-block', 7 | border: '4px dashed darkviolet', 8 | color: 'white', 9 | padding: '16px', 10 | margin: '20px' 11 | } 12 | return ( 13 |
14 | { props.character } 15 |
16 | ) 17 | } 18 | 19 | export default Char; -------------------------------------------------------------------------------- /Kunal/Task-2/src/Validation/Validation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Validation = (props) => { 4 | let validationMessage; 5 | if(props.inputLength >= 5) { 6 | validationMessage = (

Text long enough!

) 7 | } 8 | else { 9 | validationMessage = (

Text too short!

) 10 | } 11 | return ( 12 | { validationMessage } 13 | ) 14 | } 15 | 16 | export default Validation; -------------------------------------------------------------------------------- /Kunal/Task-2/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Kunal/Task-2/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById('root') 9 | ); 10 | 11 | -------------------------------------------------------------------------------- /Lecture1/main.js: -------------------------------------------------------------------------------- 1 | // Topic 1 : let and const 2 | 3 | // Before ES6 4 | var name = 'Satvik'; 5 | 6 | // After ES6 7 | let name1 = 'Satvik'; 8 | const name2 = 'Satvik'; 9 | 10 | // var VS let VS const 11 | 12 | // let is block scoped. What that means is that a variable created with the let keyword is available inside the “block” that it was created in as well as any nested blocks. When I say “block”, I mean anything surrounded by a curly brace {} like in a for loop or an if statement. 13 | 14 | // ReferenceError when accessing a variable before it's declared 15 | 16 | 17 | 18 | // var is function scoped 19 | // undefined when accessing a variable before it's declared 20 | 21 | 22 | // let can be re-assigned, but variables declared with const can’t be. 23 | 24 | 25 | 26 | // Topic 2 : Fat Arrow Functions 27 | 28 | function getName(name) { 29 | console.log(name); 30 | } 31 | 32 | const getOtherName1 = () => { 33 | return 'some value'; 34 | } 35 | 36 | const getOtherName2 = name => { 37 | return console.log(name); 38 | } 39 | 40 | const getOtherName3 = name => console.log(name); 41 | 42 | const getOtherName4 = (name, age) => console.log(name, age); 43 | 44 | 45 | 46 | // Topic 3 : Hoisting 47 | 48 | // Case 1: 49 | x = 5; 50 | console.log(x); 51 | var x; 52 | 53 | // Case 2: 54 | var y; 55 | y = 5; 56 | console.log(y); 57 | 58 | // Observe output in above two cases 59 | 60 | // Key points to remember : 61 | // Variables and constants declared with let or const are not hoisted! 62 | // JavaScript only hoists declarations, not initializations. 63 | 64 | 65 | 66 | // Topic 4 : Object and Template Literals 67 | 68 | const objectName = { 69 | name: 'satvik', 70 | age: 'age' 71 | }; 72 | 73 | const tmpLit = `My name is ${objectName.name} and my age is ${objectName.age}`; 74 | 75 | 76 | 77 | // Topic 5 : Destructuring arrays and objects 78 | 79 | const arr = [10, 20]; 80 | [b, a] = arr; 81 | console.log(b, a); 82 | 83 | const objectName1 = { 84 | key1: 'val1', 85 | key2: 'val2' 86 | } 87 | 88 | const { key2, key1 } = objectName1; 89 | console.log(key2, key1); 90 | 91 | 92 | 93 | // Topic 6 : Rest and Spread Operator 94 | 95 | // Rest Operator 96 | var myName = ["Satvik", "Saransh", "Muskan"]; 97 | const [firstName, ...familyName] = myName; 98 | console.log(firstName); // Satvik ; 99 | console.log(familyName); // [ "Saransh" , "Muskan"] ; 100 | 101 | // Spread Operator 102 | var myName = ["Satvik", "Saransh", "Muskan"]; 103 | var newArr = [...myName, "FrontEnd", 24]; 104 | console.log(newArr); // ["Satvik" , "Saransh" , "Muskan" , "FrontEnd" , 24 ] ; 105 | 106 | 107 | 108 | // Topic 7 : Classes 109 | class Person { 110 | constructor(firstName, lastName) { 111 | this.firstName = firstName; 112 | this.lastName = lastName; 113 | } 114 | } 115 | 116 | // Instantiate 117 | const person = new Person('Satvik', 'Chachra'); 118 | -------------------------------------------------------------------------------- /Lecture2/.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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Lecture2/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /Lecture2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Lecture2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Lecture2/public/favicon.ico -------------------------------------------------------------------------------- /Lecture2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Lecture2/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Lecture2/public/logo192.png -------------------------------------------------------------------------------- /Lecture2/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Lecture2/public/logo512.png -------------------------------------------------------------------------------- /Lecture2/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Lecture2/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Lecture2/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | -------------------------------------------------------------------------------- /Lecture2/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Person from './Person/Person'; 3 | import './App.css'; 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 | 10 |
11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /Lecture2/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /Lecture2/src/Person/Person.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Person extends React.Component { 4 | render() { 5 | return ( 6 |
7 |

{this.props.name}

8 |

My age is : {this.props.age}

9 |
10 | ); 11 | } 12 | } 13 | 14 | export default Person; -------------------------------------------------------------------------------- /Lecture2/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Lecture2/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /Lecture2/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Lecture2/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' }, 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready 134 | .then(registration => { 135 | registration.unregister(); 136 | }) 137 | .catch(error => { 138 | console.error(error.message); 139 | }); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /Lecture2/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /Lecture3/.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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Lecture3/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /Lecture3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "radium": "^0.26.0", 10 | "react": "^16.13.1", 11 | "react-dom": "^16.13.1", 12 | "react-scripts": "3.4.1" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /Lecture3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Lecture3/public/favicon.ico -------------------------------------------------------------------------------- /Lecture3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Lecture3/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Lecture3/public/logo192.png -------------------------------------------------------------------------------- /Lecture3/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Lecture3/public/logo512.png -------------------------------------------------------------------------------- /Lecture3/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Lecture3/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Lecture3/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | -------------------------------------------------------------------------------- /Lecture3/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Person from './Person/Person'; 3 | import './App.css'; 4 | 5 | class App extends React.Component { 6 | 7 | state = { 8 | person : [ 9 | {name: 'Saransh', age: 19}, 10 | {name: 'Satvik', age: 20}, 11 | ], 12 | showPerson: true 13 | } 14 | 15 | switchNameHandler = () => { 16 | // Do not directly manipulate state 17 | // this.state.person[0].name = 'Saransh Dawra'; 18 | this.setState({ 19 | person : [ 20 | {name: 'Saransh Dawra', age: 19}, 21 | {name: 'Satvik Chachra', age: 20}, 22 | ], 23 | showPerson: !this.state.showPerson // true -> false false -> true 24 | }) 25 | } 26 | 27 | ageChangeHandler = () => { 28 | this.setState({ 29 | person : [ 30 | {name: 'Saransh Dawra', age: 22}, 31 | {name: 'Satvik Chachra', age: 22}, 32 | ], 33 | }) 34 | } 35 | 36 | render() { 37 | 38 | let persons = null; 39 | if(this.state.showPerson) { 40 | persons = ( 41 |
42 | 43 | 44 |
45 | ); 46 | } 47 | 48 | return ( 49 |
50 | 51 | {persons} 52 |
53 | ); 54 | } 55 | } 56 | 57 | export default App; 58 | -------------------------------------------------------------------------------- /Lecture3/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /Lecture3/src/Person/Person.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // import Radium from 'radium'; 3 | 4 | // npm install radium 5 | class Person extends React.Component { 6 | 7 | 8 | render() { 9 | const style = { 10 | backgroundColor: 'red', 11 | margin: '20px', 12 | border: '1px solid black', 13 | padding: '20px', 14 | width: '200px', 15 | } 16 | 17 | return ( 18 |
19 |

{this.props.name}

20 |

My age is : {this.props.age}

21 |
22 | ); 23 | } 24 | } 25 | 26 | export default Person; -------------------------------------------------------------------------------- /Lecture3/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Lecture3/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /Lecture3/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Lecture3/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' }, 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready 134 | .then(registration => { 135 | registration.unregister(); 136 | }) 137 | .catch(error => { 138 | console.error(error.message); 139 | }); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /Lecture3/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /Lecture4/lec4pt1/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /Lecture4/lec4pt1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lec3", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Lecture4/lec4pt1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Lecture4/lec4pt1/public/favicon.ico -------------------------------------------------------------------------------- /Lecture4/lec4pt1/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Lecture4/lec4pt1/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Lecture4/lec4pt1/public/logo192.png -------------------------------------------------------------------------------- /Lecture4/lec4pt1/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Lecture4/lec4pt1/public/logo512.png -------------------------------------------------------------------------------- /Lecture4/lec4pt1/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Lecture4/lec4pt1/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Lecture4/lec4pt1/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Lecture4/lec4pt1/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component, useState } from 'react'; 2 | import './App.css'; 3 | import Person from './Person/Person'; 4 | 5 | 6 | // STATE MANAGEMENT IN FUNCTION BASED COMPONENTS 7 | 8 | const App = () => { 9 | 10 | const [personsState, setPersonsState] = useState({ 11 | persons: [ 12 | { name: 'Satvik', age: 19 }, 13 | { name: 'Saransh', age: 20 }, 14 | ], 15 | otherKey: 'random value' 16 | }); 17 | 18 | const switchNameHandler = (newName) => { 19 | 20 | setPersonsState({ 21 | persons: [ 22 | { name: newName, age: 16 }, 23 | { name: 'Rajat', age: 17 } 24 | ] 25 | }); 26 | 27 | } 28 | 29 | return ( 30 |
31 |

React App

32 |

Look at me I am a class component!

33 | 34 | 39 | 43 | 44 | {personsState.otherKey} 45 |
46 | 47 | ) 48 | 49 | 50 | // 0 th index -> currentState 51 | // 1st index -> method() -> manage state 52 | // const [a,b] = arr; -> Destructuring 53 | } 54 | 55 | export default App; 56 | 57 | 58 | // CLASS BASED COMPONENT WE WORKED ON 59 | 60 | // class App extends Component { 61 | 62 | // state = { 63 | // persons: [ 64 | // { name: 'Satvik', age: 19 }, 65 | // { name: 'Saransh', age: 20 }, 66 | // ], 67 | // otherKey: 'random value' 68 | 69 | // }; 70 | 71 | 72 | 73 | // switchNameHandler = () => { 74 | 75 | // this.setState({ 76 | // persons: [ 77 | // { name: 'Ansh', age: 16 }, 78 | // { name: 'Rajat', age: 17 } 79 | // ] 80 | // }); 81 | 82 | // } 83 | 84 | // render() { 85 | 86 | // return ( 87 | //
88 | //

React App

89 | //

Look at me I am a class component!

90 | // 91 | // 95 | // 99 | 100 | // {this.state.otherKey} 101 | //
102 | // ); 103 | 104 | // } 105 | // } 106 | 107 | // export default App; 108 | 109 | -------------------------------------------------------------------------------- /Lecture4/lec4pt1/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /Lecture4/lec4pt1/src/Person/Person.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const person = (props) => { 4 | return ( 5 |
6 |

Hi! {props.name}. You are {props.age} years old.

7 |
8 | 9 | ); 10 | } 11 | 12 | export default person; -------------------------------------------------------------------------------- /Lecture4/lec4pt1/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Lecture4/lec4pt1/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /Lecture4/lec4pt1/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Lecture4/lec4pt1/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /Lecture4/lec4pt2/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /Lecture4/lec4pt2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lec3", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Lecture4/lec4pt2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Lecture4/lec4pt2/public/favicon.ico -------------------------------------------------------------------------------- /Lecture4/lec4pt2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Lecture4/lec4pt2/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Lecture4/lec4pt2/public/logo192.png -------------------------------------------------------------------------------- /Lecture4/lec4pt2/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Lecture4/lec4pt2/public/logo512.png -------------------------------------------------------------------------------- /Lecture4/lec4pt2/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Lecture4/lec4pt2/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Lecture4/lec4pt2/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Lecture4/lec4pt2/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Person from './Person/Person'; 3 | import './App.css'; 4 | 5 | // Rendering Lists 6 | 7 | class App extends React.Component { 8 | 9 | state = { 10 | persons: [ 11 | { name: 'Saransh', age: 19 }, 12 | { name: 'Satvik', age: 20 }, 13 | ], 14 | showPerson: true 15 | } 16 | 17 | switchNameHandler = () => { 18 | // Do not directly manipulate state 19 | // this.state.person[0].name = 'Saransh Dawra'; 20 | this.setState({ 21 | persons: [ 22 | { name: 'Saransh Dawra', age: 19 }, 23 | { name: 'Satvik Chachra', age: 20 }, 24 | ], 25 | showPerson: !this.state.showPerson // true -> false false -> true 26 | }) 27 | } 28 | 29 | 30 | 31 | ageChangeHandler = () => { 32 | this.setState({ 33 | persons: [ 34 | { name: 'Saransh Dawra', age: 22 }, 35 | { name: 'Satvik Chachra', age: 22 }, 36 | ], 37 | }) 38 | } 39 | 40 | // Rendering Lists making it dynamic, observe the return statement 41 | 42 | render() { 43 | 44 | let persons = null; 45 | if (this.state.showPerson) { 46 | persons = ( 47 |
48 | {this.state.persons.map((person) => { 49 | return 50 | })} 51 |
52 | ); 53 | } 54 | 55 | return ( 56 |
57 | 58 | {persons} 59 |
60 | ); 61 | } 62 | } 63 | 64 | export default App; 65 | 66 | // Code replaced from return statement 67 | 68 | {/* 69 | */} 70 | -------------------------------------------------------------------------------- /Lecture4/lec4pt2/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /Lecture4/lec4pt2/src/Person/Person.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // import Radium from 'radium'; 3 | 4 | // npm install radium 5 | class Person extends React.Component { 6 | 7 | 8 | render() { 9 | const style = { 10 | backgroundColor: 'red', 11 | margin: '20px', 12 | border: '1px solid black', 13 | padding: '20px', 14 | width: '200px', 15 | } 16 | 17 | return ( 18 |
19 |

{this.props.name}

20 |

My age is : {this.props.age}

21 |
22 | ); 23 | } 24 | } 25 | 26 | export default Person; -------------------------------------------------------------------------------- /Lecture4/lec4pt2/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Lecture4/lec4pt2/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /Lecture4/lec4pt2/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Lecture4/lec4pt2/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /Lecture5/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /Lecture5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "satvik-task", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Lecture5/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Lecture5/public/favicon.ico -------------------------------------------------------------------------------- /Lecture5/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Lecture5/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Lecture5/public/logo192.png -------------------------------------------------------------------------------- /Lecture5/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Lecture5/public/logo512.png -------------------------------------------------------------------------------- /Lecture5/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Lecture5/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Lecture5/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Lecture5/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Validation from './Validation/Validation'; 4 | import Char from './Char/Char'; 5 | 6 | // STATE MANAGEMENT 7 | 8 | class App extends Component{ 9 | 10 | state = { 11 | inputValue : '' 12 | }; 13 | 14 | inputChangedHandler = (event) =>{ 15 | this.setState({ 16 | inputValue: event.target.value 17 | }) 18 | } 19 | 20 | deleteEventHandler = (index) =>{ 21 | 22 | const text = this.state.inputValue.split(''); 23 | 24 | text.splice(index,1); 25 | 26 | const updatedText = text.join(''); 27 | 28 | this.setState({ 29 | inputValue: updatedText 30 | }); 31 | 32 | 33 | } 34 | 35 | render(){ 36 | 37 | // RENDERING LIST 38 | 39 | let charList = this.state.inputValue.split('').map((ch,index)=>{ 40 | return ( 41 | this.deleteEventHandler(index)} character={ch} key={index} /> 42 | ) 43 | }); 44 | 45 | 46 | return ( 47 |
48 |

React App

49 | 50 |

51 | 52 | {charList} 53 |
54 | ) 55 | } 56 | } 57 | 58 | export default App; -------------------------------------------------------------------------------- /Lecture5/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /Lecture5/src/Char/Char.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // STYLING CONCEPT 4 | // PASSING METHODS AS REFERENCES BETWEEN 2 COMPONENTS 5 | 6 | const Char = (props) => { 7 | const styles = { 8 | display : 'inline-block', 9 | padding: '16px', 10 | margin: '16px', 11 | border: '1px solid black', 12 | textAlign: 'center', 13 | } 14 | return( 15 |
16 | {props.character} 17 |
18 | ) 19 | } 20 | 21 | export default Char; -------------------------------------------------------------------------------- /Lecture5/src/Validation/Validation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // CONDITIONAL RENDERING 4 | 5 | const Validation = (props) => { 6 | let validationMessage = (

Text too short!

); 7 | 8 | if(props.inputLength >= 5){ 9 | validationMessage = (

Text long enough!

); 10 | } 11 | 12 | return( 13 |
14 | {validationMessage} 15 |
16 | ) 17 | } 18 | 19 | export default Validation; -------------------------------------------------------------------------------- /Lecture5/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Lecture5/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /Lecture5/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Lecture5/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /Project Screenshots/todo-saransh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Project Screenshots/todo-saransh.jpg -------------------------------------------------------------------------------- /Project Screenshots/todo-satvik.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Project Screenshots/todo-satvik.jpg -------------------------------------------------------------------------------- /Project Screenshots/todo-tanishq.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Project Screenshots/todo-tanishq.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React 2 | 3 | This Repository is made under Hack For Valley oraganised by Developer Students Club(DSC-CIET).This event was organised virtually on Google Meet under the able mentorship of DSC-CIET Web Lead Mr. Saransh Dawra and Core Team Member Mr. Satvik Chachra. This was a one week virtual workshop in which React was taught from scratch. At the end of workshop each student made a mini project a To-Do Application. The corresponding screenshots of mini projects are added successfully in this repository. This was indeed a great learning experience. 4 | 5 | # Mentors 6 | 7 | # [Saransh Dawra](https://github.com/SaranshDawra)               [Satvik Chachra](https://github.com/satvikchachra) 8 | 9 | portfolio_view      10 | portfolio_view 11 | 12 | # Contributors 13 | 14 | ## [Saurabh Sahu](https://github.com/ssbeast)                 [Tanishq Singla](https://github.com/TanishqSingla)                 [Sahildeep Singh](https://github.com/sahilcodes) 15 | 16 | Saurabh Image      Tanishq Image      Sahildeep Image       17 | 18 | ## [Ayushi Sharma](https://github.com/ayushi0014)                 [Isha Singh](https://github.com/Ishasingh04)                 [Charu Sachdeva](https://github.com/Charu271) 19 | 20 | Ayushi Image      Isha Image      Charu Image       21 | 22 | ## [Anshuman Parmar](https://github.com/anshuman725)                 [Kunal Kandhari](https://github.com/kunalkandhari123)                  23 | 24 | Anshuman Image      Kunal Image       25 | -------------------------------------------------------------------------------- /Tanishq/my-app-2/.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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Tanishq/my-app-2/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `yarn start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /Tanishq/my-app-2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app-2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Tanishq/my-app-2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | React App 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /Tanishq/my-app-2/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/Tanishq/my-app-2/src/App.css -------------------------------------------------------------------------------- /Tanishq/my-app-2/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | 4 | function App() { 5 | return
; 6 | } 7 | 8 | export default App; 9 | -------------------------------------------------------------------------------- /Tanishq/my-app-2/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /Tanishq/my-app/.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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Tanishq/my-app/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `yarn start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /Tanishq/my-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Tanishq/my-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | React App 13 | 14 | 15 | 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /Tanishq/my-app/src/components/App.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: sans-serif; 3 | font-family: 16px; 4 | } 5 | -------------------------------------------------------------------------------- /Tanishq/my-app/src/components/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import Person from "./Person"; 4 | 5 | class App extends React.Component { 6 | state = { 7 | person: [ 8 | { 9 | name: "Tanishq", 10 | age: "18", 11 | }, 12 | ], 13 | showPerson: false, 14 | }; 15 | 16 | show = () => { 17 | this.setState({ 18 | showPerson: !this.state.showPerson, 19 | }); 20 | }; 21 | 22 | render() { 23 | return ( 24 |
25 | 26 | {this.state.showPerson && ( 27 |
28 | 29 |
30 | )} 31 |
32 | ); 33 | 34 | // if (this.state.showPerson) { 35 | // person = ( 36 | //
37 | // 38 | //
39 | // ); 40 | // } 41 | // return ( 42 | //
43 | // 44 | // {person} 45 | //
46 | // ); 47 | } 48 | } 49 | 50 | export default App; 51 | -------------------------------------------------------------------------------- /Tanishq/my-app/src/components/Person.css: -------------------------------------------------------------------------------- 1 | .Person { 2 | border: solid 1px black; 3 | padding: 20px; 4 | height: 100px; 5 | width: 250px; 6 | margin: 10px; 7 | } 8 | -------------------------------------------------------------------------------- /Tanishq/my-app/src/components/Person.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./Person.css"; 3 | 4 | class Person extends Component { 5 | render() { 6 | return ( 7 |
8 |

Name: {this.props.name}

9 |

Age: {this.props.age}

10 |
11 | ); 12 | } 13 | } 14 | 15 | export default Person; 16 | -------------------------------------------------------------------------------- /Tanishq/my-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | 5 | ReactDOM.render(, document.getElementById("root")); 6 | -------------------------------------------------------------------------------- /Tanishq/todolist/MAIN.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `yarn start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /Tanishq/todolist/README.md: -------------------------------------------------------------------------------- 1 | # 2 | 3 | The design inspiration for this project was taken from App Brewery todo app 4 | -------------------------------------------------------------------------------- /Tanishq/todolist/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todolist", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Tanishq/todolist/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Tanishq/todolist/public/style/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ffeaa7; 3 | min-height: 70vh; 4 | padding: 1rem; 5 | box-sizing: border-box; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | color: hsl(198, 1%, 29%); 10 | font-family: "Architects Daughter", cursive; 11 | text-align: center; 12 | font-size: 130%; 13 | } 14 | 15 | .container { 16 | width: 100%; 17 | height: auto; 18 | min-height: 500px; 19 | max-width: 500px; 20 | min-width: 250px; 21 | background: #f1f5f8; 22 | background-image: radial-gradient(#bfc0c1 7.2%, transparent 0); 23 | background-size: 25px 25px; 24 | border-radius: 20px; 25 | box-shadow: 4px 3px 7px 2px #00000040; 26 | padding: 1rem; 27 | box-sizing: border-box; 28 | } 29 | .heading { 30 | display: flex; 31 | align-items: center; 32 | justify-content: center; 33 | margin-bottom: 1rem; 34 | } 35 | .heading h1 { 36 | transform: rotate(2deg); 37 | padding: 0.2rem 1.2rem; 38 | border-radius: 20% 5% 20% 5%/5% 20% 25% 20%; 39 | background-color: #fdcb6e; 40 | font-size: 1.5rem; 41 | } 42 | 43 | .form input { 44 | box-sizing: border-box; 45 | background-color: transparent; 46 | padding: 0.7rem; 47 | border-bottom-right-radius: 15px 3px; 48 | border-bottom-left-radius: 3px 15px; 49 | border: solid 3px transparent; 50 | border-bottom: dashed 3px #fdcb6e; 51 | font-family: "Architects Daughter", cursive; 52 | font-size: 1rem; 53 | color: hsla(260, 2%, 25%, 0.7); 54 | width: 70%; 55 | margin-bottom: 20px; 56 | } 57 | .form input:focus { 58 | outline: none; 59 | } 60 | 61 | button { 62 | padding: 0; 63 | border: none; 64 | font-family: "Architects Daughter", cursive; 65 | text-decoration: none; 66 | padding-bottom: 3px; 67 | border-radius: 5px; 68 | background-color: #ffeaa7; 69 | cursor: pointer; 70 | } 71 | button:focus { 72 | outline: none; 73 | } 74 | 75 | button span { 76 | background: #f1f5f8; 77 | display: block; 78 | padding: 0.5rem 1rem; 79 | border-radius: 5px; 80 | border: 2px solid hsl(198, 1%, 29%); 81 | } 82 | 83 | li { 84 | text-align: left; 85 | position: relative; 86 | padding: 0.5rem; 87 | } 88 | -------------------------------------------------------------------------------- /Tanishq/todolist/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import TodoItem from "./TodoItem"; 3 | import InputForm from "./InputForm"; 4 | 5 | function App() { 6 | const [items, setItems] = useState([]); 7 | 8 | const addItem = (inputText) => { 9 | setItems((prevItems) => [...prevItems, inputText]); 10 | }; 11 | 12 | const deleteItem = (id) => { 13 | setItems((prevItems) => { 14 | return prevItems.filter((item, index) => index !== id); 15 | }); 16 | }; 17 | 18 | return ( 19 |
20 |
21 |

To-Do List

22 |
23 |
24 | 25 |
    26 | {items.map((todoItem, index) => ( 27 | 33 | ))} 34 |
35 |
36 |
37 | ); 38 | } 39 | 40 | export default App; 41 | -------------------------------------------------------------------------------- /Tanishq/todolist/src/components/InputForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | const InputForm = (props) => { 4 | const [inputText, setInputValue] = useState(""); 5 | 6 | const handleChange = (event) => { 7 | const value = event.target.value; 8 | setInputValue(value); 9 | }; 10 | return ( 11 |
12 | 13 | 21 |
22 | ); 23 | }; 24 | 25 | export default InputForm; 26 | -------------------------------------------------------------------------------- /Tanishq/todolist/src/components/TodoItem.css: -------------------------------------------------------------------------------- 1 | .fa:hover { 2 | color: red; 3 | cursor: pointer; 4 | } 5 | -------------------------------------------------------------------------------- /Tanishq/todolist/src/components/TodoItem.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "./TodoItem.css"; 3 | 4 | const TodoItem = (props) => { 5 | const [isDone, setIsDone] = useState(false); 6 | 7 | const handleClick = () => { 8 | setIsDone((prevBool) => !prevBool); 9 | }; 10 | 11 | return ( 12 |
13 |
  • 14 | {props.item}   15 | props.deleteItem(props.id)}> 16 | 17 | 18 |
    • 19 |
    20 | ); 21 | }; 22 | 23 | export default TodoItem; 24 | -------------------------------------------------------------------------------- /Tanishq/todolist/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | 5 | ReactDOM.render(, document.getElementById("root")); 6 | -------------------------------------------------------------------------------- /charu/.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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /charu/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `yarn start` 8 | 9 | Runs the app in the development mode.
    10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
    13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
    18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
    23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
    26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /charu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myrapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /charu/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/charu/public/favicon.ico -------------------------------------------------------------------------------- /charu/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /charu/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/charu/public/logo192.png -------------------------------------------------------------------------------- /charu/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/charu/public/logo512.png -------------------------------------------------------------------------------- /charu/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /charu/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /charu/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/charu/src/App.css -------------------------------------------------------------------------------- /charu/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Person from './Person/Person'; 3 | import './App.css'; 4 | 5 | 6 | class App extends React.Component{ 7 | render (){return( 8 |
    9 | 10 | 11 |
    12 | 13 | );} 14 | } 15 | 16 | export default App; -------------------------------------------------------------------------------- /charu/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /charu/src/Person/Person.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | function Person(props) 3 | { 4 | return( 5 |
    6 |

    {props.name}

    7 |

    My age is {props.age} years.

    8 |
    9 | ); 10 | } 11 | export default Person; -------------------------------------------------------------------------------- /charu/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /charu/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /charu/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /charu/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /charuSachdeva/.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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /charuSachdeva/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `yarn start` 8 | 9 | Runs the app in the development mode.
    10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
    13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
    18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
    23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
    26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /charuSachdeva/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myrapp2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /charuSachdeva/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/charuSachdeva/public/favicon.ico -------------------------------------------------------------------------------- /charuSachdeva/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /charuSachdeva/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/charuSachdeva/public/logo192.png -------------------------------------------------------------------------------- /charuSachdeva/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/charuSachdeva/public/logo512.png -------------------------------------------------------------------------------- /charuSachdeva/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /charuSachdeva/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /charuSachdeva/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /charuSachdeva/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Validation from './Validation/Validation'; 3 | import Char from './Char/Char'; 4 | import './App.css' 5 | class App extends React.Component{ 6 | state={ 7 | inputString:'' 8 | }; 9 | 10 | inputChangeHandler=(event)=>{ 11 | this.setState({ 12 | inputString:event.target.value 13 | }) 14 | } 15 | deletionHandler=(index)=>{ 16 | const Text=this.state.inputString.split(''); 17 | Text.splice(index,1); 18 | const updatedText=Text.join(''); 19 | this.setState({ 20 | inputString:updatedText 21 | }); 22 | } 23 | render(){ 24 | 25 | let charlist=this.state.inputString.split('').map((ch,index)=>{ 26 | return( 27 | this.deletionHandler(index)} character={ch} key={index}/> 28 | ) 29 | } 30 | 31 | ); 32 | return( 33 |
    34 |

    React App

    35 | 36 | 37 | {charlist} 38 |
    39 | 40 | ) 41 | } 42 | } 43 | export default App; 44 | -------------------------------------------------------------------------------- /charuSachdeva/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /charuSachdeva/src/Char/Char.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | const Char=(props)=>{ 3 | const styles={ 4 | display:'inline-block', 5 | padding:'20px', 6 | margin:'15px', 7 | border:'1px solid black', 8 | background:"lightpink", 9 | } 10 | return( 11 |
    12 | {props.character} 13 |
    14 | ) 15 | } 16 | export default Char; -------------------------------------------------------------------------------- /charuSachdeva/src/Validation/Validation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | class Validation extends React.Component{ 3 | 4 | 5 | render(){ 6 | let message=(

    Too short!

    ); 7 | if(this.props.inputLength>=5) 8 | message=(

    Long enough!

    ) 9 | return( 10 |
    {message}
    11 | 12 | ); 13 | } 14 | } 15 | export default Validation; -------------------------------------------------------------------------------- /charuSachdeva/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /charuSachdeva/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /charuSachdeva/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /charuSachdeva/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /sahilcodes/my-app/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `yarn start` 8 | 9 | Runs the app in the development mode.
    10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
    13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
    18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
    23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
    26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /sahilcodes/my-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /sahilcodes/my-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | React App 13 | 14 | 15 | 16 |
    17 | 18 | 19 | -------------------------------------------------------------------------------- /sahilcodes/my-app/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Person from './Person/Person'; 3 | import './App.css'; 4 | 5 | class App extends React.Component { 6 | render() { 7 | return ( 8 |
    9 | 10 |
    11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /sahilcodes/my-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /sahilcodes/my-app/src/Person/Person.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | margin: 0; 6 | background-color: #161616; 7 | } 8 | 9 | .content { 10 | margin-top: 60px; 11 | padding: 0 30px; 12 | } 13 | 14 | .box { 15 | position: relative; 16 | border-radius: 4px; 17 | overflow: hidden; 18 | } 19 | 20 | .box h2, .box p { 21 | position: absolute; 22 | color: #fff; 23 | z-index: 2; 24 | width: 100%; 25 | transition: opacity 0.2s, transform 0.3s; 26 | } 27 | .box h2 { 28 | font-weight: 500; 29 | font-size: 22px; 30 | margin-bottom: 0; 31 | letter-spacing: 1px; 32 | } 33 | 34 | .box img:after { 35 | content: ''; 36 | position: absolute; 37 | background-color: rgba(0, 0, 0, 0.6); 38 | width: 100%; 39 | height: 100%; 40 | top: 0; 41 | left: 0; 42 | opacity: 0; 43 | } 44 | 45 | .box-content h2 { 46 | top: 50%; 47 | transform: translate3d(0, 60px, 0); 48 | text-align: center; 49 | } 50 | 51 | .box-content p { 52 | opacity: 0; 53 | bottom: 0; 54 | transform: translate3d(0, -10px, 0); 55 | font-size: 14px; 56 | letter-spacing: 1px; 57 | text-align: center; 58 | } 59 | 60 | .box-content:before { 61 | content: ''; 62 | position: absolute; 63 | width: 100%; 64 | height: 100%; 65 | background: linear-gradient(to bottom, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%); 66 | z-index: 2; 67 | bottom: -100%; 68 | left: 0; 69 | } 70 | 71 | .box-content:hover:before { 72 | bottom: 0; 73 | } 74 | 75 | .box-content:hover h2 { 76 | bottom: 40px; 77 | transform: translate3d(0, 20px, 0); 78 | } 79 | 80 | .box-content:hover p { 81 | opacity: 1; 82 | transform: translate3d(0, -30px, 0); 83 | } 84 | -------------------------------------------------------------------------------- /sahilcodes/my-app/src/Person/Person.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import "./Person.css"; 3 | 4 | function Person(props) { 5 | return( 6 |
    7 |
    8 | avatar 9 |

    {props.name}

    10 |

    Bio: {props.bio}

    11 |
    12 |
    13 | ); 14 | } 15 | 16 | export default Person; -------------------------------------------------------------------------------- /sahilcodes/my-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /sahilcodes/my-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | import * as serviceWorker from './serviceWorker'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById('root') 13 | ); 14 | 15 | // If you want your app to work offline and load faster, you can change 16 | // unregister() to register() below. Note this comes with some pitfalls. 17 | // Learn more about service workers: https://bit.ly/CRA-PWA 18 | serviceWorker.unregister(); 19 | -------------------------------------------------------------------------------- /sahilcodes/my-app/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /ssbeast/myapp_task1/.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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /ssbeast/myapp_task1/README.md: -------------------------------------------------------------------------------- 1 | # React app Task_1 2 |

    3 | An app created using React. 4 |

    5 |

    6 | MADE WITH :heart: BY SSBEAST AND ACER ASPIRE! 7 |

    8 | -------------------------------------------------------------------------------- /ssbeast/myapp_task1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /ssbeast/myapp_task1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/ssbeast/myapp_task1/public/favicon.ico -------------------------------------------------------------------------------- /ssbeast/myapp_task1/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /ssbeast/myapp_task1/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/ssbeast/myapp_task1/public/logo192.png -------------------------------------------------------------------------------- /ssbeast/myapp_task1/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmrwor/React/a7372b0b1b32c5bd4ff691b97bec9e8447ec7ae9/ssbeast/myapp_task1/public/logo512.png -------------------------------------------------------------------------------- /ssbeast/myapp_task1/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /ssbeast/myapp_task1/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /ssbeast/myapp_task1/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /ssbeast/myapp_task1/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import Person from "./Person"; 4 | 5 | class App extends React.Component { 6 | render() { 7 | return ( < 8 | div className = "App" > 9 | < 10 | Person name = "ssbeast" 11 | about = "Pro gamer and Coding Beast" / > 12 | < 13 | /div> 14 | ); 15 | } 16 | } 17 | export default App; -------------------------------------------------------------------------------- /ssbeast/myapp_task1/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /ssbeast/myapp_task1/src/Person.css: -------------------------------------------------------------------------------- 1 | .Person { 2 | border: solid 1px rgb(241, 43, 43); 3 | padding: 20px; 4 | height: 100px; 5 | width: 250px; 6 | } 7 | -------------------------------------------------------------------------------- /ssbeast/myapp_task1/src/Person.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from "react"; 4 | import "./Person.css"; 5 | 6 | class Person extends Component { 7 | render() { 8 | return ( < 9 | div className = "Person" > 10 | < 11 | h3 > { 12 | this.props.name 13 | } < /h3> < 14 | p > { 15 | this.props.about 16 | } < /p> < 17 | /div> 18 | ); 19 | } 20 | } 21 | 22 | export default Person; 23 | -------------------------------------------------------------------------------- /ssbeast/myapp_task1/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /ssbeast/myapp_task1/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /ssbeast/myapp_task1/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ssbeast/myapp_task1/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | --------------------------------------------------------------------------------