├── README.md
├── section-three
├── main2.css
├── main.css
├── index3.html
├── index.html
├── index4.html
└── index2.html
├── section-eight
├── boilerplate.html
├── form.html
└── index.html
├── section-five
├── boilerplate.html
├── index.html
├── index2.html
└── index3.html
├── section-nine
├── boilerplate.html
├── fetch.html
└── axios.html
├── section-seven
├── boilerplate.html
├── index.html
└── index2.html
├── section-six
├── boilerplate.html
├── index.html
├── index4.html
├── index3.html
└── index2.html
├── state-project
├── boilerplate.html
└── index.html
├── section-one
├── index.html
├── index6.html
├── index5.html
├── index4.html
├── index3.html
└── index2.html
├── section-two
├── index2.html
└── index.html
├── section-four
├── index2.html
└── index.html
└── capstone-project-one
├── index.html
├── index3.html
├── index2.html
└── index4.html
/README.md:
--------------------------------------------------------------------------------
1 | # Hello React
2 | Hello React Course Code Repository
3 |
4 | Take the course at helloreact.io
5 |
--------------------------------------------------------------------------------
/section-three/main2.css:
--------------------------------------------------------------------------------
1 | .circle {
2 | width: 100px;
3 | height: 100px;
4 | background: red;
5 | border-radius: 50%;
6 | }
7 |
8 | .square {
9 | width: 100px;
10 | height: 100px;
11 | background: red;
12 | }
13 |
14 | .rectangle {
15 | width: 200px;
16 | height: 100px;
17 | background: red;
18 | }
19 |
--------------------------------------------------------------------------------
/section-three/main.css:
--------------------------------------------------------------------------------
1 | .red {
2 | height: 50px;
3 | width: 150px;
4 | background-color: red;
5 | }
6 |
7 | .orange {
8 | height: 50px;
9 | width: 150px;
10 | background-color: orange;
11 | }
12 |
13 | .yellow {
14 | height: 50px;
15 | width: 150px;
16 | background-color: yellow;
17 | }
18 |
19 | .green {
20 | height: 50px;
21 | width: 150px;
22 | background-color: green;
23 | }
24 |
25 | .blue {
26 | height: 50px;
27 | width: 150px;
28 | background-color: blue;
29 | }
30 |
31 | .indigo {
32 | height: 50px;
33 | width: 150px;
34 | background-color: indigo;
35 | }
36 |
37 | .violet {
38 | height: 50px;
39 | width: 150px;
40 | background-color: violet;
41 | }
42 |
--------------------------------------------------------------------------------
/section-eight/boilerplate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/section-five/boilerplate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/section-nine/boilerplate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/section-seven/boilerplate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/section-six/boilerplate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/state-project/boilerplate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/section-one/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Let's React!
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/section-one/index6.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Let's React!
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/section-one/index5.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Let's React!
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/section-one/index4.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Let's React!
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/section-five/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/section-one/index3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Let's React!
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/section-five/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Class Components Props
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/section-seven/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/section-seven/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/section-two/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Class Components
14 |
15 |
16 | React has not rendered yet
17 |
18 |
68 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/section-three/index3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Class Components
15 |
16 |
17 | React has not rendered yet
18 |
19 |
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/section-eight/form.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/section-three/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Styling Components
15 |
16 |
17 | React has not rendered yet
18 |
19 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/section-one/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Let's React!
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/section-six/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
58 |
59 |
60 |
61 |
--------------------------------------------------------------------------------
/section-nine/fetch.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/section-six/index4.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Styling Components
14 |
15 |
16 | React has not rendered yet
17 |
18 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/section-six/index3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/section-two/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Stateless Functional Components
14 |
15 |
16 | React has not rendered yet
17 |
18 |
90 |
91 |
92 |
--------------------------------------------------------------------------------
/section-three/index4.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Class Components
14 |
15 |
16 | Render React Here
17 |
18 | // CREATE OUR FIRST CLASS COMPONENT
19 | class Shapes extends React.Component {
20 | render() {
21 | return(
22 | Circle, Square, Rectangle
23 | );
24 | }
25 | }
26 |
27 | class Circle extends React.Component {
28 | render() {
29 | var circleStyle = {
30 | width: 100,
31 | height: 100,
32 | background: "red",
33 | borderRadius: "50%"
34 | }
35 | return(
36 | Circle
37 | );
38 | }
39 | }
40 |
41 | class Square extends React.Component {
42 | render() {
43 | var squareStyle = {
44 | width: 100,
45 | height: 100,
46 | background: "red"
47 | }
48 | return(
49 | Square
50 | );
51 | }
52 | }
53 |
54 | class Rectangle extends React.Component {
55 | render() {
56 | var rectangleStyle = {
57 | width: 200,
58 | height: 100,
59 | background: "red"
60 | }
61 | return(
62 | Rectangle
63 | );
64 | }
65 | }
66 |
67 | // CHALLENGE
68 | // CREATE CLASS COMPONENTS FOR CIRCLE SQUARE AND RECTANGLE
69 | // RENDER TO THE DOM WITHIN A PARENT DIV TAG
70 |
71 | ReactDOM.render(
72 | // REACT WHAT, REACT WHERE
73 |
74 |
,
78 | document.getElementById("app")
79 | );
80 |
81 |
82 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/section-four/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Class Components
14 |
15 |
16 | Render React Here
17 |
18 |
84 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/section-eight/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
84 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/section-six/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
67 |
68 |
69 |
70 |
--------------------------------------------------------------------------------
/section-nine/axios.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
17 |
18 |
19 |
20 |
21 | React has not rendered yet
22 |
23 |
24 |
78 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/section-three/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Styling Components
14 |
15 |
16 | React has not rendered yet
17 |
18 |
112 |
113 |
114 |
--------------------------------------------------------------------------------
/state-project/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Boiler Plate Code
15 |
16 |
17 |
18 |
19 | React has not rendered yet
20 |
21 |
22 |
88 |
89 |
90 |
91 |
--------------------------------------------------------------------------------
/section-four/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Styling Components
14 |
15 |
16 | React has not rendered yet
17 |
18 |
118 |
119 |
120 |
--------------------------------------------------------------------------------
/capstone-project-one/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | FriendLy
16 |
17 |
18 | React has not rendered yet
19 |
20 |
110 |
111 |
112 |
113 |
--------------------------------------------------------------------------------
/section-five/index3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Styling Components
14 |
15 |
16 | React has not rendered yet
17 |
18 |
142 |
143 |
144 |
--------------------------------------------------------------------------------
/capstone-project-one/index3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | FriendLy
16 |
17 |
18 | React has not rendered yet
19 |
20 |
148 |
149 |
150 |
151 |
--------------------------------------------------------------------------------
/capstone-project-one/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | FriendLy
16 |
17 |
18 | React has not rendered yet
19 |
20 |
171 |
172 |
173 |
174 |
--------------------------------------------------------------------------------
/capstone-project-one/index4.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | FriendLy
16 |
17 |
18 | React has not rendered yet
19 |
20 |
181 |
182 |
183 |
184 |
--------------------------------------------------------------------------------