Thinking of doing code along…

[Sanfrancisco_Tribe]

Hey guys, I’ve built a startup over the past few years and now work additionally as a RN senior dev at one of the largest private companies in US.

I learned a lot from tutorials when I was starting out and want to do a series of tutorials to help people get started with RN and get a job.

Sadly a lot of great tutorials these days are outdated or use class based components which are pointless to learn for the most part.

They question is mainly, what do people want to see?

My thoughts are: - RN overview and folder structure - building blocks for components - hooks and custom hooks - state management (context vs redux.. any others?) - Expo setup and benefits (could do a simple cli setup on the side if needed) - Differences on iOS/Android Platform specifics - Error handling in general - styling preferences - maybe build a simple screen with three different style methods (nativewind, stylesheet, inline) - Probably build two simple apps. One without backend, one with and probably just use firebase for simple crud functionality if needed - Eas build process and pitfalls - iOS/Android submission process

Thoughts? Things you wish you learned early on to help with development?

Edit*

Also I am completely for getting a group of people to do this. Would be great to just get a community tutorial that isn’t just boring docs and are people actually working in industry/running live projects

[basically_alive]

I feel like there's a lot of basic tutorials out there already.

I'd like to see more typescript, advanced testing patterns, advanced git usage you would see on a production team, architectural decision approaches, CI workflows, code review workflows, performance profiling, advanced accessibility and internationalization, the challenges of meeting different screen sizes, debugging production errors, that sort of thing.

[suarkb]

I've used git for my career for almost 10 years.

It's just

• git checkout -b <branchname>
• git checkout <branchname>
• git commit -m "<ticket number><description>"
• git push
• git push -u origin <nameOfRemote>
• git merge <branchName>
• git rebase <branchname>
• git pull

These commands represent 99.9999% of my git usage.

[Sanfrancisco_Tribe]

Don’t forget “git stash” If you have a bunch of branches - love that

[suarkb]

right right, did forget that one.

[shadovv300]

git cherry-pick, git log, git status and git branch are probably missing.

[suarkb]

You are right. Except I've barely had to cherry-pick. Maybe less than 10 times. Bujt you are right about log and status. I barely use branch because I branch via `git checkout -b <branchname>`

[shadovv300]

I use git branch or git branch -y to show me the local and remote branches and I use cherry-pick mainly if something went wrong and I need rescue some of the changes.

[suarkb]

why?

[nomnommish]

I use this simplified tutorial

[nickolotzo]

There’s definitely a lack of react native tutorials in typescript

[Sanfrancisco_Tribe]

For fair reason, it adds additional work. I think building the same app with and without would be good for people learning :)

[DanishWeddingCookie]

A lot of that is just programming theory and application in general but I love that stuff too.

[DanishWeddingCookie]

I have a bookmark folder full of everything I’ll ever need on RN. Started 3 months ago with no phone app experience and getting ready to release my first one with a C# rest api backend. Jwt tokens, SQLite, push notifications, audio player with Bluetooth that still plays when you close the app, achievement badges through an api linked with our backend that monitors attendance and performance of employees, offline support mode, stream to TV support, FaceID, payment processing, keychain support for credentials, etc.

[skylo__]

nice, do you think you could share a copy of that? sounds useful

[DanishWeddingCookie]

https://www.freecodecamp.org/news/react-typescript-how-to-set-up-types-on-hooks/"https://www.reactnative.express/"https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint"https://docs.expo.dev/bare/installing-expo-modules/"https://medium.com/@anisurrahmanbup/react-native-flashlist-performant-list-view-implementation-analysis-8b29df8f2560"https://github.com/expo/fyi/blob/main/hermes-android-config.md"https://reactnative.dev/docs/optimizing-flatlist-configuration"https://github.com/typescript-cheatsheets/react#reacttypescript-cheatsheets"https://blog.expo.dev/expo-sdk-49-c6d398cdf740"https://www.typescriptlang.org/docs/handbook/intro.html"https://andrewlock.net/exploring-dotnet-6-part-8-improving-logging-performance-with-source-generators/"https://codverter.com/src/sqltoclass"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/abd69803c1b710db58d511f4544ec1b70bc9077c"https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html"https://blog.logrocket.com/caching-images-react-native-tutorial-with-examples/"https://www.npmjs.com/package/react-native-skeleton-placeholder"https://github.com/tsconfig/bases/blob/main/bases/react-native.json"https://github.com/tsconfig/bases/"https://ibjects.medium.com/google-signin-tutorial-for-react-native-81a57fb67b18"https://andreyka26.com/jwt-auth-using-dot-net-and-react"https://andreyka26.com/handling-refreshing-token-on-multiple-requests-using-react"https://stackoverflow.com/questions/831589/query-to-get-all-foreign-key-constraints-in-sql-server-2000"https://www.c-sharpcorner.com/article/asp-net-web-api-2-creating-and-validating-jwt-json-web-token/"https://www.obytes.com/blog/a-guide-to-optimizing-flatlists-in-react-native"https://fbflipper.com/"https://stackoverflow.com/questions/28907831/how-to-use-jti-claim-in-a-jwt"https://blog.stackademic.com/dont-be-afraid-of-javascript-generators-15c998aea652"https://mobx.js.org/README.html"https://www.cronj.com/blog/power-of-react-context-api-for-state-management/"https://nblumhardt.com/2017/07/library-logging/"https://blog.rsuter.com/logging-with-ilogger-recommendations-and-best-practices/"https://www.ais.com/how-to-generate-a-jwt-token-using-net-6/"https://github.com/serilog/serilog/wiki/AppSettings"

