├── README.md ├── session_1 ├── README.md ├── index.html └── sample.jpeg ├── session_10 └── README.md ├── session_11 └── README.md ├── session_12 └── README.md ├── session_2 ├── README.md ├── aparat.html ├── form.html ├── index.html └── style.css ├── session_3 ├── README.md ├── cat.jpg ├── email.html ├── emailStyle.css ├── index.html ├── login.css ├── login.html ├── position.html └── style.css ├── session_5 ├── README.md ├── dataType.html ├── event.html ├── function.html └── index.html ├── session_6 ├── README.md ├── comparison.html └── loop.html ├── session_7 ├── README.md └── index.html ├── session_8 └── README.md └── session_9 └── README.md /README.md: -------------------------------------------------------------------------------- 1 | # React/React Native Course 2 | 3 | ## What you'll learn 4 | 5 | * Introduction to HTML5, CSS3, Javascript, and JSX 6 | * Web Development using React from scratch 7 | * Understand the terminology and concepts of Redux and React-Redux 8 | * Connect to the Server and call REST APIs using axios 9 | * Building router for a real-world application using React-Router 10 | * Introduction to iOS and Android App Development using React Native 11 | * Introduction to Cross-platform Desktop App Development using React and Electron 12 | 13 | ## Course Content 14 | 15 | |#Session| Topics | Links | 16 | |:-----:|----------------------------------|------| 17 | | 1 | Introduction to Web Development and Git | [Link](https://github.com/zahrakbri/react-class/blob/Session-1/) | 18 | | 2 | Introduction to HTML | [Link](https://github.com/zahrakbri/react-class/blob/Session-2/) | 19 | | 3 | Introduction to CSS | [Link](https://github.com/zahrakbri/react-class/blob/Session-3/) | 20 | | 4 | Introduction to Flexbox | [Link](https://github.com/zahrakbri/react-class/blob/Session-4/) | 21 | | 5 | Introduction to JS | [Link](https://github.com/zahrakbri/react-class/blob/Session-5/) | 22 | | 6 | Introduction to JS | [Link](https://github.com/zahrakbri/react-class/blob/Session-6/) | 23 | 24 | ## Submit Homeworks Guideline 25 | 26 | * Create one repoitory for all homeworks 27 | * Create a directory for each Exc. and name it using the following format: 28 | * `HW-` for example `HW10.2` for homework 2 in session 10 29 | * Push all codes/links/documents on the mentioned directory 30 | 31 | 32 | ## Questions/Froum 33 | 34 | * telegram: @UTech_Course_Support 35 | * If you have any question/issue, feel free to send an email to zahrakabiri@utech-academy.ir 36 | * You can join to [this course telegram channel](https://t.me/reactcourse) to follow course announcements and materials -------------------------------------------------------------------------------- /session_1/README.md: -------------------------------------------------------------------------------- 1 | # Session 1 - Introduction to Web Development 2 | 3 | ## Goals 4 | * Familiar with HTML 5 | 6 | ## Topics 7 | 8 | * HTML Tags 9 | * Review of useful HTML tags: 10 | * `` 11 | * `` 12 | * `` 13 | * `<body>` 14 | * `<p>` 15 | * `<div>` 16 | * `<span>` 17 | * `<img>` 18 | * `<table>` 19 | * `<ol>` 20 | * `<ul>` 21 | * `<hr>` 22 | * `<br>` 23 | * HTML Attributes 24 | * style 25 | * src 26 | * href 27 | * width 28 | * height 29 | 30 | ## Useful linkes 31 | - [HTML5 Tutorial](https://www.w3schools.com/html/default.asp) -------------------------------------------------------------------------------- /session_1/index.html: -------------------------------------------------------------------------------- 1 | <html> 2 | <head> 3 | <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 4 | <title>learn html 5 | 25 | 26 | 27 | 28 | 29 |

first heading

30 |

first heading

31 |

first heading

32 |

first heading

33 |
first heading
34 |
first heading
35 |

test fnjrgnvjfvn bgh test fnjrgnvjfvn bgh test fnjrgnvjfvn bgh
36 | test fnjrgnvjfvn bgh test fnjrgnvjfvn bgh test fnjrgnvjfvn bgh

37 |
38 | test fnjrgnvjfvn bgh 39 | test fnjrgnvjfvn bgh 40 | 44 | google 45 | 46 | 49 |
50 | pic 51 | اذر 52 |
53 | 54 | cloud 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |
idnamecountry
1elhamIR
1farnooshIR
73 | 74 |
    75 |
  1. milk
    2. 76 |
  2. coffee
    3. 77 |
  3. tea
    4. 78 |
