Skip to content

Commit 131eaa8

Browse files
alesanchezralesanchezr
committed
added video tutorials
1 parent c68b835 commit 131eaa8

File tree

21 files changed

+293
-3
lines changed

21 files changed

+293
-3
lines changed

‎bc.json‎

Lines changed: 213 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,220 @@
11
{
2+
"port": 3000,
3+
"address": "localhost",
4+
"editor": "gitpod",
5+
"outputPath": "./.breathecode/dist",
6+
"publicPath": "/preview",
7+
"grading": "isolated",
8+
"ignoreRegex": null,
9+
"webpack_template": "/home/gitpod/.nvm/versions/node/v12.16.2/lib/node_modules/breathecode-cli/src/utils/config/compiler/template.html",
10+
"disable_grading": false,
11+
"onCompilerSuccess": "open-browser",
12+
"language": "react",
13+
"compiler": "webpack",
14+
"tester": "jest",
15+
"actions": [
16+
"build",
17+
"test",
18+
"reset"
19+
],
220
"title": "Learn React.js Interactively",
321
"preview": "https://github.com/4GeeksAcademy/react-tutorial-exercises/blob/master/preview.png?raw=true",
422
"description": "Learn and practice React.js using hooks, interactive tutorial with dozens of react exercises, get instant feedback with automatic grading and watch video solutions afterwards.",
5-
"language": "react",
623
"duration": 8,
724
"difficulty": "easy",
825
"video-solutions": false,
9-
"graded": true
10-
}
26+
"graded": true,
27+
"session": 8312244737946104000,
28+
"exercisesPath": "./exercises",
29+
"exercises": [
30+
{
31+
"slug": "01-welcome",
32+
"title": "01-welcome",
33+
"path": "exercises/01-welcome",
34+
"translations": [
35+
"es",
36+
"us"
37+
]
38+
},
39+
{
40+
"slug": "01.1-hello-world",
41+
"title": "01.1-hello-world",
42+
"path": "exercises/01.1-hello-world",
43+
"translations": [
44+
"es",
45+
"us"
46+
]
47+
},
48+
{
49+
"slug": "01.2-hello-jsx",
50+
"title": "01.2-hello-jsx",
51+
"path": "exercises/01.2-hello-jsx",
52+
"translations": [
53+
"es",
54+
"us"
55+
]
56+
},
57+
{
58+
"slug": "01.3-rendering-from-objects",
59+
"title": "01.3-rendering-from-objects",
60+
"path": "exercises/01.3-rendering-from-objects",
61+
"translations": [
62+
"es",
63+
"us"
64+
]
65+
},
66+
{
67+
"slug": "01.4-building-a-layout",
68+
"title": "01.4-building-a-layout",
69+
"path": "exercises/01.4-building-a-layout",
70+
"translations": [
71+
"es",
72+
"us"
73+
]
74+
},
75+
{
76+
"slug": "01.5-building-html-from-arrays",
77+
"title": "01.5-building-html-from-arrays",
78+
"path": "exercises/01.5-building-html-from-arrays",
79+
"translations": [
80+
"es",
81+
"us"
82+
]
83+
},
84+
{
85+
"slug": "02-maping-array-to-li",
86+
"title": "02-maping-array-to-li",
87+
"path": "exercises/02-maping-array-to-li",
88+
"translations": [
89+
"es",
90+
"us"
91+
]
92+
},
93+
{
94+
"slug": "02.1-maping-array-objects-to-li",
95+
"title": "02.1-maping-array-objects-to-li",
96+
"path": "exercises/02.1-maping-array-objects-to-li",
97+
"translations": [
98+
"es",
99+
"us"
100+
]
101+
},
102+
{
103+
"slug": "02.2-maping-array-of-objects-to-li",
104+
"title": "02.2-maping-array-of-objects-to-li",
105+
"path": "exercises/02.2-maping-array-of-objects-to-li",
106+
"translations": [
107+
"es",
108+
"us"
109+
]
110+
},
111+
{
112+
"slug": "03-render-with-functions",
113+
"title": "03-render-with-functions",
114+
"path": "exercises/03-render-with-functions",
115+
"translations": [
116+
"es",
117+
"us"
118+
]
119+
},
120+
{
121+
"slug": "03.1-your-first-component",
122+
"title": "03.1-your-first-component",
123+
"path": "exercises/03.1-your-first-component",
124+
"translations": [
125+
"es",
126+
"us"
127+
]
128+
},
129+
{
130+
"slug": "03.2-a-real-component",
131+
"title": "03.2-a-real-component",
132+
"path": "exercises/03.2-a-real-component",
133+
"translations": [
134+
"es",
135+
"us"
136+
]
137+
},
138+
{
139+
"slug": "03.3-component-properties",
140+
"title": "03.3-component-properties",
141+
"path": "exercises/03.3-component-properties",
142+
"translations": [
143+
"es",
144+
"us"
145+
]
146+
},
147+
{
148+
"slug": "03.4-jumbotron",
149+
"title": "03.4-jumbotron",
150+
"path": "exercises/03.4-jumbotron",
151+
"translations": [
152+
"es",
153+
"us"
154+
]
155+
},
156+
{
157+
"slug": "03.5-alert-component",
158+
"title": "03.5-alert-component",
159+
"path": "exercises/03.5-alert-component",
160+
"translations": [
161+
"es",
162+
"us"
163+
]
164+
},
165+
{
166+
"slug": "04-conditional-rendering",
167+
"title": "04-conditional-rendering",
168+
"path": "exercises/04-conditional-rendering",
169+
"translations": [
170+
"es",
171+
"us"
172+
]
173+
},
174+
{
175+
"slug": "04.1-conditional-rendering",
176+
"title": "04.1-conditional-rendering",
177+
"path": "exercises/04.1-conditional-rendering",
178+
"translations": [
179+
"es",
180+
"us"
181+
]
182+
},
183+
{
184+
"slug": "04.2-conditional-rendering-ii",
185+
"title": "04.2-conditional-rendering-ii",
186+
"path": "exercises/04.2-conditional-rendering-ii",
187+
"translations": [
188+
"es",
189+
"us"
190+
]
191+
},
192+
{
193+
"slug": "05-adding-styles",
194+
"title": "05-adding-styles",
195+
"path": "exercises/05-adding-styles",
196+
"translations": [
197+
"es",
198+
"us"
199+
]
200+
},
201+
{
202+
"slug": "05.1-second-styles",
203+
"title": "05.1-second-styles",
204+
"path": "exercises/05.1-second-styles",
205+
"translations": [
206+
"es",
207+
"us"
208+
]
209+
},
210+
{
211+
"slug": "06-listening-to-events",
212+
"title": "06-listening-to-events",
213+
"path": "exercises/06-listening-to-events",
214+
"translations": [
215+
"es",
216+
"us"
217+
]
218+
}
219+
]
220+
}

