Prepare Yourself Mentally — It’s More Than Just Writing ‘Hello World’
Okay…so, you’re excited to create your first React Native project, even if it’s just a simple ‘Hello World’.
But it can get really frustrating when the tutorial steps don’t match up with what you’re seeing on your PC because they’re outdated.
As a result, you might think about QUITTING.
Well, it happened to me. I almost thought of quitting, but thankfully came to my senses after 2 days…phew.
So, as a fellow React Native newbie, I don’t want you to QUIT.
That’s why I am passing along some important tips to make your first experience smoother:
- Open your favorite code editor, make sure you have the latest node version installed on your PC, then type:
npx create-expo-app@latest <Your Project Name>
Read more about Expo, here: https://docs.expo.dev/get-started/introduction/
2. It’s important to understand the folder structure. Because here’s where the magic lies.
Refer to this wonderful official doc: https://docs.expo.dev/get-started/start-developing/
3. For now, you’ll be working exclusively with the index.tsx file, which is located in the app → (tabs) folder within your project folder.
4. In the index.tsx file, you’ll see a return statement. This where you’ll add your first piece of code:
5. What are <ThemedView>, <ThemedText>, and styles?
<ThemedView> → Think of it as the React Native equivalent of an HTML <div> tag.
<ThemedText> → It’s like a <p> tag of html, where you put your text or paragraphs.
styles — This is a bit more complex and deserves its own discussion.
6. styles
Think of styles as the CSS for your React Native project.
It is similar to a JavaScript object, where you will define CSS equivalent style properties and assign values.
Explanation:
Usage of styles:
Defining styles of property type titleContainer:
And there you go!
I hope this article was helpful to you 😊
Keep Calm & Keep Coding!