79 | 84 | 85 | -------------------------------------------------------------------------------- /session_1/sample.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zahrakbri/react-class/ac3bc87251d71c3c806bc13415837261581e6310/session_1/sample.jpeg -------------------------------------------------------------------------------- /session_10/README.md: -------------------------------------------------------------------------------- 1 | # Session 10 - Introduction to ReactJs 2 | ## Goals 3 | * Familiar with React 4 | 5 | ## Topics 6 | * react-router 7 | * LifeCycle 8 | * Axios 9 | * localStorage 10 | * Sending a state from child to parent 11 | 12 | 13 | ## Useful linkes 14 | - [ًReact docs](https://reactjs.org/docs/getting-started.html) 15 | - [react-router](https://reacttraining.com/react-router/web/guides/quick-start) 16 | - [Course project](https://github.com/zahrakbri/react-project-2) -------------------------------------------------------------------------------- /session_11/README.md: -------------------------------------------------------------------------------- 1 | # Session 11 - Introduction to Redux 2 | ## Goals 3 | * Familiar with Redux 4 | 5 | ## Topics 6 | * Main Concepts 7 | * Action 8 | * Reducer 9 | * Store 10 | * Presentational Component 11 | * Container Component 12 | * mapStateToProps 13 | * mapDispatchToProps 14 | 15 | 16 | ## Useful linkes 17 | - [ًRedux docs](https://redux.js.org/introduction/getting-started) -------------------------------------------------------------------------------- /session_12/README.md: -------------------------------------------------------------------------------- 1 | # Session 12 - Introduction to Redux 2 | ## Goals 3 | * Familiar with Redux 4 | 5 | ## Topics 6 | * Main Concepts 7 | * Action 8 | * Reducer 9 | * Store 10 | * Presentational Component 11 | * Container Component 12 | * mapStateToProps 13 | * mapDispatchToProps 14 | 15 | 16 | ## Useful linkes 17 | - [ًRedux docs](https://redux.js.org/introduction/getting-started) -------------------------------------------------------------------------------- /session_2/README.md: -------------------------------------------------------------------------------- 1 | # Session 2 - Introduction to Web Development 2 | ## Goals 3 | * Familiar with HTML 4 | 5 | ## Topics 6 | 7 | * HTML Tags 8 | * Review of useful HTML tags: 9 | * `
` 10 | * `` 11 | * ` 42 | 43 | 44 |
45 | 46 | -------------------------------------------------------------------------------- /session_2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 63 | 64 | 65 |
66 |
67 |

68 | Forgot Password 69 |

70 |

71 | Please enter your email and we will send you 72 | a new password. 73 |

74 |
75 | 76 |
77 | 81 | 82 | 85 | 89 | Return to Login Screen 90 | 91 |
92 |
93 | 94 | 95 | -------------------------------------------------------------------------------- /session_2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #f7f7f7; 3 | padding: 30px; 4 | direction: rtl; 5 | } 6 | 7 | .container { 8 | background-color: #fff; 9 | border: 1px solid #dedede; 10 | height: calc(100vh - 8px - 30px - 30px - 8px - 2px - 40px); 11 | padding: 20px; 12 | border-radius: 4px; 13 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 14 | } 15 | 16 | .container>div { 17 | background-color: #75a0d8; 18 | border-radius: 4px; 19 | padding: 20px; 20 | display: flex; 21 | flex-direction: row; 22 | justify-content: space-between; 23 | align-items: center; 24 | } 25 | 26 | 27 | 28 | .help-box { 29 | flex-grow: 1; 30 | background-color: aqua 31 | } 32 | 33 | .infograph { 34 | background-color: #fff; 35 | 36 | } 37 | 38 | .twin-box { 39 | 40 | } 41 | 42 | .overflow { 43 | height: 100px; 44 | overflow: auto; 45 | background-color: pink; 46 | /* opacity: 0.5; */ 47 | background-color: rgba(0, 255, 0, 0.5); 48 | } 49 | 50 | button:hover { 51 | background-color: green; 52 | color: #fff; 53 | } 54 | 55 | a:visited { 56 | color: yellow; 57 | background-color: red 58 | } 59 | 60 | a:active { 61 | background-color: blue 62 | } 63 | 64 | a:link { 65 | color: red; 66 | background-color: yellow 67 | } 68 | 69 | .container:hover { 70 | opacity: 0.5 71 | } 72 | 73 | input:focus { 74 | border-color: green 75 | } 76 | 77 | @media only screen and (min-width: 480px) { 78 | body { 79 | background-color: green 80 | } 81 | } 82 | 83 | @media only screen and (min-width: 700px) { 84 | body { 85 | background-color: black; 86 | } 87 | } 88 | 89 | -------------------------------------------------------------------------------- /session_3/README.md: -------------------------------------------------------------------------------- 1 | # Session 3 - Introduction to CSS 2 | 3 | ## Goals 4 | 5 | * Familiar with CSS 6 | * Familiar with Responsive Web Design 7 | 8 | ## Topics 9 | 10 | * CSS Tutorial 11 | * syntax 12 | * How to insert a style sheet 13 | * Colors 14 | * Backgrounds 15 | * Borders 16 | * Margin and padding 17 | * Height and Width 18 | * Text 19 | * Icons 20 | * display 21 | * position 22 | * Overflow 23 | * float 24 | * Pseudo-classes 25 | * Opacity 26 | * Gradients 27 | * shadow 28 | 29 | ## Useful linkes 30 | - [CSS Tutorial](https://www.w3schools.com/css/default.asp) 31 | - [Class Source Code](https://github.com/zahrakbri/react-class/blob/Session-3/) 32 | 33 | ## Exercises 34 | 35 | 36 | ### Ex. 3.1 37 | 38 | **Problem Def.** 39 | 40 | Design the [aparat login page](https://www.aparat.com/authentication) 41 | 42 | **Acceptance Criteria:** 43 | * As similar as possible 44 | * Submit your homework based on [Submit Homework Guideline Document](https://github.com/zahrakbri/react-class#submit-homeworks-guideline) 45 | 46 | **Nice to Do:** 47 | * Responsive design for each sreen size -------------------------------------------------------------------------------- /session_3/cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zahrakbri/react-class/ac3bc87251d71c3c806bc13415837261581e6310/session_3/cat.jpg -------------------------------------------------------------------------------- /session_3/email.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