‎exercises/01.1-hello-world/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
---
2+
video: "https://www.youtube.com/watch?v=Qdu6GSew8xM"
3+
---
4+
15
# `01.1` Hello World
26

37
Today's biggest pain for front-end developers is **working with the DOM** to create dynamic HTML, something that React.js does best.

‎exercises/01.2-hello-jsx/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
---
2+
video: "https://www.youtube.com/watch?v=Wp8hcH8jScQ"
3+
---
4+
15
# `01.2` Hello JSX
26

37
JSX also allows you to easily include variables into your HTML, for example, lets assume that you have the following variable available:

‎exercises/01.3-rendering-from-objects/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
---
2+
video: "https://www.youtube.com/watch?v=Z9gzZoYM4pY"
3+
---
4+
15
# `01.3` Rendering from objects
26

37
Now lets use a more complex variable to render our HTML, let's say we have the following JS Object containing a customer information:

‎exercises/01.4-building-a-layout/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
---
2+
video: "https://www.youtube.com/watch?v=5Z12IWd4CI8"
3+
---
4+
15
# `01.4` Building a layout
26

37
Let's practice a little bit more about using JSX for creating HTML.

‎exercises/01.5-building-html-from-arrays/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
---
2+
video: "https://www.youtube.com/watch?v=mFPtdyHeKVM"
3+
---
4+
15
# `01.5` Building from arrays
26

37
With JSX you can also create **arrays** of HTML items. E.g: If we have an array of `<li>` we can include all of them into the document at once like this:

‎exercises/02-maping-array-to-li/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
---
2+
video: "https://www.youtube.com/watch?v=xe-O1jhnVxk"
3+
---
4+
15
# `02` Mapping array to `<li>`
26

37
Now let's build an array dynamically. Let's say you have an array of animals:

‎exercises/02.1-maping-array-objects-to-li/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
---
2+
video: "https://www.youtube.com/watch?v=Gw6i3BWzwNY"
3+
---
4+
15
# `02.1` Mapping array to `<li>`
26

37
Using the knowledge you have from the previous example, now lets fix the map function again but starting from an array of objects.

‎exercises/02.2-maping-array-of-objects-to-li/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
---
2+
video: "https://www.youtube.com/watch?v=-B0KJP1tzXE"
3+
---
4+
15
# `02.2` Mapping function
26

37
When you are mapping an array of data to convert it into an array of HTML you have to specify a **"mapping function"** that will receive each item from the original array, transform it and insert it into the new array. E.g:

‎exercises/03-render-with-functions/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
---
2+
video: "https://www.youtube.com/watch?v=EdpPIo_JNVc"
3+
---
4+
15
# `03` Render with Functions
26

37
JSX allows using functions to render HTML, and that is awesome!

0 commit comments

Comments
 (0)