Poznawanie struktury projektu
Przejdź przez układ folderów projektu Expo, poznaj role plików app.json i package.json oraz komponentu App, a następnie wprowadź pierwszą zmianę w kodzie.
Poznawanie struktury projektu to bezpłatna lekcja React Native Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Native Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Native Academy zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
The Root of Every Expo Project
Every Expo project has a tidy layout that splits config, code, assets, and dependencies. Config files sit at the root, your code in App.js or src/, and packages in node_modules/.
MyFirstApp/
├── App.js # Entry component
├── app.json # Expo configuration
├── package.json # Dependencies + scripts
├── package-lock.json # Locked dependency tree
├── babel.config.js # Transpiler config
├── .gitignore # Files to exclude from git
├── assets/ # Static files
│ ├── icon.png
│ ├── splash.png
│ └── adaptive-icon.png
└── node_modules/ # Installed packages (auto-managed)The assets/ Folder
The assets/ folder holds static files bundled with your app — images, fonts, audio. Reference a local image with require(), and Expo optimizes it during the build. See the code.
import { Image } from 'react-native';
// Referencing a local asset
<Image source={require('./assets/icon.png')} />
// Referencing a remote image
<Image source={{ uri: 'https://example.com/photo.jpg' }} />
// Loading a font from assets/
import * as Font from 'expo-font';
await Font.loadAsync({
'Roboto-Bold': require('./assets/fonts/Roboto-Bold.ttf'),
});App.js as the Entry Point
React Native needs one entry point: App.js, which must export a default component. As your app grows, App.js becomes a thin shell wiring up navigation, state, and themes.
// A typical App.js as the project grows
import { NavigationContainer } from '@react-navigation/native';
import { Provider } from 'react-redux';
import { ThemeProvider } from './context/ThemeContext';
import RootNavigator from './navigation/RootNavigator';
import store from './store';
export default function App() {
return (
<Provider store={store}>
<ThemeProvider>
<NavigationContainer>
<RootNavigator />
</NavigationContainer>
</ThemeProvider>
</Provider>
);
}Organizing Source Files in src/
Small apps live at the root, but as yours grows, add a src/ folder. Common subfolders: screens/, components/, navigation/, hooks/, and services/. It keeps things easy to find.
src/
├── screens/
│ ├── HomeScreen.tsx
│ ├── ProfileScreen.tsx
│ └── SettingsScreen.tsx
├── components/
│ ├── Button.tsx
│ ├── Card.tsx
│ └── Avatar.tsx
├── navigation/
│ └── RootNavigator.tsx
├── hooks/
│ └── useFetchUser.ts
├── services/
│ └── api.ts
└── utils/
└── formatDate.tspackage.json Deep Dive
package.json is your project manifest: dependencies for runtime, devDependencies for tooling, and scripts for shortcuts. Never edit node_modules — npm install rebuilds it.
// package.json structure
{
'name': 'my-first-app',
'version': '1.0.0',
'main': 'node_modules/expo/AppEntry.js',
'scripts': {
'start': 'expo start',
'test': 'jest',
'lint': 'eslint .'
},
'dependencies': {
'expo': '~50.0.0',
'react': '18.2.0',
'react-native': '0.73.6'
},
'devDependencies': {
'@types/react': '~18.2.0',
'typescript': '^5.1.3',
'jest': '^29.0.0'
}
}app.json vs app.config.js
Need dynamic config — like reading env variables at build time? Swap app.json for app.config.js, a JS file that exports your config using process.env.
// app.config.js (dynamic configuration)
export default {
name: 'My App',
slug: 'my-app',
version: '1.0.0',
extra: {
apiUrl: process.env.API_URL || 'https://api.myapp.com',
environment: process.env.APP_ENV || 'production',
},
ios: {
bundleIdentifier: 'com.mycompany.myapp',
},
android: {
package: 'com.mycompany.myapp',
},
};.gitignore and What to Exclude
The .gitignore file tells Git what to skip. Always exclude node_modules/ (npm rebuilds it), .expo/, and any secret files like .env. Committing node_modules bloats your repo.
# Default .gitignore for Expo
node_modules/
.expo/
dist/
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/
# Environment files with secrets
.env
.env.local
.env.production
# macOS
.DS_Storebabel.config.js and Transpilation
The babel.config.js file controls how Babel transpiles your code. The babel-preset-expo preset covers the basics; you extend it with plugins like path aliases.
// babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
// Path aliases: @/components → src/components
['module-resolver', {
root: ['./src'],
alias: { '@': './src' },
}],
// Reanimated plugin MUST be last
'react-native-reanimated/plugin',
],
};
};The node_modules Directory
node_modules/ holds every package you depend on — often hundreds of megabytes. Never edit it directly. If things break, the classic fix is delete it and run npm install.
# If things break, a clean install often fixes it:
rm -rf node_modules
npm install
# Also clear the Metro cache
npx expo start --clear
# Check how many packages are installed
ls node_modules | wc -l
# See the dependency tree
npm list --depth=1ios/ and android/ Folders in Bare Workflow
The managed workflow hides the ios/ and android/ folders — Expo handles native code. Run expo prebuild to generate them: the Xcode project and the Gradle build files.
# Generate native folders (bare workflow)
npx expo prebuild
# This creates:
ios/
├── MyApp/
│ ├── AppDelegate.swift
│ ├── Info.plist
│ └── Images.xcassets/
└── MyApp.xcodeproj/
android/
├── app/
│ ├── src/main/
│ │ ├── AndroidManifest.xml
│ │ └── java/.../MainApplication.kt
│ └── build.gradle
└── build.gradleExpo Router and the app/ Directory
Newer projects use Expo Router, file-based routing like Next.js. Each file in app/ becomes a route — index.tsx is /, profile.tsx is /profile. No manual navigator needed.
// With Expo Router, file structure = routes:
app/
├── _layout.tsx // Root layout (NavigationContainer)
├── index.tsx // Screen at route '/'
├── profile.tsx // Screen at route '/profile'
└── settings/
├── _layout.tsx // Settings-section layout
└── index.tsx // Screen at '/settings'
// app/index.tsx
import { Text, View } from 'react-native';
export default function HomeScreen() {
return <View><Text>Home</Text></View>;
}Quick Check
Test your understanding of React Native Mobile Development concepts from this lesson.
Lesson Recap
You mapped the project: assets/ holds media, app.json controls config, and src/screens and src/components organize your growing code. Next: the View component! 📦
Często zadawane pytania
Czy lekcja „Poznawanie struktury projektu” jest bezpłatna?
Tak — pełny tekst „Poznawanie struktury projektu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Native Academy, przejdź na CoddyKit PRO. Kurs React Native Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Poznawanie struktury projektu”?
Przejdź przez układ folderów projektu Expo, poznaj role plików app.json i package.json oraz komponentu App, a następnie wprowadź pierwszą zmianę w kodzie. Ćwiczysz React Native Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Native Academy?
Nie wymagamy żadnego doświadczenia. React Native Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Poznawanie struktury projektu”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Native Academy?
Tak. Każda lekcja React Native Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Instalowanie Node, Expo CLI i symulatorów
- Tworzenie pierwszego projektu Expo
- Uruchamianie na urządzeniu i emulatorze
- Poznawanie struktury projektu