aliBaba

7 |
8 |

active..

9 |

10 | We’re glad you’re here, Sanaz Bidad
11 | Click on the below button to start using Hengam. (Just confirming you’re you.) 12 |

13 |
14 | link 15 |
16 |

17 | thank you
18 | zahra 19 |

20 |
21 |

follow us twitter | linkedin

22 | 23 | -------------------------------------------------------------------------------- /session_3/emailStyle.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #f7f7f7; 3 | } 4 | 5 | body h2 { 6 | text-align: center 7 | } 8 | 9 | .container { 10 | width: 50%; 11 | margin: auto; 12 | background-color: #fff; 13 | border: 1px solid #ccc; 14 | padding: 40px 90px; 15 | } 16 | 17 | .container h4 { 18 | text-align: center 19 | } 20 | 21 | .button { 22 | background-color: #0cd4a6; 23 | color: #fff; 24 | width: 20%; 25 | text-align: center; 26 | margin: auto; 27 | padding: 10px 15px; 28 | border-radius: 4px; 29 | } -------------------------------------------------------------------------------- /session_3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /session_3/login.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-image: linear-gradient(to right ,#303030, #a6a6a6); 3 | display: flex; 4 | flex-direction: column; 5 | justify-content: center; 6 | align-items: center; 7 | } 8 | 9 | .container { 10 | background-color: gray; 11 | padding: 10px; 12 | border-radius: 5px; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: stretch; 16 | height: 50vh; 17 | justify-content: space-between; 18 | width: 50vw; 19 | } 20 | 21 | .button-container { 22 | display: flex; 23 | flex-direction: row; 24 | justify-content: space-between; 25 | flex-wrap: wrap; 26 | } 27 | 28 | .space-around { 29 | display: flex; 30 | justify-content: space-around; 31 | } 32 | 33 | .space-around div { 34 | display: flex; 35 | flex-direction: row; 36 | align-items: center; 37 | } 38 | 39 | .login-header { 40 | align-self: center; 41 | color: #fff; 42 | text-transform: uppercase; 43 | } 44 | 45 | .input { 46 | padding: 10px 35px; 47 | border-radius: 2px; 48 | border: none; 49 | max-width: 100%; 50 | min-width: 100%; 51 | } 52 | 53 | .login { 54 | background-color: #2c2c2c; 55 | color: white; 56 | padding: 10px 0; 57 | border: none; 58 | } 59 | 60 | .button-container button { 61 | flex-grow: 1; 62 | } 63 | 64 | .m-h-10 { 65 | margin: 0 10px; 66 | } 67 | 68 | i { 69 | position: absolute; 70 | top: 3px; 71 | left: 3px; 72 | } 73 | 74 | .relative { 75 | position: relative; 76 | display: flex; 77 | } -------------------------------------------------------------------------------- /session_3/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 |
11 | person 12 | 13 |
14 | 15 | 16 | 17 | 18 |
19 |
20 | 21 | 22 |
23 | forget password? 24 |
25 | 26 |
27 | 28 | 29 | 30 |
31 |
32 | 33 |

