Skip to content

Commit a84ae05

Browse files
maxschwarzmuellermaxschwarzmueller
committed
added code & slides
1 parent a1070fd commit a84ae05

File tree

139 files changed

+2515
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

139 files changed

+2515
-0
lines changed

‎code/01-working-with-core-components/App.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { StyleSheet, Text, View, Button } from 'react-native';
2+
3+
export default function App() {
4+
return (
5+
<View style={styles.container}>
6+
<View>
7+
<Text>Another piece of text!</Text>
8+
</View>
9+
<Text>Hello World!</Text>
10+
<Button title='Tap me!' />
11+
</View>
12+
);
13+
}
14+
15+
const styles = StyleSheet.create({
16+
container: {
17+
flex: 1,
18+
backgroundColor: '#fff',
19+
alignItems: 'center',
20+
justifyContent: 'center',
21+
},
22+
});

‎code/01-working-with-core-components/app.json

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"expo": {
3+
"name": "RNCourse",
4+
"slug": "RNCourse",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/icon.png",
8+
"splash": {
9+
"image": "./assets/splash.png",
10+
"resizeMode": "contain",
11+
"backgroundColor": "#ffffff"
12+
},
13+
"updates": {
14+
"fallbackToCacheTimeout": 0
15+
},
16+
"assetBundlePatterns": [
17+
"**/*"
18+
],
19+
"ios": {
20+
"supportsTablet": true
21+
},
22+
"android": {
23+
"adaptiveIcon": {
24+
"foregroundImage": "./assets/adaptive-icon.png",
25+
"backgroundColor": "#FFFFFF"
26+
}
27+
},
28+
"web": {
29+
"favicon": "./assets/favicon.png"
30+
}
31+
}
32+
}

‎code/01-working-with-core-components/assets/adaptive-icon.png

17.1 KB
Loading

‎code/01-working-with-core-components/assets/favicon.png

1.43 KB
Loading

‎code/01-working-with-core-components/assets/icon.png

21.9 KB
Loading

‎code/01-working-with-core-components/assets/splash.png

46.2 KB
Loading

‎code/01-working-with-core-components/babel.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = function(api) {
2+
api.cache(true);
3+
return {
4+
presets: ['babel-preset-expo'],
5+
};
6+
};

‎code/01-working-with-core-components/package.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "rncourse",
3+
"version": "1.0.0",
4+
"main": "node_modules/expo/AppEntry.js",
5+
"scripts": {
6+
"start": "expo start",
7+
"android": "expo start --android",
8+
"ios": "expo start --ios",
9+
"web": "expo start --web",
10+
"eject": "expo eject"
11+
},
12+
"dependencies": {
13+
"expo": "~44.0.0",
14+
"expo-status-bar": "~1.2.0",
15+
"react": "17.0.1",
16+
"react-dom": "17.0.1",
17+
"react-native": "0.64.3",
18+
"react-native-web": "0.17.1"
19+
},
20+
"devDependencies": {
21+
"@babel/core": "^7.12.9"
22+
},
23+
"private": true
24+
}

‎code/02-styling-react-native-apps/App.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { StyleSheet, Text, View, Button } from 'react-native';
2+
3+
export default function App() {
4+
return (
5+
<View style={styles.container}>
6+
<View>
7+
<Text
8+
style={styles.dummyText}
9+
>
10+
Another piece of text!
11+
</Text>
12+
</View>
13+
<Text
14+
style={styles.dummyText}
15+
>
16+
Hello World!
17+
</Text>
18+
<Button title="Tap me!" />
19+
</View>
20+
);
21+
}
22+
23+
const styles = StyleSheet.create({
24+
container: {
25+
flex: 1,
26+
backgroundColor: '#fff',
27+
alignItems: 'center',
28+
justifyContent: 'center',
29+
},
30+
dummyText: {
31+
margin: 16,
32+
padding: 16,
33+
borderWidth: 2,
34+
borderColor: 'blue',
35+
}
36+
});

