Cameron Boyle

GitHub - nextjs/saas-starter: Get started quickly with Next.js, Postgres, Stripe, and shadcn/ui. Get started quickly with Next.js, Postgres, Stripe, and shadcn/ui. - nextjs/saas-starter

New open source template:

• Next.js
• Postgres
• Drizzle
• Stripe
• Tailwind CSS
• shadcn/ui

github.com/nextjs/saas-...

7/ That's it! 🎉

You now understand the foundation of React:

✅ Props for passing data.

✅ State for managing dynamic data.

If this helped, repost to help others! 🔄

Got questions? Let’s discuss below! 💬

6. Why does this matter?

Understanding state and props is the key to:

• Building interactive apps.
• Making components reusable.
• Levelling up your React skills like I am!

5. Combine Props and State

Props and state often work together!

For example: Here, name is state in App but becomes a prop for Welcome.

4. Props vs. State

• Props: Passed from parent to child. Can’t be changed by the child.
• State: Local to a component. Can change over time.

A good analogy for would be: props = a gift (you can’t change it); and state = your mood (it changes).

3. What is State?

State is like a component’s memory. It:

• Stores data that can change.
• Lives inside the component.

Example: Here, count is the state, and setCount updates it.

2. What are Props?

Props are like arguments you pass to a function. They:

• Allow components to communicate.
• Are read-only (you can’t modify them).

Example: Here, name="Cameron" is a prop passed to the Welcome component.

🧵 React State and Props Made Simple (Beginner's Guide)

1 .Are you new to React?

I recently got comfortable with State & Props, so let's share what I know and help anyone else who may be confused.

Here’s a simple explanation that will make these core concepts super clear! 👇

Day 55 Of #30NitesOfCode

- was my birthday today, spent time with my girlfriend and my parents
- went to an exotic zoo—amazing!

Grind continues tomorrow

Happy Coding!

Day 54 Of #30NitesOfCode

- Reworked and designed most of my new LifeOS Notion template
- Tomorrow is my birthday so I won’t be doing much coding

Happy Coding!!!

Day 53 Of #30NitesOfCode

Happy New Year everyone!

No code today but tomorrow I’m tackling some organisation tasks and Notion stuffs

We are so back

Happy Coding!

Day 52 Of #30NitesOfCode

- Thinking of restarting the @codedex_io challenge for the new year but I’m undecided
- my last post of 2024, happy new year everybody and I hope your goals are fun and achieved!

Happy Coding!

Day 51 Of #30NitesOfCode

- thinking of new year ideas for mica.
- bored of Notion; too much setup
- tried Apple Notes; not ideal without mac or iPad

Happy Coding!

Day 50 Of #30NitesOfCode

- Enjoying my time resting
- Parents left today, coming back for my birthday next week
- Feeling refreshed and ready to tackle the new year head on

Also happy 50 days of dev logs from me, thank you to everyone who’s kept me going!

Happy Coding!!

Day 49 Of #30NitesOfCode

Still no coding
- not feeling great atm so resting my mind
- parents came to visit us today so went for a lovely dinner
- Thinking of taking the time off now and hit the ground running in the new year?

Happy Coding!

Day 48 Of #30NitesOfCode

- Another rest day today, hoping to pick things back up tomorrow but I’m not feeling 100 recently

Happy Coding!

Day 47 Of #30NitesOfCode

code-less today, ate loads of food instead

Happy Coding!

Just hit 100 followers 🎉

Grateful for everyone who’s joined me on this journey of building, learning, and sharing. 🚀

Let’s keep growing together! 💙🦋

Day 46 Of #30NitesOfCode

- reworked some todo logic
- add ux for crud operations
- improved responsiveness on the dashboard

Happy Coding & Happy Christmas

Day 45 Of #30NitesOfCode

Todos:
- Added quick-add modal to the dashboard
- Implemented smooth state transitions
- Enabled click propagation for toggle actions
- Integrated dynamic overflow handling with the router
- Introduced soft-delete for completed items

Happy Coding!

What's your proudest achievement this week, devs? Let's celebrate it together!

Quick reminder: Your worth as a developer isn't measured by lines of code.

Remember, rest is a feature, not a bug.

Day 43 Of #30NitesOfCode

- Task Management section functionality complete
- Dashboard is working, separated tasks and todos
- OAuth definitely working, tested well.
- Content dev today :)
- Tomorrow we rest/

Happy Coding!

This year was all about growth and stepping outside my comfort zone. I'm proud of my progress and excited for what's next.

How has 2024 treated you? Share your reflections and wins below 👇

#YearInReview #LearnInPublic #DevJourney

Looking Ahead to 2025

Next year, I’m excited & dedicated to:

- launch mica and my Notion business
- get 500+ social followers
- master React and explore other JS tools
- share my journey and connect with devs

2024 Highlights

- Transitioned from assistant manager to full-time developer-in-training
- Completed a coding bootcamp and started learning React and TypeScript
- Began building Mica, my productivity app
- Found balance with better routines and time for family and relaxing

In December, I also began learning how to create my own Notion templates and offered them online for people like me—those who want to be at the top of their productivity game.

December: Starting mica

Using my new skills, I started developing mica, a productivity app combining tasks, notes, and calendar features. It's a great way to apply my knowledge and tackle new challenges like:

- Designing a PostgreSQL DB.
- Creating a PERN app with TypeScript.

November: Frameworks and further learning

Post-bootcamp, I focused on learning React and TypeScript, enhanced my frontend skills and boosted my excitement for creating real-world apps.

While there's much more to learn, I believe taking it slow builds momentum and yields results

I would not recommend a bootcamp for career switchers or new devs, it is just 1 year of learning the bare minimum and the dev world will become so overwhelming when you are dropped into it with no help after the bootcamp finishes.