copy right

34 | 35 | 36 | -------------------------------------------------------------------------------- /session_3/position.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 33 | 34 | 35 |

dfghjkl; fghbjnkm

36 |
37 |
38 |
39 |
40 |
41 |

dfghjk

42 |

dfghjk

43 |

dfghjk

44 |

dfghjk

45 |

dfghjk

46 |

dfghjk

47 |

dfghjk

48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /session_3/style.css: -------------------------------------------------------------------------------- 1 | #p1 { 2 | color: rgb(255,0,0); 3 | background-color: aqua 4 | } 5 | .p2 { 6 | color: #bbb; 7 | } 8 | h1, h2 { 9 | color: yellow; 10 | border-style: solid; 11 | border-color: #ab4191; 12 | border-width: 1px; 13 | border: 1px solid red; 14 | border-radius: 50%; 15 | padding: 17px; 16 | margin: 10px auto; 17 | width: 140px; 18 | padding: 1px 8px 20px; 19 | border-color: red blue yellow; 20 | font-size: 10px; 21 | text-align: center; 22 | } 23 | 24 | a { 25 | text-decoration: none; 26 | padding: 5px 15px; 27 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 28 | background-image: linear-gradient(to right, #00fa11 , #18b11e); 29 | color: #fff; 30 | margin: 25px; 31 | border-radius: 4px; 32 | letter-spacing: 14px; 33 | text-decoration: none; 34 | direction: rtl; 35 | font-size: 21px; 36 | font-size: 4em; 37 | font-size: 10vw; 38 | font-weight: bold; 39 | font-weight: 700; 40 | } 41 | 42 | /* body { 43 | background-image: url("cat.jpg") 44 | background-size: cover; 45 | background-repeat: no-repeat; 46 | } */ 47 | 48 | .input { 49 | position: relative; 50 | } 51 | 52 | .input input { 53 | padding: 5px 10px 5px 30px; 54 | } 55 | 56 | .icon-container { 57 | position: absolute; 58 | left: 3px; 59 | top: 1px; 60 | border-right: 1px solid; 61 | } 62 | 63 | .icon-container i { 64 | font-size: 10px !important 65 | } 66 | 67 | .input>p { 68 | color: red; 69 | cursor: pointer; 70 | } 71 | 72 | a:hover { 73 | background-color: #ab4191 74 | } 75 | 76 | .input div p:first-child { 77 | border: 1px solid #2dcc2d 78 | } 79 | 80 | .chat { 81 | height: 100px; 82 | background-color: #00fa11 83 | } 84 | .conversation-list { 85 | width: 30%; 86 | height: 100px; 87 | display: inline-block; 88 | background-color: #ab4191 89 | } 90 | .chat-screen { 91 | width: 68%; 92 | height: 100px; 93 | display: inline-block; 94 | background-color: #bbb; 95 | } 96 | 97 | @media only screen and (max-width: 700px) { 98 | body { 99 | background-color: lightgreen 100 | } 101 | } 102 | 103 | @media only screen and (max-width: 450px) { 104 | body { 105 | background-color: #aaa 106 | } 107 | .conversation-list { 108 | width: 100%; 109 | } 110 | .chat-screen { 111 | display: none; 112 | } 113 | } 114 | 115 | -------------------------------------------------------------------------------- /session_5/README.md: -------------------------------------------------------------------------------- 1 | # Session 5 - Introduction to Javascript 2 | 3 | ## Goals 4 | 5 | * Familiar with JS 6 | 7 | ## Topics 8 | 9 | * JS Tutorial 10 | * JavaScript Introduction 11 | * The ` 124 | 125 | -------------------------------------------------------------------------------- /session_5/event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | 12 |

JavaScript

13 |

ghj

14 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /session_5/function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

JavaScript Functions

6 | 7 |

This example calls a function which performs a calculation, and returns the result:

8 | 9 |

10 | 11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /session_5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

JavaScript

9 |

this is a p

10 |

...