‎code/02-styling-react-native-apps/app.json

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"expo": {
3+
"name": "RNCourse",
4+
"slug": "RNCourse",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/icon.png",
8+
"splash": {
9+
"image": "./assets/splash.png",
10+
"resizeMode": "contain",
11+
"backgroundColor": "#ffffff"
12+
},
13+
"updates": {
14+
"fallbackToCacheTimeout": 0
15+
},
16+
"assetBundlePatterns": [
17+
"**/*"
18+
],
19+
"ios": {
20+
"supportsTablet": true
21+
},
22+
"android": {
23+
"adaptiveIcon": {
24+
"foregroundImage": "./assets/adaptive-icon.png",
25+
"backgroundColor": "#FFFFFF"
26+
}
27+
},
28+
"web": {
29+
"favicon": "./assets/favicon.png"
30+
}
31+
}
32+
}

‎code/02-styling-react-native-apps/assets/adaptive-icon.png

17.1 KB
Loading

‎code/02-styling-react-native-apps/assets/favicon.png

1.43 KB
Loading

‎code/02-styling-react-native-apps/assets/icon.png

21.9 KB
Loading

‎code/02-styling-react-native-apps/assets/splash.png

46.2 KB
Loading

‎code/02-styling-react-native-apps/babel.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = function(api) {
2+
api.cache(true);
3+
return {
4+
presets: ['babel-preset-expo'],
5+
};
6+
};

‎code/02-styling-react-native-apps/package.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "rncourse",
3+
"version": "1.0.0",
4+
"main": "node_modules/expo/AppEntry.js",
5+
"scripts": {
6+
"start": "expo start",
7+
"android": "expo start --android",
8+
"ios": "expo start --ios",
9+
"web": "expo start --web",
10+
"eject": "expo eject"
11+
},
12+
"dependencies": {
13+
"expo": "~44.0.0",
14+
"expo-status-bar": "~1.2.0",
15+
"react": "17.0.1",
16+
"react-dom": "17.0.1",
17+
"react-native": "0.64.3",
18+
"react-native-web": "0.17.1"
19+
},
20+
"devDependencies": {
21+
"@babel/core": "^7.12.9"
22+
},
23+
"private": true
24+
}

‎code/03-improving-the-layout/App.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
2+
3+
export default function App() {
4+
return (
5+
<View style={styles.appContainer}>
6+
<View style={styles.inputContainer}>
7+
<TextInput style={styles.textInput} placeholder="Your course goal!" />
8+
<Button title="Add Goal" />
9+
</View>
10+
<View style={styles.goalsContainer}>
11+
<Text>List of goals...</Text>
12+
</View>
13+
</View>
14+
);
15+
}
16+
17+
const styles = StyleSheet.create({
18+
appContainer: {
19+
flex: 1,
20+
paddingTop: 50,
21+
paddingHorizontal: 16
22+
},
23+
inputContainer: {
24+
flex: 1,
25+
flexDirection: 'row',
26+
justifyContent: 'space-between',
27+
alignItems: 'center',
28+
marginBottom: 24,
29+
borderBottomWidth: 1,
30+
borderBottomColor: '#cccccc'
31+
},
32+
textInput: {
33+
borderWidth: 1,
34+
borderColor: '#cccccc',
35+
width: '70%',
36+
marginRight: 8,
37+
padding: 8
38+
},
39+
goalsContainer: {
40+
flex: 5
41+
}
42+
});

‎code/03-improving-the-layout/app.json

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"expo": {
3+
"name": "RNCourse",
4+
"slug": "RNCourse",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/icon.png",
8+
"splash": {
9+
"image": "./assets/splash.png",
10+
"resizeMode": "contain",
11+
"backgroundColor": "#ffffff"
12+
},
13+
"updates": {
14+
"fallbackToCacheTimeout": 0
15+
},
16+
"assetBundlePatterns": [
17+
"**/*"
18+
],
19+
"ios": {
20+
"supportsTablet": true
21+
},
22+
"android": {
23+
"adaptiveIcon": {
24+
"foregroundImage": "./assets/adaptive-icon.png",
25+
"backgroundColor": "#FFFFFF"
26+
}
27+
},
28+
"web": {
29+
"favicon": "./assets/favicon.png"
30+
}
31+
}
32+
}

‎code/03-improving-the-layout/assets/adaptive-icon.png

17.1 KB
Loading

‎code/03-improving-the-layout/assets/favicon.png

