{heading}
60 | } 61 | 62 | function App () { 63 | return ( 64 |
65 |
68 | )
69 | }
70 |
71 | export default App
72 |
--------------------------------------------------------------------------------
/Assignments/dotMap-dotFilter-excercise/dot-map-assignment.txt:
--------------------------------------------------------------------------------
1 | /* Using .map()
2 | *
3 | * Using the musicData array and .map():
4 | * - return a string for each item in the array in the following format
5 | *
106 |
107 | 
108 |
110 |
112 | )
113 | }
114 | }
115 |
116 | export default App;
117 |
--------------------------------------------------------------------------------
/Assignments/excercise-1-passing-data/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(React Bootcamp - Train the Trainer - Coding Practice
109 |Book People liked
111 |Imran Series
17 |Liked By:
18 |-
19 |
- Fazal Deen 20 |
Jokes 101
23 |Liked By:
24 |-
25 |
- Muneeb 26 |
- Osama 27 |
I Am Malala
30 |None of the peeps in the chart liked this book
31 | 32 | -------------------------------------------------------------------------------- /Assignments/excercise-2-passing-data/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "author-likes-movie", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.3.2", 7 | "react-dom": "^16.3.2", 8 | "react-scripts": "1.1.4" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Assignments/excercise-2-passing-data/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aamirpinger/react-fundamental-slides-code/4145a7496073b70124b6b73e85c4a4d5d631f21c/Assignments/excercise-2-passing-data/public/favicon.ico -------------------------------------------------------------------------------- /Assignments/excercise-2-passing-data/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 |
106 |
107 |
108 |
110 |
112 | );
113 | }
114 | }
115 |
116 | export default App;
117 |
--------------------------------------------------------------------------------
/Assignments/excercise-2-passing-data/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(React Bootcamp - Train the Trainer - Coding Practice
109 |Book People liked
111 |
16 |
17 |
18 |
20 |
32 | );
33 | }
34 | }
35 |
36 | export default App;
37 |
38 |
--------------------------------------------------------------------------------
/Assignments/excercise-4-managing-state/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(React Bootcamp - Train the Trainer - Coding Practice
19 |
21 |
31 | ADD THE NUMBERS GAME
22 |
23 |
25 |
26 |
27 | {`${number1} + ${number2} + ${number3} = ${proposedAnswer}`}
24 |28 | You have answered {numCorrect} question answered correctly out of total {numQuestions} questions. 29 |
30 |
9 |
10 |
11 |
13 |
19 | );
20 | }
21 | }
22 |
23 | export default App;
24 |
25 |
--------------------------------------------------------------------------------
/Assignments/excercise-5-controlled-component/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(React Bootcamp - Train the Trainer - Coding Excercise
12 |
14 |
15 |
18 | You are saying:
16 |What ever you type into the input field it should reflect here.
17 |
38 |
39 |
40 |
42 |
62 | );
63 | }
64 | }
65 |
66 | export default App;
67 |
68 |
69 |
--------------------------------------------------------------------------------
/Assignments/excercise-6-all-topic-component-1/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(React Bootcamp - Train the Trainer - Coding Excercise
41 |ToDo List
43 | 52 | 53 | 56 | 57 |Item List
58 |-
59 | {this.state.itemList.map((item, index) =>
- {item} )} 60 |
9 |
10 |
11 |
13 |
14 | // CODE HERE
15 |
16 |
17 | );
18 | }
19 | }
20 |
21 | export default App;
22 |
23 |
--------------------------------------------------------------------------------
/Assignments/excercise-7-all-topic-component-2/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(React Bootcamp - Train the Trainer - Coding Excercise
12 |
25 |
26 |
27 |
29 |
88 | );
89 | }
90 | }
91 |
92 | export default App;
93 |
94 |
95 |
--------------------------------------------------------------------------------
/Assignments/excercise-8-all-topic-component-3/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(React Bootcamp - Train the Trainer - Coding Excercise
28 |
30 |
87 |
31 |
58 |
59 | GhupShap Chat App
32 |{users[0].username}
33 |
34 | -
35 | {messages.map((message, index) => (
36 |
-
42 |
{`${message.username}: ${message.text}`}
43 |
44 | ))}
45 |
48 |
56 |
57 |
60 |
86 | GhupShap Chat App
61 |{users[1].username}
62 | -
63 | {messages.map((message, index) => (
64 |
-
70 |
{`${message.username}: ${message.text}`}
71 |
72 | ))}
73 |
76 |
84 |
85 | -
10 | {
11 | cityArray.map((city) =>
- {city} ) 12 | } 13 |
-
12 | cities.map((city) =>
- {city} 13 |
-
36 | cities.map((city) =>
- {city} 37 |
-
48 | countries.map((country) =>
- {country} 49 |
{heading}
102 | } 103 | 104 | function App() { 105 | const someCondition = true // try changing true with false 106 | 107 | if (someCondition === true) { 108 | return ( 109 |
110 |
113 | )
114 | } else {
115 | return (
116 | Sorry nothing to display
117 | ) 118 | } 119 | } 120 | 121 | export default App 122 | -------------------------------------------------------------------------------- /CSS-Styling/InlineStyling.js: -------------------------------------------------------------------------------- 1 | // Good article to read on form https://medium.com/javascript-inside/better-understanding-forms-in-react-a85d889773ce 2 | 3 | //List of all supported HTML attributes that can be passed along to the React element 4 | //https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes 5 | 6 | import React from 'react' 7 | import './App.css' 8 | 9 | function ErrorMessage (props) { 10 | const { message } = props 11 | 12 | return {message} 13 | } 14 | 15 | function ControlledInputBox (props) { 16 | const { handleInputChange, textBoxValue, noCityFlag } = props 17 | 18 | return ( 19 | <> 20 | 21 | {noCityFlag &&{heading}
118 | } 119 | 120 | function App () { 121 | const someCondition = true // try changing true with false 122 | 123 | if (someCondition === true) { 124 | return ( 125 |
132 |
137 | )
138 | } else {
139 | return
133 |
136 | Sorry nothing to display
140 | } 141 | } 142 | 143 | export default App 144 | -------------------------------------------------------------------------------- /CSS-Styling/flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aamirpinger/react-fundamental-slides-code/4145a7496073b70124b6b73e85c4a4d5d631f21c/CSS-Styling/flag.png -------------------------------------------------------------------------------- /CSS-Styling/imgTagExample.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import logo from './flag.png' 4 | import bgTile from './tile-bg.jpg' 5 | 6 | const Button = styled.button` 7 | background: black; 8 | color: white; 9 | border-radius: 7px; 10 | padding: 20px; 11 | margin: 10px; 12 | font-size: 16px; 13 | :disabled { 14 | opacity: 0.4; 15 | } 16 | :hover { 17 | box-shadow: 0 0 10px yellow; 18 | background-color: white; 19 | color: black; 20 | } 21 | ` 22 | const Div = styled.div` 23 | min-width: 80%; 24 | height: 700px; 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | border: 1px dotted navy; 29 | background-color: navy; 30 | ` 31 | 32 | const H1 = styled.h1` 33 | color: navy; 34 | font-family: Arial; 35 | ` 36 | 37 | // use styled() for inheritence 38 | const DivNew = styled(Div)` 39 | background-color: lightblue; 40 | background-image: url(${bgTile}); 41 | backgound 42 | ` 43 | 44 | function App () { 45 | return ( 46 |
47 |
48 | ;
50 |
51 |
52 |
53 | )
54 | }
55 |
56 | export default App
57 |
--------------------------------------------------------------------------------
/CSS-Styling/style-component-example.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from 'styled-components'
3 |
4 | const Button = styled.button`
5 | background: black;
6 | color: white;
7 | border-radius: 7px;
8 | padding: 20px;
9 | margin: 10px;
10 | font-size: 16px;
11 | :disabled {
12 | opacity: 0.4;
13 | }
14 | :hover {
15 | box-shadow: 0 0 10px yellow;
16 | background-color: white;
17 | color: black;
18 | }
19 | `
20 | const Div = styled.div`
21 | min-width: 80%;
22 | height: 700px;
23 | display: flex;
24 | justify-content: center;
25 | align-items: center;
26 | border: 1px dotted navy;
27 | background-color: navy;
28 | `
29 |
30 | const H1 = styled.h1`
31 | color: navy;
32 | font-family: Arial;
33 | `
34 |
35 | // use styled() for inheritence
36 | const DivNew = styled(Div)`
37 | background-color: lightblue;
38 | `
39 |
40 | function App () {
41 | return (
42 | styled-component Example
49 |
43 |
44 |
48 |
49 | )
50 | }
51 |
52 | export default App
53 |
--------------------------------------------------------------------------------
/CSS-Styling/tile-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aamirpinger/react-fundamental-slides-code/4145a7496073b70124b6b73e85c4a4d5d631f21c/CSS-Styling/tile-bg.jpg
--------------------------------------------------------------------------------
/ComponentWithDotFilter.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | class MyComponent extends React.Component {
4 | render () {
5 | const cityArray = ['Karachi', 'Lahore', 'Peshawar', 'Quetta']
6 |
7 | const shortListedCities = cityArray.filter(city => city.length > 6)
8 | return (
9 | styled-component Example
45 | 46 | 47 |-
10 | {
11 | shortListedCities.map(city =>
- {city} ) 12 | } 13 |
-
9 | {
10 | cityArray.map((city) =>
- {city} ) 11 | } 12 |
{heading}
99 | } 100 | 101 | function App() { 102 | const someCondition = true // try changing true with false 103 | 104 | if (someCondition === true) { 105 | return ( 106 |
107 |
110 | )
111 | } else {
112 | return (
113 | Sorry nothing to display
114 | ) 115 | } 116 | } 117 | 118 | export default App 119 | -------------------------------------------------------------------------------- /DestructureStateAndProps.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | class MyComponent extends React.Component { 4 | state = { 5 | cityArray: ['Karachi', 'Lahore', 'Peshawar', 'Quetta'] 6 | } 7 | 8 | render () { 9 | const { myFunction } = this.props 10 | const { cityArray } = this.state 11 | 12 | myFunction() 13 | 14 | return ( 15 |-
16 | {
17 | cityArray.map(city =>
- {city} ) 18 | } 19 |
{heading}
27 | } 28 | 29 | function App () { 30 | const myFunction = () => alert('Hello World') 31 | 32 | return ( 33 |
34 |
37 | )
38 | }
39 |
40 | export default App
41 |
--------------------------------------------------------------------------------
/DestructuringArray1.js:
--------------------------------------------------------------------------------
1 | // run this file using node DestructuringArray1.js
2 |
3 | const myArray = ['Aamir', 'Pinger', 2]
4 |
5 | const [firstName, lastName, degrees] = myArray
6 |
7 | console.log(firstName)
8 | console.log(lastName)
9 | console.log(degrees)
10 |
11 | const sentence = `${firstName} ${lastName} has ${degrees} Masters degrees.`
12 |
13 | console.log(sentence)
14 |
--------------------------------------------------------------------------------
/DestructuringArray2.js:
--------------------------------------------------------------------------------
1 | // run this file using node DestructuringArray2.js
2 |
3 | const myArray = ['Aamir', 'Pinger', 2]
4 |
5 | const [firstName, lastName] = myArray
6 |
7 | console.log(firstName)
8 | console.log(lastName)
9 | console.log(degrees)
10 |
11 | const sentence = `${firstName} ${lastName} has ${degrees} Masters degrees.`
12 |
13 | console.log(sentence)
14 |
--------------------------------------------------------------------------------
/DestructuringObject1.js:
--------------------------------------------------------------------------------
1 | // run this file using node DestructuringObject1.js
2 |
3 | const myObject = { firstName: 'Aamir', lastName: 'Pinger', degrees: 2 }
4 |
5 | console.log(myObject.firstName)
6 | console.log(myObject.lastName)
7 | console.log(myObject.degrees)
8 |
9 | const { firstName, lastName, degrees } = myObject
10 |
11 | console.log(firstName)
12 | console.log(lastName)
13 | console.log(degrees)
14 |
15 | const sentence = `${firstName} ${lastName} has ${degrees} Masters degrees`
16 |
17 | console.log(sentence)
18 |
--------------------------------------------------------------------------------
/DestructuringObject2.js:
--------------------------------------------------------------------------------
1 | // run this file using node DestructuringObject2.js
2 |
3 | const myObject = { firstName: 'Aamir', lastName: 'Pinger', degrees: 2 }
4 |
5 | console.log(myObject.firstName)
6 | console.log(myObject.lastName)
7 | console.log(myObject.degrees)
8 |
9 | const { firstName, lastName } = myObject
10 |
11 | console.log(firstName)
12 | console.log(lastName)
13 | console.log(degrees)
14 |
15 | const sentence = `${firstName} ${lastName} has ${degrees} Masters degrees`
16 |
17 | console.log(sentence)
18 |
--------------------------------------------------------------------------------
/DotFilterExampleCode.js:
--------------------------------------------------------------------------------
1 | // Filter function
2 |
3 | // Example of imparative code
4 |
5 | const names = ['Aamir', 'Ali', 'Javed', 'Aziz', 'Irfan', 'Muneeb']
6 | const selectedNames = []
7 | for (let i = 0; i < names.length; i++) {
8 | if (names[i].length >= 5) {
9 | selectedNames.push(names[i])
10 | }
11 | }
12 |
13 | //* *********************************************
14 | // run one at a time
15 |
16 | // Example of declarative code using .filter function
17 |
18 | /*
19 | const names = ['Aamir', 'Ali', 'Javed', 'Aziz', 'Irfan', 'Muneeb']
20 |
21 | const selectedNames = names.filter(name => name.length >= 5)
22 |
23 | */
24 |
--------------------------------------------------------------------------------
/DotMapFunction.js:
--------------------------------------------------------------------------------
1 | //Simple javascript code as an example of imperative code
2 |
3 | const teachers = ['Zia Khan', 'Irfan', 'Muneeb', 'Aamir']
4 | const titles = []
5 |
6 | for (let i = 0; i < teachers.length; i++) {
7 | titles[i] = 'Mr. ' + teachers[i]
8 | }
9 |
10 |
11 |
12 | //***********************************************************
13 | // Run one at a time
14 |
15 | Example of declarative code using simple javascript .map function
16 |
17 | /*
18 | const teachers = ['Zia Khan', 'Irfan', 'Muneeb', 'Aamir']
19 |
20 | const titles = teachers.map( name => 'Mr. ' + name )
21 | */
22 |
23 |
--------------------------------------------------------------------------------
/FormExample.js:
--------------------------------------------------------------------------------
1 | // Good article to read on form https://medium.com/javascript-inside/better-understanding-forms-in-react-a85d889773ce
2 |
3 | import React from 'react'
4 |
5 | function ControlledInputBox (props) {
6 | const { handleInputChange, textBoxValue } = props
7 |
8 | return
9 | }
10 |
11 | function ButtonComponent (props) {
12 | return
13 | }
14 |
15 | class MyComponent extends React.Component {
16 | state = {
17 | cityArray: ['Karachi', 'Lahore', 'Peshawar', 'Quetta'],
18 | textBoxValue: ''
19 | }
20 |
21 | handleInputChange = e => {
22 | const { value } = e.target
23 | this.setState({
24 | textBoxValue: value
25 | })
26 | }
27 |
28 | addCity = () => {
29 | const { textBoxValue } = this.state
30 |
31 | this.setState(prevState => ({
32 | cityArray: [...prevState.cityArray, textBoxValue],
33 | textBoxValue: ''
34 | }))
35 | }
36 |
37 | removeCity = event => {
38 | const { cityArray } = this.state
39 | const { value } = event.target
40 |
41 | const newCityArray = cityArray.filter(city => city !== value)
42 |
43 | this.setState({
44 | cityArray: newCityArray
45 | })
46 | }
47 |
48 | handleForm = event => {
49 | const { textBoxValue } = this.state
50 |
51 | event.preventDefault()
52 |
53 | if (textBoxValue === '') {
54 | alert('Please enter city name to save')
55 | } else {
56 | this.addCity()
57 | }
58 | }
59 |
60 | render () {
61 | const { cityArray, textBoxValue } = this.state
62 |
63 | return (
64 |
82 | )
83 | }
84 | }
85 |
86 | function MyFunctionalComponent (props) {
87 | const { heading } = props
88 | return {heading}
89 | } 90 | 91 | function App () { 92 | return ( 93 |
94 |
97 | )
98 | }
99 |
100 | export default App
101 |
--------------------------------------------------------------------------------
/JSXReactElementExample.js:
--------------------------------------------------------------------------------
1 | // JSX in React Example code
2 |
3 |
4 | import React from 'react';
5 | import ReactDOM from 'react-dom';
6 |
7 | const element = Hello World
8 | 9 | console.log(element) 10 | 11 | ReactDOM.render( 12 | element, 13 | document.getElementById('root') 14 | ) 15 | 16 | 17 | //**************************************************** 18 | // run one at a time 19 | 20 | /* 21 | import React from 'react'; 22 | import ReactDOM from 'react-dom'; 23 | 24 | const cityArray = ["Karachi", "Lahore", "Peshawer", "Quetta"] 25 | 26 | const myElement =-
27 | {
28 | cityArray.map((city) =>
- {city} ) 29 | } 30 |
-
11 | {shortListedCities.map(city =>
- {city} )} 12 |
23 |
26 | )
27 | }
28 |
29 | export default App
30 |
--------------------------------------------------------------------------------
/PassingPropsAndFunction.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | class MyComponent extends React.Component {
4 | render () {
5 | const cityArray = this.props.cityArray
6 |
7 | const shortListedCities = cityArray.filter(city => city.length > 6)
8 |
9 | this.props.myFunction()
10 |
11 | return (
12 | -
13 | {shortListedCities.map(city =>
- {city} )} 14 |
27 |
30 | )
31 | }
32 |
33 | export default App
34 |
--------------------------------------------------------------------------------
/PassingPropsToComponentExample.js:
--------------------------------------------------------------------------------
1 | // App.js file
2 |
3 | import React, { Component, Fragment } from 'react';
4 |
5 | class App extends Component {
6 | render() {
7 | return (
8 | //You can also use instead of
9 |
10 |
13 | )
14 | }
15 | }
16 |
17 | class City extends Component {
18 |
19 | render() {
20 | const cityArray = this.props.cityArray
21 | // you can also do like this
22 | //const { cityArray } = this.props
23 |
24 | return (
25 | //You can also use
instead of
26 |
27 |
34 | )
35 | }
36 | }
37 |
38 | export default App;
39 |
--------------------------------------------------------------------------------
/PropTypeExample.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropType from 'prop-types'
3 |
4 | class MyComponent extends React.Component {
5 | render () {
6 | const cityArray = this.props.cityArray
7 |
8 | const shortListedCities = cityArray.filter(city => city.length > 6)
9 |
10 | // this.props.myFunction()
11 |
12 | return (
13 |
64 | this.addCity()}/>
65 |
66 | )
67 | }
68 | }
69 |
70 | function MyFunctionalComponent (props) {
71 | const { heading } = props
72 | return
11 | , document.getElementById('root'));
13 |
14 |
15 |
--------------------------------------------------------------------------------
/RouterExamples/SwitchWithRouter.js:
--------------------------------------------------------------------------------
1 | // ************************************************************************************************
2 | // This example illustrate how to use component with react route components
3 | //
4 | // App.js file
5 | //
6 | // *************************************************************************************************
7 |
8 | import React, { Component, Fragment } from 'react'
9 | import { Link, Route, Switch } from 'react-router-dom'
10 |
11 | function ComponentHw(props) {
12 | return
26 |
27 |
28 | {
29 | //to check switch functionality try typing wrong route in
30 | // browser URL for example: http://localhost:3000/pakistan
31 | }
32 |
33 |
39 | Goto to Hello World Page
40 |
41 | )
42 | }
43 | }
44 |
45 | export default App
46 |
--------------------------------------------------------------------------------
/RouterExamples/URLParametersExample.js:
--------------------------------------------------------------------------------
1 |
2 | // **************************************************************************
3 | //
4 | // App.js file
5 | //
6 | // **************************************************************************
7 |
8 | import React, { Component, Fragment } from 'react'
9 | import { Link, Route, Switch, Redirect, withRouter } from 'react-router-dom'
10 |
11 | function ErrorComponent() {
12 | return
67 |
68 |
73 | Goto to Hello World Page
74 |
75 |
76 |
77 | )
78 | }
79 | }
80 |
81 | export default App
82 |
--------------------------------------------------------------------------------
/RouterExamples/propsWithRedirectExample.js:
--------------------------------------------------------------------------------
1 | // **************************************************************************
2 | //
3 | // App.js file
4 | //
5 | // **************************************************************************
6 |
7 | import React, { Component, Fragment } from 'react'
8 | import { Link, Route, Switch, Redirect } from 'react-router-dom'
9 |
10 | function ErrorComponent() {
11 | return
62 |
63 |
68 | Goto to Hello World Page
69 |
70 |
71 |
72 | )
73 | }
74 | }
75 |
76 | export default App
77 |
--------------------------------------------------------------------------------
/RouterExamples/redirectRouterComponent.js:
--------------------------------------------------------------------------------
1 | // ************************************************************************************************
2 | // This example illustrate how to programmatically redirect from one route to another in react
3 | //
4 | // App.js file
5 | //
6 | // *************************************************************************************************
7 |
8 | import React, { Component, Fragment } from 'react'
9 | import { Link, Route, Switch, Redirect } from 'react-router-dom'
10 |
11 | function ErrorComponent() {
12 | return
49 |
50 |
55 | Goto to Hello World Page
56 |
57 |
58 |
59 | )
60 | }
61 | }
62 |
63 | export default App
64 |
--------------------------------------------------------------------------------
/RouterExamples/simpleRoute.js:
--------------------------------------------------------------------------------
1 | // ************************************************************************************************
2 | // This example illustrate how add simple routes in the react app
3 | //
4 | // App.js file
5 | //
6 | // *************************************************************************************************
7 |
8 | import React, { Component, Fragment } from 'react'
9 | import { Link, Route } from 'react-router-dom'
10 |
11 | function ComponentHw(props) {
12 | return
24 |
31 | )
32 | }
33 | }
34 |
35 | export default App
36 |
37 |
--------------------------------------------------------------------------------
/RoutesExample/.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 |
--------------------------------------------------------------------------------
/RoutesExample/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 | -------------------------------------------------------------------------------- /RoutesExample/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 | "prop-types": "^15.7.2", 10 | "react": "^16.13.0", 11 | "react-dom": "^16.13.0", 12 | "react-router-dom": "^5.1.2", 13 | "react-scripts": "3.4.0", 14 | "styled-components": "^5.0.1" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": "react-app" 24 | }, 25 | "browserslist": { 26 | "production": [ 27 | ">0.2%", 28 | "not dead", 29 | "not op_mini all" 30 | ], 31 | "development": [ 32 | "last 1 chrome version", 33 | "last 1 firefox version", 34 | "last 1 safari version" 35 | ] 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /RoutesExample/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aamirpinger/react-fundamental-slides-code/4145a7496073b70124b6b73e85c4a4d5d631f21c/RoutesExample/public/favicon.ico -------------------------------------------------------------------------------- /RoutesExample/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 |
--------------------------------------------------------------------------------
/RoutesExample/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aamirpinger/react-fundamental-slides-code/4145a7496073b70124b6b73e85c4a4d5d631f21c/RoutesExample/public/logo192.png
--------------------------------------------------------------------------------
/RoutesExample/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aamirpinger/react-fundamental-slides-code/4145a7496073b70124b6b73e85c4a4d5d631f21c/RoutesExample/public/logo512.png
--------------------------------------------------------------------------------
/RoutesExample/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 |
--------------------------------------------------------------------------------
/RoutesExample/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/RoutesExample/src/Components/AboutUs/AboutUs.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function AboutUs () {
4 | return
10 |
14 | )
15 | }
16 |
17 | export default Routes
18 |
--------------------------------------------------------------------------------
/RoutesExample/src/Static/Images/flag.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aamirpinger/react-fundamental-slides-code/4145a7496073b70124b6b73e85c4a4d5d631f21c/RoutesExample/src/Static/Images/flag.png
--------------------------------------------------------------------------------
/RoutesExample/src/Static/Images/tile-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aamirpinger/react-fundamental-slides-code/4145a7496073b70124b6b73e85c4a4d5d631f21c/RoutesExample/src/Static/Images/tile-bg.jpg
--------------------------------------------------------------------------------
/RoutesExample/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 |
--------------------------------------------------------------------------------
/RoutesExample/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import './index.css'
4 | import App from './Components/App'
5 | import * as serviceWorker from './serviceWorker'
6 |
7 | import { BrowserRouter } from 'react-router-dom'
8 |
9 | ReactDOM.render(
10 |
11 | ,
13 | document.getElementById('root')
14 | )
15 |
16 | // If you want your app to work offline and load faster, you can change
17 | // unregister() to register() below. Note this comes with some pitfalls.
18 | // Learn more about service workers: https://bit.ly/CRA-PWA
19 | serviceWorker.unregister()
20 |
--------------------------------------------------------------------------------
/RoutesExample/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 |
--------------------------------------------------------------------------------
/SampleFolderStructure/.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 |
--------------------------------------------------------------------------------
/SampleFolderStructure/README.md:
--------------------------------------------------------------------------------
1 | # To run this project
2 |
3 | ```
4 | npm install
5 | ```
6 |
7 | ```
8 | npm start
9 | ```
10 |
--------------------------------------------------------------------------------
/SampleFolderStructure/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 | "prop-types": "^15.7.2",
10 | "react": "^16.13.0",
11 | "react-dom": "^16.13.0",
12 | "react-router-dom": "^5.1.2",
13 | "react-scripts": "3.4.0",
14 | "styled-components": "^5.0.1"
15 | },
16 | "scripts": {
17 | "start": "react-scripts start",
18 | "build": "react-scripts build",
19 | "test": "react-scripts test",
20 | "eject": "react-scripts eject"
21 | },
22 | "eslintConfig": {
23 | "extends": "react-app"
24 | },
25 | "browserslist": {
26 | "production": [
27 | ">0.2%",
28 | "not dead",
29 | "not op_mini all"
30 | ],
31 | "development": [
32 | "last 1 chrome version",
33 | "last 1 firefox version",
34 | "last 1 safari version"
35 | ]
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/SampleFolderStructure/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aamirpinger/react-fundamental-slides-code/4145a7496073b70124b6b73e85c4a4d5d631f21c/SampleFolderStructure/public/favicon.ico
--------------------------------------------------------------------------------
/SampleFolderStructure/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 |
--------------------------------------------------------------------------------
/SampleFolderStructure/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aamirpinger/react-fundamental-slides-code/4145a7496073b70124b6b73e85c4a4d5d631f21c/SampleFolderStructure/public/logo192.png
--------------------------------------------------------------------------------
/SampleFolderStructure/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aamirpinger/react-fundamental-slides-code/4145a7496073b70124b6b73e85c4a4d5d631f21c/SampleFolderStructure/public/logo512.png
--------------------------------------------------------------------------------
/SampleFolderStructure/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 |
--------------------------------------------------------------------------------
/SampleFolderStructure/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/SampleFolderStructure/src/Components/App.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: navy;
3 | }
4 |
5 | .listItem {
6 | font-size: 16px;
7 | margin: 10px;
8 | font-family: 'Times New Roman', Times, serif;
9 | }
10 |
--------------------------------------------------------------------------------
/SampleFolderStructure/src/Components/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import MyFunctionalComponent from './MyFunctionalComponent/MyFunctionalComponent'
3 | import MyComponent from './MyComponent/MyComponent'
4 | import ErrorMessage from './ErrorMessage/ErrorMessage'
5 |
6 | import './App.css'
7 |
8 | function App () {
9 | const showSite = true
10 |
11 | if (showSite) {
12 | return (
13 |
-
28 | {
29 | cityArray.map((city) =>
- {city} ) 30 | } 31 |
{this.props.name}
33 |-
14 | {shortListedCities.map(city =>
- {city} )} 15 |
{props.heading}
26 | } 27 | 28 | function App () { 29 | const cityArray1 = ['Karachi', 'Lahore', 'Peshawar', 'Quetta'] 30 | const cityArray2 = ['Hyderabad', 'Islamabad', 'Sawat', 'Gawader'] 31 | 32 | const cityObj = { city1: 'Karachi', city2: 'Lahore', city3: 'Peshawar', city4: 'Quetta' } 33 | 34 | const myFunction = () => alert('Hello World') 35 | 36 | return ( 37 |
38 |
42 | )
43 | }
44 |
45 | export default App
46 |
--------------------------------------------------------------------------------
/PropTypeInClass.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropType from 'prop-types'
3 |
4 | class MyComponent extends React.Component {
5 | static propTypes = {
6 | cityArray: PropType.array.isRequired
7 | }
8 |
9 | render () {
10 | const cityArray = this.props.cityArray
11 |
12 | const shortListedCities = cityArray.filter(city => city.length > 6)
13 |
14 | // this.props.myFunction()
15 |
16 | return (
17 | -
18 | {shortListedCities.map(city =>
- {city} )} 19 |
{props.heading}
26 | } 27 | 28 | function App () { 29 | const cityArray1 = ['Karachi', 'Lahore', 'Peshawar', 'Quetta'] 30 | const cityArray2 = ['Hyderabad', 'Islamabad', 'Sawat', 'Gawader'] 31 | 32 | const cityObj = { city1: 'Karachi', city2: 'Lahore', city3: 'Peshawar', city4: 'Quetta' } 33 | 34 | const myFunction = () => alert('Hello World') 35 | 36 | return ( 37 |
38 |
42 | )
43 | }
44 |
45 | export default App
46 |
--------------------------------------------------------------------------------
/PropsToFunctionalComp.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | class MyComponent extends React.Component {
4 | render () {
5 | const cityArray = this.props.cityArray
6 |
7 | const shortListedCities = cityArray.filter(city => city.length > 6)
8 |
9 | // this.props.myFunction()
10 |
11 | return (
12 | -
13 | {shortListedCities.map(city =>
- {city} )} 14 |
{props.heading}
21 | } 22 | 23 | function App () { 24 | const cityArray1 = ['Karachi', 'Lahore', 'Peshawar', 'Quetta'] 25 | const cityArray2 = ['Hyderabad', 'Islamabad', 'Sawat', 'Gawader'] 26 | 27 | const myFunction = () => alert('Hello World') 28 | 29 | return ( 30 |
31 |
35 | )
36 | }
37 |
38 | export default App
39 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Fundamental Slides Code
2 |
3 | ### This repository contain all the example code shown during the React fundamental training
4 |
5 |
6 | For online practice of React https://codesandbox.io
7 |
8 |
9 | Some of the DOM attributes supported by React are listed on following link.
10 | https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes
11 |
12 | Resourse:
13 | 1) The Road to learn react (Free book) https://roadtoreact.com/
14 | 2) 30-days-of-react - https://www.fullstackreact.com/30-days-of-react/
15 |
16 |
17 |
18 | ### Things to install for React environment
19 |
20 | 1) Node.js and npm. you can download and install from https://www.npmjs.com/get-npm
21 |
22 | 2) Once node and npm is installed on your system run following command to install create-react-app to setup React enviorment :
23 | #### npm install -g create-react-app
24 |
25 |
26 | ### To initiate react project
27 |
28 | #### $ npx create-react-app < project-name >
29 |
30 | #### $ cd < project-name >
31 |
32 | #### $ npm start / yarn start
33 |
--------------------------------------------------------------------------------
/RemoveCityFromState.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function ControlledInputBox (props) {
4 | const { handleInputChange, textBoxValue } = props
5 |
6 | return (
7 |
8 | )
9 | }
10 |
11 | function ButtonComponent (props) {
12 | const { addCity } = props
13 | return (
14 | <>
15 |
16 |
17 | )
18 | }
19 |
20 | class MyComponent extends React.Component {
21 | state = {
22 | cityArray: ['Karachi', 'Lahore', 'Peshawar', 'Quetta'],
23 | textBoxValue: ''
24 | }
25 |
26 | handleInputChange = (e) => {
27 | const { value } = e.target
28 | this.setState({
29 | textBoxValue: value
30 | })
31 | }
32 |
33 | addCity = () => {
34 | const { textBoxValue } = this.state
35 |
36 | this.setState(prevState => ({
37 | cityArray: [...prevState.cityArray, textBoxValue],
38 | textBoxValue: ''
39 | }))
40 | }
41 |
42 | removeCity = (event) => {
43 | const { cityArray } = this.state
44 | const { value } = event.target
45 |
46 | const newCityArray = cityArray.filter(city => city !== value)
47 |
48 | this.setState({
49 | cityArray: newCityArray
50 | })
51 | }
52 |
53 | render () {
54 | const { cityArray, textBoxValue } = this.state
55 |
56 | return (
57 | <>
58 | -
59 | {
60 | cityArray.map(city =>
- {city} ) 61 | } 62 |
{heading}
73 | } 74 | 75 | function App () { 76 | return ( 77 |
78 |
81 | )
82 | }
83 |
84 | export default App
85 |
--------------------------------------------------------------------------------
/RouterExamples/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 | import { BrowserRouter } from 'react-router-dom'
8 |
9 | ReactDOM.render(
10 | {`HELLO WORLD ${props.text}`}
13 | } 14 | 15 | function ComponentSlogan() { 16 | returnPAKISTAN ZINDABAD
17 | } 18 | 19 | function ErrorComponent() { 20 | return404 - ERROR
21 | } 22 | class App extends Component { 23 | render() { 24 | return ( 25 |404 - ERROR
13 | } 14 | 15 | function LoginComponent(props) { 16 | console.log(props) 17 | return18 | {`User Login Page - the props value received in 19 | variable humanType is : ${props.location.state.humanType} 20 | and the value of variable age received as a router props is : ${props.location.state.age} 21 | `} 22 |
23 | } 24 | 25 | function ComponentHw(props) { 26 | console.log(props) 27 | returnHELLO WORLD - {props.match.params.extraText}
28 | } 29 | 30 | ComponentHw = withRouter(ComponentHw) 31 | 32 | class ComponentSlogan extends Component { 33 | state = { 34 | userLogin: true 35 | } 36 | 37 | componentDidMount() { 38 | setTimeout(() => { 39 | this.setState((ps) => ({ 40 | userLogin: !ps.userLogin, 41 | })) 42 | }, 2000) 43 | } 44 | 45 | render() { 46 | return (this.state.userLogin) 47 | ?PAKISTAN ZINDABAD
48 | :404 - ERROR
12 | } 13 | 14 | function LoginComponent(props) { 15 | console.log(props) 16 | return17 | {`User Login Page - the props value received in 18 | variable humanType is : ${props.location.state.humanType} 19 | and the value of variable age received as a router props is : ${props.location.state.age} 20 | `} 21 |
22 | } 23 | 24 | function ComponentHw() { 25 | returnHELLO WORLD
26 | } 27 | 28 | class ComponentSlogan extends Component { 29 | state = { 30 | userLogin: true 31 | } 32 | 33 | componentDidMount() { 34 | setTimeout(() => { 35 | this.setState((ps) => ({ 36 | userLogin: !ps.userLogin, 37 | })) 38 | }, 2000) 39 | } 40 | 41 | render() { 42 | return (this.state.userLogin) 43 | ?PAKISTAN ZINDABAD
44 | :404 - ERROR
13 | } 14 | 15 | function LoginComponent() { 16 | returnUser Login Page
17 | } 18 | 19 | function ComponentHw() { 20 | returnHELLO WORLD
21 | } 22 | 23 | class ComponentSlogan extends Component { 24 | state = { 25 | userLogin: true 26 | } 27 | 28 | componentDidMount() { 29 | setTimeout(() => { 30 | this.setState((ps) => ({ 31 | userLogin: !ps.userLogin, 32 | })) 33 | }, 2000) 34 | } 35 | 36 | render() { 37 | return (this.state.userLogin) 38 | ?PAKISTAN ZINDABAD
39 | :{`HELLO WORLD ${props.text}`}
13 | } 14 | 15 | function ComponentSlogan() { 16 | returnPAKISTAN ZINDABAD
17 | } 18 | 19 | 20 | class App extends Component { 21 | render() { 22 | return ( 23 |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 | -------------------------------------------------------------------------------- /RoutesExample/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 | "prop-types": "^15.7.2", 10 | "react": "^16.13.0", 11 | "react-dom": "^16.13.0", 12 | "react-router-dom": "^5.1.2", 13 | "react-scripts": "3.4.0", 14 | "styled-components": "^5.0.1" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": "react-app" 24 | }, 25 | "browserslist": { 26 | "production": [ 27 | ">0.2%", 28 | "not dead", 29 | "not op_mini all" 30 | ], 31 | "development": [ 32 | "last 1 chrome version", 33 | "last 1 firefox version", 34 | "last 1 safari version" 35 | ] 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /RoutesExample/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aamirpinger/react-fundamental-slides-code/4145a7496073b70124b6b73e85c4a4d5d631f21c/RoutesExample/public/favicon.ico -------------------------------------------------------------------------------- /RoutesExample/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 |
About Us Page
5 | } 6 | -------------------------------------------------------------------------------- /RoutesExample/src/Components/App.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: navy; 3 | } 4 | 5 | .listItem { 6 | font-size: 16px; 7 | margin: 10px; 8 | font-family: 'Times New Roman', Times, serif; 9 | } 10 | -------------------------------------------------------------------------------- /RoutesExample/src/Components/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ErrorMessage from './ErrorMessage/ErrorMessage' 3 | import Routes from '../Routes' 4 | import { Link } from 'react-router-dom' 5 | 6 | import './App.css' 7 | 8 | function App () { 9 | const showSite = true 10 | 11 | if (showSite) { 12 | return ( 13 |
14 |
17 | Goto to About Us Page 18 |
19 | )
20 | } else {
21 | return 17 | Goto to About Us Page 18 |
-
94 | {cityArray.map(city => (
95 |
-
100 | {city}
101 |
102 | X 103 | 104 |
105 | ))}
106 |
{heading}
12 | } 13 | -------------------------------------------------------------------------------- /RoutesExample/src/Routes/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CityList from '../Components/CityList/CityList' 3 | import AboutUs from '../Components/AboutUs/AboutUs' 4 | 5 | import { Route, Switch } from 'react-router-dom' 6 | 7 | function Routes () { 8 | return ( 9 |
14 |
17 | )
18 | } else {
19 | return -
94 | {cityArray.map(city => (
95 |
-
100 | {city}
101 |
102 | X 103 | 104 |
105 | ))}
106 |
{heading}
12 | } 13 | -------------------------------------------------------------------------------- /SampleFolderStructure/src/Static/Images/flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aamirpinger/react-fundamental-slides-code/4145a7496073b70124b6b73e85c4a4d5d631f21c/SampleFolderStructure/src/Static/Images/flag.png -------------------------------------------------------------------------------- /SampleFolderStructure/src/Static/Images/tile-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aamirpinger/react-fundamental-slides-code/4145a7496073b70124b6b73e85c4a4d5d631f21c/SampleFolderStructure/src/Static/Images/tile-bg.jpg -------------------------------------------------------------------------------- /SampleFolderStructure/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 | -------------------------------------------------------------------------------- /SampleFolderStructure/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './Components/App' 5 | import * as serviceWorker from './serviceWorker' 6 | 7 | ReactDOM.render(-
12 | {
13 | this.state.cityArray.map(city =>
- {city} ) 14 | } 15 |
23 |
25 | )
26 | }
27 |
28 | export default App
29 |
--------------------------------------------------------------------------------
/StateExampleCode.js:
--------------------------------------------------------------------------------
1 | import React, { Component, Fragment } from 'react';
2 |
3 | class App extends Component {
4 | state = {
5 | cityArray1: ["Karachi", "Lahore", "Peshawer", "Quetta"],
6 | cityArray2: ["Hyderabad", "Multan", "Gawader", "Mardan"]
7 | }
8 | render() {
9 | return (
10 | //You can also use instead of
11 |
12 |
15 | )
16 | }
17 | }
18 |
19 | class City extends Component {
20 |
21 | render() {
22 | const cityArray = this.props.cityArray
23 | // you can also do like this
24 | //const { cityArray } = this.props
25 |
26 | return (
27 | //You can also use
instead of
28 |
29 |
36 | )
37 | }
38 | }
39 | export default App;
40 |
41 |
--------------------------------------------------------------------------------
/basicReactElementExample.js:
--------------------------------------------------------------------------------
1 | // Basic example of creating element in .js file
2 | // React.createElement has 3 part
3 | // React.createElement( /* type */, /* props */, /* nested content */ );
4 |
5 | import React from 'react';
6 | import ReactDOM from 'react-dom';
7 |
8 | const element = React.createElement('div', null, 'Hello World')
9 |
10 | console.log(element)
11 |
12 | ReactDOM.render(
13 | element,
14 | document.getElementById('root')
15 | )
16 |
17 | //****************************************************************************
18 | // run one at a time
19 |
20 | /*
21 | import React from 'react';
22 | import ReactDOM from 'react-dom';
23 |
24 | const element = React.createElement('div', {
25 | className: anyCssClass
26 | }, 'Hello World')
27 |
28 | console.log(element)
29 |
30 | ReactDOM.render(
31 | element,
32 | document.getElementById('root')
33 | )
34 |
35 | */
36 |
37 | //****************************************************************************
38 | // run one at a time
39 |
40 | /*
41 |
42 | const element = React.createElement("ol",{className: heading},
43 | React.createElement("li",null, "Aamir")
44 | React.createElement("li",null, "Irfna")
45 | React.createElement("li",null, "Pinger")
46 | );
47 |
48 | */
49 |
50 |
51 | //***************************************************************************************
52 |
53 |
--------------------------------------------------------------------------------
/componentDidMountExample.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import styled from 'styled-components'
3 |
4 | import './App.css'
5 |
6 | const Button = styled.button`
7 | background-color: white;
8 | color: navy;
9 | width: 80px;
10 | height: 40px;
11 | `
12 |
13 | const H1 = styled.h1`
14 | font-size: 36px;
15 | color: Olive;
16 | `
17 | const Button2 = styled(Button)`
18 | background-color: silver;
19 | `
20 |
21 | function ControlledInputBox (props) {
22 | const { handleInputChange, textBoxValue, errorShowFlag } = props
23 |
24 | return (
25 | <>
26 |
27 | {errorShowFlag &&
20 |
26 |
27 | )
28 | }
29 | }
30 |
31 | export default App
32 |
--------------------------------------------------------------------------------
/componentDidUpdateExample.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import styled from 'styled-components'
3 |
4 | import './App.css'
5 |
6 | const Button = styled.button`
7 | background-color: white;
8 | color: navy;
9 | width: 80px;
10 | height: 40px;
11 | `
12 |
13 | const H1 = styled.h1`
14 | font-size: 36px;
15 | color: Olive;
16 | `
17 | const Button2 = styled(Button)`
18 | background-color: silver;
19 | `
20 |
21 | function ControlledInputBox (props) {
22 | const { handleInputChange, textBoxValue, errorShowFlag } = props
23 |
24 | return (
25 | <>
26 |
27 | {errorShowFlag && from browser DOM
20 | // and render this new
5 |
6 | 2nd step: Run npm start to run the application
7 |
8 | 3rd step: Goto to browser and type localhost:3000
9 |
10 | */
11 |
12 | import React from 'react'
13 | import logo from './logo.svg'
14 | import './App.css'
15 |
16 | class MyComponent extends React.Component {
17 | render () {
18 | return (
19 |
-
30 | {
31 | cityArray.map((city) =>
- {city} ) 32 | } 33 |
{this.props.name}
35 |-
114 | {cityArray.map(city => (
115 |
-
120 | {city}
121 |
122 | X 123 | 124 |
125 | ))}
126 |
{heading}
143 | } 144 | 145 | function App () { 146 | const showSite = true 147 | 148 | if (showSite) { 149 | return ( 150 |
151 |
154 | )
155 | } else {
156 | return this number is going to change in three second: 21 | 22 | {this.state.number} 23 | 24 |
25 |-
129 | {cityArray.map(city => (
130 |
-
135 | {city}
136 |
137 | X 138 | 139 |
140 | ))}
141 |
{heading}
158 | } 159 | 160 | function App () { 161 | const showSite = true 162 | 163 | if (showSite) { 164 | return ( 165 |
166 |
169 | )
170 | } else {
171 | return HELLO WORLD
6 | } 7 | 8 | function ComponentSlogan() { 9 | returnPAKISTAN ZINDABAD
10 | } 11 | 12 | 13 | class App extends Component { 14 | state = { 15 | number: 0, 16 | } 17 | 18 | componentDidMount() { 19 | //after 3 second this setTimeout will remove-
108 | {cityArray.map(city => (
109 |
-
114 | {city}
115 |
116 | X 117 | 118 |
119 | ))}
120 |
{heading}
137 | } 138 | 139 | function App () { 140 | const showSite = true 141 | const cityArray = ['Karachi', 'Lahore', 'Peshawar', 'Quetta'] 142 | 143 | if (showSite) { 144 | return ( 145 |
146 |
149 | )
150 | } else {
151 | return
20 |
22 | )
23 | }
24 | }
25 |
26 | function App () {
27 | return (
28 | Hello world
21 | instead of
36 |
37 |
40 | )
41 | }
42 | }
43 |
44 | class City extends Component {
45 |
46 | render() {
47 | const cityArray = this.props.cityArray
48 | // you can also do like this
49 | //const { cityArray } = this.props
50 |
51 | return (
52 | //You can also use
instead of
53 |
54 |
61 | )
62 | }
63 | }
64 | export default App;
65 |
66 |
67 |
68 | // ****************************************************************
69 | //
70 | // setState functional update approach
71 | //
72 | // ****************************************************************
73 |
74 | // import React, { Component, Fragment } from 'react';
75 |
76 | // class App extends Component {
77 | // state = {
78 | // cityArray1: ["Karachi", "Lahore", "Peshawer", "Quetta"],
79 | // cityArray2: ["Hyderabad", "Multan", "Gawader", "Mardan"],
80 | // number: 0,
81 | // }
82 |
83 | // render() {
84 |
85 | // setTimeout(() => {
86 | // // setState Functional update approach
87 | // this.setState((prevState) => (
88 | // {
89 | // cityArray1: ["Pakistan", "USA", "Russia", "UK"],
90 | // number: prevState.number + 1
91 | // })
92 | // )
93 | // }, 3000)
94 |
95 | // return (
96 | // //You can also use
-
55 | {
56 | cityArray.map((city) =>
- {city} ) 57 | } 58 |
{this.props.name}
60 | instead of
97 | //
98 | //
109 | // )
110 | // }
111 | // }
112 |
113 | // class City extends Component {
114 |
115 | // render() {
116 | // const { cityArray, number, name } = this.props
117 | // // you can also do like this, but above is best practice
118 | // //const cityArray = this.props.cityArray
119 | // //const number = this.props.number
120 |
121 | // return (
122 | // //You can also use
instead of
123 | //
124 | //
132 | // )
133 | // }
134 | // }
135 | // export default App;
136 |
--------------------------------------------------------------------------------
/shouldComponentUpdateExample.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import styled from 'styled-components'
3 |
4 | import './App.css'
5 |
6 | const Button = styled.button`
7 | background-color: white;
8 | color: navy;
9 | width: 80px;
10 | height: 40px;
11 | `
12 |
13 | const H1 = styled.h1`
14 | font-size: 36px;
15 | color: Olive;
16 | `
17 | const Button2 = styled(Button)`
18 | background-color: silver;
19 | `
20 |
21 | function ControlledInputBox (props) {
22 | const { handleInputChange, textBoxValue, errorShowFlag } = props
23 |
24 | return (
25 | <>
26 |
27 | {errorShowFlag &&
25 |
27 |
28 | 29 |
30 |
31 | );
32 | }
33 | }
34 |
35 | export default App;
36 |
--------------------------------------------------------------------------------
/stateWithChangeHandlerExample/Output.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import typeOfProps from 'prop-types'
3 |
4 | // **************************************************************************
5 | //
6 | // To use 'prop-types' you have to install prop-types
7 | //
8 | // npm install prop-types --save
9 | //
10 | // **************************************************************************
11 |
12 |
13 |
14 | // class Output extends Component {
15 | const Output = (props) => {
16 | // render() {
17 | //const name = this.props.name
18 | const { name, var2 } = props
19 |
20 | return (
21 |
-
125 | // {
126 | // cityArray.map((city) =>
- {city} ) 127 | // } 128 | //
{name}
130 | //{number}
131 | //-
130 | {cityArray.map(city => (
131 |
-
136 | {city}
137 |
138 | X 139 | 140 |
141 | ))}
142 |
{heading}
159 | } 160 | 161 | function App () { 162 | const showSite = true 163 | 164 | if (showSite) { 165 | return ( 166 |
167 |
170 | )
171 | } else {
172 | return 27 |
28 | 29 |
{`Output : ${name}, ${var2}`}
22 | 23 | ); 24 | } 25 | // } 26 | 27 | 28 | Output.propTypes = { 29 | name: typeOfProps.oneOfType([typeOfProps.string, typeOfProps.bool]).isRequired, 30 | var2: typeOfProps.string, 31 | 32 | } 33 | 34 | export default Output; 35 | -------------------------------------------------------------------------------- /stateWithChangeHandlerExample/UserInput.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | 4 | class UserInput extends React.Component { 5 | //function UserInput(props) { 6 | 7 | state = { 8 | txt: '' 9 | } 10 | 11 | handleSubmit = () => { 12 | const { changeValue } = this.props 13 | const val = document.getElementById("userinp").value 14 | changeValue(val) 15 | } 16 | 17 | handleChange = (e) => { 18 | //***************************************************************************** 19 | // 20 | // these below commented lines are for the user input validation 21 | // these below lines will not let user input any character other then numbers 22 | // 23 | //***************************************************************************** 24 | // 25 | // if (isNaN(e.target.value)) { 26 | // console.log("only numbers") 27 | // } else { 28 | // this.setState({ txt: e.target.value }) 29 | // } 30 | 31 | //***************************************************************************** 32 | // 33 | // if you uncomment following line then first comment below line 34 | // 35 | //***************************************************************************** 36 | 37 | this.setState({ txt: e.target.value }) 38 | } 39 | render() { 40 | // const { changeValue, children } = this.props 41 | 42 | return ( 43 |
44 |
51 |
52 |
55 |
56 |
57 | );
58 | }
59 | }
60 |
61 | export default UserInput;
62 |
--------------------------------------------------------------------------------