11 | 12 | 112 | 113 | -------------------------------------------------------------------------------- /session_6/README.md: -------------------------------------------------------------------------------- 1 | # Session 6 - Introduction to Javascript (Cont.) 2 | ## Goals 3 | * Familiar with JS 4 | 5 | ## Topics 6 | 7 | * JS Tutorial 8 | * Arrays 9 | * Array Methods 10 | * Booleans 11 | * Comparison 12 | * Conditional Statements 13 | * Loop 14 | * Scope 15 | * Let 16 | * Const 17 | * `this` Keyword 18 | * JSON 19 | 20 | 21 | ## Useful linkes 22 | - [Class Source Code](https://github.com/zahrakbri/react-class/blob/Session-6/) 23 | - [Javascript Tutorial](https://www.w3schools.com/js/default.asp) 24 | 25 | ## Exercises 26 | 27 | ### Ex. 2.1 28 | 29 | **Problem Def.** 30 | 31 | Design a [Minroob](https://en.wikipedia.org/wiki/Minesweeper_(video_game)) game. 32 | 33 | **Acceptance Criteria:** 34 | * Design a map of squares using ` 7 | 8 |
9 | 10 | 214 | 215 | 216 | -------------------------------------------------------------------------------- /session_6/loop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

JavaScript

6 | 7 | 8 |
9 | 10 | 11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /session_7/README.md: -------------------------------------------------------------------------------- 1 | # Session 7 - Introduction to Es6 (Cont.) 2 | 3 | ## Goals 4 | 5 | * Familiar with Version Control Softwares and Git 6 | 7 | ## Topics 8 | 9 | * Version Control 10 | * Version Control Principles 11 | * Why we should use Version Control Softwares? 12 | * Git basic commands 13 | * `git pull` 14 | * `git status` 15 | * `git add` 16 | * `git commit` 17 | * `git push` 18 | 19 | ## Useful links 20 | - [Class Source Code](https://github.com/zahrakbri/react-class/blob/Session-1/) 21 | - [GitHub Guides](https://guides.github.com/activities/hello-world/) 22 | - [download](https://git-scm.com/download/win) git and install 23 | 24 | ## Exercises 25 | 26 | ### Ex. 1.1 27 | 28 | **Problem Def.** 29 | 30 | Create your own repository. 31 | 32 | **Acceptance Ceritera:** 33 | * Create a Github Account 34 | * Clone your repository 35 | * Create a file and push it on the repository 36 | * Submit your homework based on [Submit Homework Guideline Document](https://github.com/zahrakbri/react-class#submit-homeworks-guideline) 37 | * Submit the link of your reposity 38 | 39 | 40 | ## Goals 41 | * Familiar with JS 42 | * Familiar with React 43 | 44 | ## Topics 45 | 46 | * JS Tutorial 47 | * Arrow Function 48 | * spread properties 49 | * map 50 | * JavaScript Classes 51 | * JSON 52 | * Installing Nodejs 53 | 54 | 55 | ## Useful linkes 56 | - [Class Source Code](https://github.com/zahrakbri/react-class/blob/Session-7/) 57 | - [Javascript Tutorial](https://www.w3schools.com/js/default.asp) 58 | - [node js](https://nodejs.org/en/) 59 | - [create react app](https://reactjs.org/docs/create-a-new-react-app.html) 60 | - [ًReact docs](https://reactjs.org/docs/getting-started.html) 61 | -------------------------------------------------------------------------------- /session_7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

JavaScript

6 | 7 |

8 | 9 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /session_8/README.md: -------------------------------------------------------------------------------- 1 | # Session 8 - Introduction to ReactJs 2 | ## Goals 3 | * Familiar with React 4 | 5 | ## Topics 6 | * npm 7 | * Create react app 8 | * jsx 9 | * Components and props 10 | * standard js 11 | 12 | 13 | ## Useful linkes 14 | - [Class Source Code](https://github.com/zahrakbri/react-class/blob/Session-5/) 15 | - [ًReact docs](https://reactjs.org/docs/getting-started.html) 16 | - [node js](https://nodejs.org/en/) 17 | - [create react app](https://reactjs.org/docs/create-a-new-react-app.html) 18 | 19 | -------------------------------------------------------------------------------- /session_9/README.md: -------------------------------------------------------------------------------- 1 | # Session 9 - Introduction to ReactJs 2 | ## Goals 3 | * Familiar with React 4 | 5 | ## Topics 6 | * State and Lifecycle 7 | * Handling Events 8 | * Forms 9 | * Lifting State Up 10 | * validate.js 11 | * Conditional Rendering 12 | * Lists and Keys 13 | 14 | ## Useful linkes 15 | - [ًReact docs](https://reactjs.org/docs/state-and-lifecycle.html) 16 | - [validate.js docs](https://validatejs.org/) 17 | - [Course project](https://github.com/zahrakbri/react-project-2) --------------------------------------------------------------------------------