1.43 KB
Loading

‎code/03-improving-the-layout/assets/icon.png

21.9 KB
Loading

‎code/03-improving-the-layout/assets/splash.png

46.2 KB
Loading

‎code/03-improving-the-layout/babel.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = function(api) {
2+
api.cache(true);
3+
return {
4+
presets: ['babel-preset-expo'],
5+
};
6+
};

‎code/03-improving-the-layout/package.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "rncourse",
3+
"version": "1.0.0",
4+
"main": "node_modules/expo/AppEntry.js",
5+
"scripts": {
6+
"start": "expo start",
7+
"android": "expo start --android",
8+
"ios": "expo start --ios",
9+
"web": "expo start --web",
10+
"eject": "expo eject"
11+
},
12+
"dependencies": {
13+
"expo": "~44.0.0",
14+
"expo-status-bar": "~1.2.0",
15+
"react": "17.0.1",
16+
"react-dom": "17.0.1",
17+
"react-native": "0.64.3",
18+
"react-native-web": "0.17.1"
19+
},
20+
"devDependencies": {
21+
"@babel/core": "^7.12.9"
22+
},
23+
"private": true
24+
}

‎code/04-handling-events/App.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { useState } from 'react';
2+
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
3+
4+
export default function App() {
5+
const [enteredGoalText, setEnteredGoalText] = useState('');
6+
7+
function goalInputHandler(enteredText) {
8+
setEnteredGoalText(enteredText);
9+
}
10+
11+
function addGoalHandler() {
12+
console.log(enteredGoalText);
13+
}
14+
15+
return (
16+
<View style={styles.appContainer}>
17+
<View style={styles.inputContainer}>
18+
<TextInput
19+
style={styles.textInput}
20+
placeholder="Your course goal!"
21+
onChangeText={goalInputHandler}
22+
/>
23+
<Button title="Add Goal" onPress={addGoalHandler} />
24+
</View>
25+
<View style={styles.goalsContainer}>
26+
<Text>List of goals...</Text>
27+
</View>
28+
</View>
29+
);
30+
}
31+
32+
const styles = StyleSheet.create({
33+
appContainer: {
34+
flex: 1,
35+
paddingTop: 50,
36+
paddingHorizontal: 16,
37+
},
38+
inputContainer: {
39+
flex: 1,
40+
flexDirection: 'row',
41+
justifyContent: 'space-between',
42+
alignItems: 'center',
43+
marginBottom: 24,
44+
borderBottomWidth: 1,
45+
borderBottomColor: '#cccccc',
46+
},
47+
textInput: {
48+
borderWidth: 1,
49+
borderColor: '#cccccc',
50+
width: '70%',
51+
marginRight: 8,
52+
padding: 8,
53+
},
54+
goalsContainer: {
55+
flex: 5,
56+
},
57+
});

‎code/04-handling-events/app.json

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"expo": {
3+
"name": "RNCourse",
4+
"slug": "RNCourse",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/icon.png",
8+
"splash": {
9+
"image": "./assets/splash.png",
10+
"resizeMode": "contain",
11+
"backgroundColor": "#ffffff"
12+
},
13+
"updates": {
14+
"fallbackToCacheTimeout": 0
15+
},
16+
"assetBundlePatterns": [
17+
"**/*"
18+
],
19+
"ios": {
20+
"supportsTablet": true
21+
},
22+
"android": {
23+
"adaptiveIcon": {
24+
"foregroundImage": "./assets/adaptive-icon.png",
25+
"backgroundColor": "#FFFFFF"
26+
}
27+
},
28+
"web": {
29+
"favicon": "./assets/favicon.png"
30+
}
31+
}
32+
}

‎code/04-handling-events/assets/adaptive-icon.png

17.1 KB
Loading

‎code/04-handling-events/assets/favicon.png

1.43 KB
Loading

‎code/04-handling-events/assets/icon.png

21.9 KB
Loading

‎code/04-handling-events/assets/splash.png

46.2 KB
Loading

‎code/04-handling-events/babel.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = function(api) {
2+
api.cache(true);
3+
return {
4+
presets: ['babel-preset-expo'],
5+
};
6+
};

0 commit comments

Comments
 (0)