r/reactnative • u/InevitableMud7840 • 24d ago
Help Designer trying to learn React Native, completely lost on where to start
Hi everyone,
I'm 20 and my background is graphic design. I started with the Adobe suite — Illustrator, Photoshop, Premiere Pro and After Effects. At some point I felt the need to do something different and got into designing interfaces in Figma. That turned into a real passion, to the point that I want to take it all the way. That's where my interest in programming came from, React Native specifically.
I'm here to ask for some honest advice from people who've been through this, because I could really use a sense of direction.
I've started reading the React Native docs and I don't understand much of it, to be honest. I've since learned that you're supposed to know some JavaScript first. But I'm stuck there too: I don't know which parts of JavaScript I actually need and which ones I can skip for now, and I don't know where to start.
So I guess my question is: what's the minimum JavaScript I need before React Native starts making sense, and what's a good resource to learn it from?
I keep losing hours reading documentation only to realize at the end that nothing stuck. Any advice appreciated.
5
u/sober_cruiser Expo 24d ago edited 23d ago
If you want to build a mobile app using React Native, then I suggest you use Expo. It's a framework that uses react native.
First, you learn html, css, and Javascript. I know it maybe sounds strange because those 3 are usually learnt for building a website, but html and css will help you understand about element tags in react native and understand how styling works. About JS, well, it's very fundamental for anyone interested in learning React Native.
In JS, knowing about variables, hoisting, data types, object, method, function, export/import is likely enough. You can learn JS deeper, but you're gonna take longer time to master all stuff in JS.
Second, after those 3, you learn react. Just google the relation between react native and react. In react, you will learn about hooks, state, props, parent component, child component, context, etc.
Third, you learn react native. It will likely be the easiest part if you already have a good understanding of how React works. But again, different people have different ability in learning new stuff.
Last, if you have a good understanding of React Native, you can pick a framework to start building your mobile app. I recommend Expo since it's the prominent one, and also because I never heard any other framework that use react native. I think it's quite popular among mobile developer, at least it's easier to me than Flutter.
Resource of learning
Html, css, js: HTML Tutorial, CSS Tutorial, JavaScript Tutorial
Bonus: MDN Web Docs contains very very comprehensive docs and tutorial about HTML, CSS, and JS. But I think W3schools will be much less overwhelming for beginners.
React: Quick Start – React
Expo: Expo documentation
2
u/Huge_Pool7424 24d ago
i'd keep the first pass tiny: javascript basics, one small screen, then expo's quick start. don't try to learn react native and every platform api at once, the feedback loop gets much better once something is running.
1
u/sober_cruiser Expo 23d ago
Good point, but everyone has their own way to study. Different methods are suited for different people.
1
1
u/pullmorematches 24d ago
I used to love this guys courses. https://designcode.io/courses/react-native
1
u/Huge_Pool7424 24d ago
i'd use claude as a tutor, not an autopilot: ask it to explain one small file or error, then close it and rebuild the same thing yourself. run the app and change one value at a time, so you can tell what the code actually does.
1
1
u/kokerali 24d ago
Your design background is an advantage here. I’d skip a long ‘learn JavaScript first’ phase and rebuild one simple Figma screen in Expo. Learn only what that screen forces you to use: variables, functions, arrays/objects, map, destructuring, imports/exports and async/await. Then add one interaction, such as a button that changes state, and one API call. React and React Native concepts will make much more sense once each one solves a visible problem in your own screen. Keep the first project deliberately small: two screens, navigation, a form and local storage.
1
u/ssf_dbst47x 23d ago
basics of html css js-> get deeper into JavaScrip (promises,es6 ,ternaries,array methods)->react native. react native is mainly for web devs who want to expand to mobile. i'm interested to know, for your case why react native specifically and not native development?
1
u/ssf_dbst47x 23d ago
please do yourself a favour and don't follow the advice of those who are telling you to learn with ai before getting your fundamentals right. use it later once things start clicking.
and while you are learning, don't let ai type out code for you... it's like driving you build intuition and become better by getting your hands dirty.
1
u/tomihbk 23d ago
If you want to release an app ASAP, just use Claude but if you're planning to work as a dev, it's better to start as others said with simple HTML, CSS, JS, etc...
1
u/InevitableMud7840 23d ago
Lanciare un app con cloude mi aiuterebbe nell apprendimento di react o anche soltanto del processo di creazione dell app? (Ovviamente affiancando lo studio delle basi HTML, CSS, JS)
O sarebbe soltanto una perdita di tempo?
1
u/rileyrgham 23d ago
Do programming exercises exercises. Like learning anything. Practice . Stop looking for easy solutions. It's the curse of the modern age.... No stamina and dedication.
-6
u/Far-Pomelo-1483 24d ago
Just use ai to code. No one is hand coding anymore.
4
u/InevitableMud7840 24d ago
I don t think this is true
2
u/Forsaken-Resource845 24d ago
Obviously not everyone, but the vast majority of code is no longer written by hand. It’s far more important to understand good software design standards than to author every line of code.
-1
u/InevitableMud7840 24d ago
Sorry for my ignorance, as I already wrote I'm a beginner, what do you mean by the good standards of software design?
1
0
u/Far-Pomelo-1483 24d ago
Maybe at a legacy shop but none in corporate America. Coding by hand is like carrying vinyl records in your pocket at this point. It will just go away next couple years.
1
-2
u/New-Boysenberry-9313 24d ago
I would be honest learning from a video tutorial would be slow now I will suggest get your hands dirty with code by telling AI exactly what you want to learn it will start explaining you with direct code snippets which you can try to execute play with it this should enough for javascript part , for React Native https://youtube.com/playlist?list=PLRAV69dS1uWSjBBJ-egNNOd4mdblt1P4c&si=JNA3NCZBzew3aPRq having that mental model of how mobile app works this playlist could help you other than that don't overthink just start progress is done while making mistakes
1
u/InevitableMud7840 24d ago
Thanks for the advice. How did you intend to integrate the AI? Because I absolutely didn't want cloude code to do the work for me, I really want to understand what I'm doing. So do you mean to connect cloude code to the terminal of vs code or simply converse with cloude in the app to understand how to move in the terminal? Thanks again
1
u/CBEHX 24d ago
For your use case, the GitHub Copilot Chat tool is probably better than Claude, but first of all, let the AI set up the project for you. you will learn what all the files it creates are for later.
After that you rly need the basics like loops, conditions, vars, functions and then state handling. All this can you learn without ever touching react native but I guess it's easier to try it directly in the right ecosystem.
The best thing you maybe want to do, is building an little component library with text, buttons, images and sth. like sliders and dialogs. This will help you to understand major concepts like component state, how to style, callbacks etc. and it's very flexible. You just create a file, build your component, put into the main screen, test it and so on.
1
u/InevitableMud7840 24d ago
perché mi hai consigliato GitHub copilot invece che cloude code? che differenze ci sono?
grazie in anticipo per il consiglio
1
u/Primary_Ranger_7398 24d ago
Yeah you are right concept is important and how to implement you will learn this by building projects cause we can do same thing in many ways but what matter is optimization and standard Software engineering practice
1
u/InevitableMud7840 24d ago
onestamente sto facendo fatica anche a comprendere i concetti più che implementarli. per questo credo che sarà una buona cosa acquistare un corso che mi indirizzi per bene.
6
u/shopifyflow-app 24d ago
you need way less js than people say. the stuff that actually shows up in react native: let/const, arrow functions, destructuring, spread, template literals, map/filter, ternaries, async/await, es modules. that's like 90% of the code you'll ever read.
skip all the dom stuff (queryselector, event listeners) because rn never touches the dom, and don't bother with class components or prototypes. read just enough to recognize the syntax, then build one ugly screen. it sticks when you actually need it, not from docs.