💻 Module 01 · Intermediate

Choosing Your Tools: From No-Code to Real Code

Ready to build something amazing? An app builder is like a superhero choosing their gadgets. Today, we'll explore two powerful ways to build apps: a super-fast, no-code builder for an instant win, and the real text-based code that pros use!

Your First App in 10 Minutes (Seriously!) ⏱️

Before we jump into typing code, let's build an app... with blocks! We're going to use a tool called Thunkable. It's like Scratch or LEGO for app building. In the pro world, this is called 'Rapid Prototyping.' Companies like Google and Meta build simple versions of apps like this to test ideas with users before a single line of real code is written. You're learning a real-world product design skill right now!

🛠️ Your First Tool: Thunkable

Thunkable (thunkable.com) is a free, drag-and-drop app builder. It lets you create real apps for both iOS and Android without writing a single line of code. It's the perfect place to get a big win and see your ideas come to life instantly.

Look How Fast This Is! Here's the plan:

We're going to map out a silly 'Magic Pet Compliment' app. The goal: tap a button, get a random, funny compliment for your pet. It's instant fun!

🎬

Awesome GIF coming soon!

Imagine a quick video here showing a button and a label being dragged onto a phone screen in Thunkable. Instant app building!

🔘 Step 1: Add a Button.

Drag it onto the screen. This is what you'll tap!

📃 Step 2: Add a Label.

This empty box is where the magic compliment will appear.

🧩 Step 3: Connect with blocks!

Tell the button to put a random compliment into the label when it's clicked.

That's it! That three-step plan is a real app. Now, let's see how those visual blocks translate into the language of code.

Thunkable Block

set Label1's Text to "Hello"

➡️

React Native Code

<Text>Hello</Text>

It's the same idea, just written in a different language!

Level Up: Real Code with React Native 🚀

Building with blocks is awesome for speed. But for total control, you level up to text-based code. For mobile apps, one of the most popular tools is called React Native.

🍃 Pan's Pro Tip!

React Native is a superpower! You write your code once using JavaScript, and it magically builds the app for BOTH iPhones and Android phones. It was created by engineers at Meta and is used in apps like Instagram and Facebook. You're learning the same tech the pros use!

🧠 Quick Knowledge Check!

Which of these is NOT something we build with a tool like React Native?

📱 iPhone App

⚙️ A Website's Backend

🤖 Android App

Your First Magic Spell: <Text>

In React Native, we build with "components." The most basic one is <Text>. It tells the phone, "Hey! Put these words on the screen!"

<Text>Hello, Builder!</Text>

Think of it like a sandwich! 🥪 The <Text> is the top slice of bread, and the </Text> is the bottom slice. The computer needs to know where your "text sandwich" starts and ends!

👇 CHALLENGE: Change the Secret Message!

This is a real, live code editor. Your mission: find the line that says 'Hello, Builder!' and change it to say your own name or a funny message.

💥 Level 2 Challenge: Style Master!

Let's give your message superpowers! Every component has a "style backpack" where it keeps its cool looks. In the code, find the part that defines `styles.paragraph`.

Give it new items! Try changing the color, or add fontSize: 30 to make it HUGE.
Pro move: Let's center it perfectly. The <View> component is the invisible box holding our text. Its style is styles.container. Try adding alignItems: 'center' to its style backpack. This is a core trick pros use to design layouts!

What's Next? Meet the Other LEGO Bricks!

You've mastered the <Text> brick! But real apps use lots of components. What's the difference between just text and text in a box? Hover over the code below to find out!

This is okay, but it's like a LEGO brick floating in space. It's hard to position or group with other things.

Just Text

<Text>Hello</Text>

This is the way! The <View> is an invisible container, like putting your text inside a clear box. Now you can easily organize your screen and build complex layouts.

Text in a View

<View>
  <Text>Hello</Text>
</View>

🚀 Your First Off-World Mission: Launch a Snack

Time to pilot the ship yourself. Your mission, should you choose to accept it:

📡

Step 1: Navigate to coordinates Expo Snack and create a new project.

🔧

Step 2: Clear the landing zone (delete the default text inside the <View> tags).

🛰️

Step 3: Deploy communications array: <Text>Status: Ready for Launch</Text>

⚡

Step 4: Deploy the launch trigger: <Button title='🚀 Launch Rocket' />

✨

Mission Upgrade: How do we make the button *do* something? In the next lesson, you'll learn a magic spell called 'useState' that lets your app remember things. Can you guess what the code might look like to change the status text when the button is pressed?

🛡️ Safety Check: Expo Snack is a professional tool. It's safe to use, but you might see links to developer forums. Remember our rule: never share personal info, and always explore new communities with a parent or guardian.

👨‍👩‍👧 Parent Corner

Your builder is exploring two powerful ways to create: no-code (Thunkable) and real code (React Native via Expo Snack). This is fantastic! The best way to support them is to celebrate both. Ask them to show you their "Pet Compliment" app blueprint. Then, explore Expo Snack together. Seeing their text changes appear live on the screen is a huge confidence booster!