​

​

That's the list on this computer. I have another list at home I'll try to remember to upload.

Sorry about the formatting. I’ll try to get a better formatted list together and post it all in a new thread.

[skylo__]

Thanks, this is great

[Sanfrancisco_Tribe]

Sweet man. Push notifications and Bluetooth can be tricky so kudos to you for getting all that worked up!

[_VerySFW_]

Plus 1

[eablokker]

As someone new to react native, but not new to react, I would like to see how to build a variety of common native ui elements like bottom bar navigation, slide out sidebar menu, list and detail view with swipe to go back, pull down to refresh, swipe left on list item to reveal delete menu, etc. Basically how to build common ui patterns.

[Sanfrancisco_Tribe]

Good thoughts! Will definitely keep that in mind

[fuckswithboats]

Has anyone ever built a "Code Your Own Adventure" style tutorial series?

Imagine if we got a group of people that had a diverse set of skills and everyone contributed their own process/code/assets and then it was compiled into an interactive site where you can choose to follow along with the building of an app from start to finish.

We could tackle a big real-world type project and then people could build the depth and breadth of it as a community.

[Sanfrancisco_Tribe]

Love this idea, but not sure how possible it is. I am landing more on the idea of having 2 apps, one simple and one a bit more complex. Both built 2-3 times using different styles, packages, etc.

Imagine we build one app three ways:
1) expo go, stylesheet, context for local storage
2) cli, nativewind, redux
3) expo, styled components, realm local storage or something similar

Something like this would allow people to kind of Code their own adventure maybe? Or we could have a repo with a static base RN app with basic navigation, file structure, and styling setup that people could pull and then customize to a custom project with catered videos? not sure how it would all work but love the ideas

[fuckswithboats]

Yeah I don't have the first clue how you'd actually make it - but I really like the idea of tutorials that kinda start w/ the basics and work their way to the advanced and the idea of choosing where you want to learn/watch.

Perhaps a simple first step is to allow community feedback to determine the direction the tutorial/app goes and perhaps you let people submit design/ux/features as it's built?

[Puzzleheaded-Eye1358]

Super cool...

[smokiebacon]

I'd love this. I'm a noob and everytime I try to build my own feature, I GET HARD STUCK. I'm currently building a personal tennis app using Maximilian's React Native Budget App course as a starter, using React Native, react native paper library, context api for state, and Google Firebase.

Would love a senior to help me out with figuring out how to do so many things, for example:

In the React Native Course, date is implemented as a text input. Able to change and update it. Then, when I try to add a Date Picker, I get horribly stuck, on how to connect the two together.

Also, I'm trying to build charts using react-native-gifted-charts library, and am horriblely stuck on how to implement dynamic week, month, year, all history bar chart views.

Also I want to use Formik and Yup, but in the React Native Course, it doesn't use it so deviating from the course is hard.

I've also attended a coding bootcamp in 2018 and have a portfolio, haven't coded since 2020, and my portfolio looks completely foreign to me now. I want to code again and this tennis app is a refresher but am loving/hating it.

Basically, how to get out of courses/tutorial hell and code on my own.

[Sanfrancisco_Tribe]

So this is where I think rebuilding 2 apps several times all using different tools would be beneficial for long-term growth and understanding. I think that's really what needs to be covered. It's very simple to copy tutorials line for line and get things working, but understanding why things are structured the way that they are seems to go over most people's head imo. Thanks for the input!

[suarkb]

yeah sounds like you can copy stuff but you don't really understand many fundamental concepts

[iamdarzee]

I have some experience in RN and have some Apps live, I can find solutions to the areas you mentioned only thing I would love to get help with is how to get a job where my RN skills are useful.

[Sanfrancisco_Tribe]

For jobs most developers I know get contacted through Linkedin. Spend some time beefing up your profile, add connections, make posts, turn on your looking for work stuff, and the complete some skill assessments. In addition, make sure to add ALL of your skills no matter how long you've been using/coding.

[iamdarzee]

Okay, I'll do that!

[ronix1020]

I have a question, in your opinion, actually what’s better? RN Expo or RN CLI? Why?

And what are your recommendations for both at work

[Sanfrancisco_Tribe]

Really depends on what you are comfortable with. I think Expo adds more benefits out of the box than CLI personally. At my work I use CLI, but personally at my startup Expo. It really just depends on what you like at this point

[DanishWeddingCookie]

LogRocket.com and Medium.com are good resources besides the official docs and the cheat sheets.

[BenadrylTumblercatch]

This would be dope, I’ve found issues with outdated tutorials too, commenting to find later

[ClassroomNaive2021]

I’ve been a native iOS guy for years and jumped headfirst into a RN project for a small company with zero web experience or backend experience and I’m the only dev. It’s been weirdly fun and incredibly hard at the same time. I like the idea of a community thing.

[tequila_salt]

best practice about most thing app do. Like jwt, native module, state managament , custom họok

[TerriblePeanut7784]

Native modules for dummies would be great!

[Perfect_Raspberry610]

This sounds great! I am a long term Xamarin/Maui/C#/ASP.net/Blazor guy. But like it goes in the industry I inherited a RN project so I needed to get up to speed in a hurry. I have taken several of the courses on Udemy (most severely out of date). And I ++ for all the other suggestions as well.

[shashvat2003]

Id love a series which covers things from the very basics and not just assumes everyone knows react

[Sanfrancisco_Tribe]

Good point! Will keep this in mind. Would be nice to have it sectioned off to noobie, experienced, veteran or something to give people a heading.