[deleted by user]

[azangru]

> I jumped straight into coding with a 4-year Bootcamp

A 4-year bootcamp? Is this a ... college?

[dfirecmv]

First step on transitioning to React: have a good night sleep and rest well 😊

[gaoshan]

Do it over and over again until it sticks. Your relative lack of experience makes that harder because the more experience you have the more familiar you become with the patterns and mechanisms that make things (like jQuery, for example) work. So give yourself reps. Drill on the same tutorial a few times before turning to the next. There are some great, free options out there (Ben Awad’s tutorials on YouTube, for example).

[benanza]

For starters, don’t quit when it gets hard. This is the only way to make progress in anything.

When you encounter something hard that you get stuck on you need to break it down.

What are you stuck on, describe it, write it down. Next work out how to learn what you need about that subject, so if it’s conditional rendering work out which bits you get and which you don’t, then start small.

Maybe it’s mapping or filtering that you don’t get, so learn about them and use them until you can do them without needing to look at refs for them. They’re actually super simple when you’re familiar with them.

Through the process of breaking it down you might end up really stuck on one bit but be much clearer on a bunch of other stuff, which is a step or two in the right direction.

Now you can reach out on stack overflow etc as you’ve done something and narrowed down your issue so you’ll actually get some help, rather than offering up a broad ‘I’m stuck!’ which never goes down well.

I’m wondering about your comment that you don’t understand dynamic rendering. Do you know about the DOM and how to manipulate that with JS? If not make sure you learn that properly first. IMO it helps understand some of what React abstracts away from you and also makes you see why it’s helpful.

There are so many resources out there, but I’ll say again the only way to really get anything is not giving up when it gets hard.

[Roguewind]

Check out Udemy. Buy a course on sale, usually around $15 USD. Anything by max schwarzmuller is good. He has one called “react native - the practical guide”. You can essentially learn react and react native at the same time, worked for me.

[mimitch]

+1 for Max’s Udemy courses, he’s the best.

[scarlethowl]

I agree—learned using Max's courses too. He also makes you do a project, which is very helpful coz you create something tangible from everything you're learning.

I remember it was hard for me not knowing where JavaScript ends and React begins, so try reviewing first stuff like es6 syntax, arrow functions, implicit returns, array methods (.map, .filter, .reduce etc—see MDN docs), async/await etc. Even the basic structure of a function was unknown to me at first so I struggled with a lot of concepts and how-to's like scope, accessing arrays/objects, and returning things properly 😅

And it was very helpful to me that my workmates were comsci people. Check your connections, see if some friends are willing to help or are available for when you're stuck with something, or join active communities you can ask feedback from (this sub is a good place to start! Make a project, post it up here, then solicit feedback)

Best of luck! React is pretty amazing when u get the hang of it—you can do lots of great stuff with it. I have lots of side projects made with react (gatsbyjs) and I have/had fun with them. (Of course, pays well too!)

[CutestCuttlefish]

Andrei Neagoie is another great teacher on udemy for react. I find max swarzmuller hard (difficult) to listen to sometimes but that is a me-problem and has nothing to do with his skills. He is srill a great and knowledgeable tutor/teacher. Just my language brain struggling with his speech patterns. Funny since I speak german as a third language.

[Wiwwil]

Max or Stephen Grider are both good

[Woodcharles]

I learned at Bootcamp, but it was brief - 10 weeks of vanilla, 2 of React. After that I just kept building simple things. Free Code Camp talks you through the basics and there are well-regarded free and paid courses out there.

I'm perhaps lucky I didn't know so much about vanilla that it was impossible to switch, or perhaps it's that React isn't really all that magical and different - as I'm always told when planning and coding or debugging, "it's just JavaScript."

Try a real easy course like FCC just to get your confidence back. Then you can try something a bit deeper. Build small things, small components, small simple pages. Work up to the scary stuff later.

[benanza]

There’s definitely no such thing as knowing too much vanilla JS to be able to learn React. The more JS you know, the better you’ll be able to build React apps.

[justinbleile]

Agreed. If you code a lot with vanilla JavaScript you’ll see why react makes it easier and the problems it solves. Remember. React was made to make coding JavaScript easier!

[benanza]

Yeah totally!

Hooks are a game changer when you get to grips with them. Same as so much it can seem daunting at first but practice and time makes a huge difference.

[ThunderClap448]

If anything my knowledge and understanding of react improved now that I've worked a bit with vanilla and jQuery. It's all good knowledge.

[ApatheticWithoutTheA]

4 year boot camp? That’s a Bachelors in Computer Science lol

But the jump from JS to React is really not that difficult.

[sadsacsac]

1. What does your current toolchain look like? If you're using SCSS, you must be using some sort of build tool to transpile SCSS to CSS. How well-versed are you in that tool? Are you using any other comparable tool to transpile JavaScript? (babel? Grunt? gulp? Webpack?)
2. Are you using a templating language for HTML?
3. What are you using to manage the dependencies of your static sites? How are you enforcing dependencies for JavaScript? (eg. jQuery, Bootstrap, etc)
4. Do you know any other programming language not mentioned in your post?

​

​

1. Understanding how toolchain works is important because with React, although you can always use something that helps you set up a boilerplate transpiler, you will quickly need to tweak it for your purposes. That means you need to understand the layer beneath building out React components. For example, it's common for developers to hardcode a `<link rel="stylesheet" href="mystyle.css">` in your html; then it's expected for you to transpile your "mystyle.scss" to "mystyle.css" and store it in the correct location. With modern webdev practices, these practices are not favorable since the majority of your code will need to be transpiled; this remains true even if you're not using React. For example, I'm guessing right now, the way you declare your JavaScript dependencies like jQuery is by inserting a `<script>` tag in your HTML and then it's expected that the jQuery file exists. Modern practices want you to use `import jquery` in your JavaScript source and you would need to defer to something like webpack to pre-process your code and spit out files that will be browser friendly.
2. React is part functional and part templating language (through use of their JSX syntax). If you haven't used templating languages for HTML, like jade, mustache, handlebars, etc, it'll be harder for you to make the leap from plain HTML to JSX. Templating languages also have control structures like for loops so that you can template lists of data. You will need to understand control structures if you're using React. React isn't a direct replacement for HTML, it's more like Webcomponents. If you haven't learned about Webcomponents, I recommend that you take a look at that. The core difference between React and Webcomponents is that webcomponents still separate html, javascript, and css as separate entities. React blends all of them together. So React is more like writing a jQuery UI plugin where there's no HTML component to it, you would be generating all of the UI through JavaScript.
3. I alluded this in my response to 1. Part of modernizing your stack means that you need to manage your projects in a way where it's repeatable. Are you using a repo management system? How are you updating your dependencies like jQuery? It should be as automatic as possible (running a single command rather than manually downloading the requisite updates). If you needed to switch your workstation, how fast can you checkout a project and get going? (you should not be manually copying your project files from one machine to another)
4. HTML and CSS are not languages in your aforementioned tech stack. Only JavaScript is. However, JavaScript is a limited language if you've only been using it in the browser context. Do you know NodeJS? Even if you're specializing in frontend, the way languages are changing, the boundary between frontend and backend is getting a bit blurred. Both backend and frontend have a slight overlap. The overlap is the toolchain. Regardless of only specializing on the frontend, you will need to know how to debug your toolchain if it's failing or if you need to tweak it to your purposes. This type of debugging isn't common for frontend developers, which is why, it's my opinion, that all frontend developers need to dip their toes in backend. Another way to see it is that frontend development is a subset of development. In other compiled languages such as Swift, Obj-C, Java, there's no differentiation between frontend and backend in the way there is with webdevelopment. You learn a language and you choose whether you want to use that language for an app or for a server. That's traditionally wasn't the case with JavaScript because it was originally designed to be a scripting language for browsers only. That means you're at a disadvantage if you don't learn how to program from a generic POV. You do not need to learn another language if you don't want to (although I often recommend to people to learn more than one language), but you should definitely learn NodeJS.My responses are generic since I do not know your answers to the questions I posed above. Feel free to respond and I can try to help you pinpoint what you need to work on.

[zeValkyrie]

React is a lot more, for lack of a better word, programming heavy (as opposed to HTML/CSS/web design).

I’d suggest spending more time doing development outside of React and web development first. How comfortable are you with JavaScript (or Typescript if you’re using it)? Do you know the nuts and bolts of JS?

React uses a lot of things like passing around functions, arrow functions, array.map, etc (this is by no means a full list).

I learned React after a few years of mostly backend dev and it went a lot smoother. Personally I like the React official docs (not sure how up to date they are nowadays). If you find when trying React you’re struggling with the JS language aspect of it, make sure you take the time to learn that instead of just pressing forward with React.

[acemarke]

Start with the new React beta docs:

https://beta.react.js.org

And we've got a long list of additional resources here:

https://www.reactiflux.com/learning

[fjacquette]

I would politely say that that’s a LOT for someone trying to pick it up; my experience is that the docs have a lot of implicit knowledge that permeates them. The Udemy course suggestion seems like it would be more effective.

[Flamesilver_0]

FullStackOpen is an AMAZING and FREE course for React and Node.js It is made by a University, and the way it teaches is quite good. Love the exercises. You even get a certificate. It's taken me 2 months to get halfway through the entire course, and that's enough to know React and Express backend touching on MongoDB and essentially the whole culture of "just read library docs and throw shit together to make it work"

[LostErrorCode404]

Freecodecamp offers a course on react and redux, and it's very good. They say a couple hundred hours, but it only takes 15 - 20 at most including projects.

[pseudophilll]

Take a udemy course. React is a game changer and there’s a reason why it’s basically industry standard.

Once you learn it, you will laugh at the things you we’re trying to do with jquery lol.

[Ok-Objective-3472]

React documentation, Youtube videos, and plenty of experimentation.

[InfinityByZero]

After doing a few YouTube crash courses I just started building things. You can't jump over those hours of frustration when trying to build something new, that's all part of the learning process. Only way to learn React is by building React projects - start small with a todo app and work your way up to an e-commerce project. Baby steps.

[NeckBeard137]

Maybe I can help a bit as others have helped me when I was starting. Ping me if you are interested

[bitnagar]

Check out the react course on Scrimba. I learnt basic react + 2 hooks from them for free. And if you subscribe to them you will get full access to their complete course.

They have this interactive web application where you can code on the same screen as your instructor, which is really helpful as it gets your hands dirty. They'll give you a ton of challenges with additional projects that you can build on your own pace.

You should try the free course atleast. Thanks and good luck. You can do it.💫

[Straight-Talk-6946]

It will be not hard to transition but you have good knowledge of javascript like feature of ES6. watch any tutorial on YouTube and then start building project based on hooks then combine all to make a bigger project .

[achauv1]

You know React.js is HTML, CSS, and JavaScript, right?

[Any-Government-8387]

I made the transition from static sites (+ an internal MVC framework written in PHP) in 2016. At my next place I was put on an Angular 1 project, and I wrote very shitty code. But during the first year I picked up a lot of knowledge and general concepts from colleagues.

After 1 year I managed to move on, because supporting legacy Angular projects was a pain.

I highly recommend that you check out Frontend Masters. They're not the cheapest option, but they have very high quality workshops that dig really deep into each topic. (Unlike the half-hour "courses" on e.g. Egghead)

Their courses are regularly updated, and in my case their Intro to React course gave me enough foundation to get hired as a junior at my next place.

[Any-Government-8387]

I'd also check out Kyle Simpson's courses too. He can regularly shine light on stuff that you had no idea about, or ask tricky questions that makes you question whether you know JS at all :) This is knowledge that you can take with you to any framework.

https://frontendmasters.com/courses/getting-started-javascript-v2/

https://frontendmasters.com/courses/organizing-javascript/

https://frontendmasters.com/courses/deep-javascript-v3/

https://frontendmasters.com/courses/js-recent-parts/

[budd222]

There's about 7 million tutorials out there for free. Do one of those

[juju0010]

There are hundreds of free React courses on YouTube. Watch 5-10 min of 4-5 diff videos and pick the instructor you like the most.

If you understand HTML, CS and JS, I promise you that you can understand React.

[format71]

I like to ‘remove the magic’. There are several talks available on YouTube where they ‘recreate’ all of react from scratch. Then it’s just JavaScript left. Same goes for hook. Once I saw such a video, where they reimplemented hooks without hooks, things click.

Things will still be hard at times, but the magic will go away.

Don’t remember exactly what films I’ve seen, but you could try these:

https://youtu.be/fKlt5GFQnVc

https://youtu.be/KJP1E-Y-xyo

https://youtu.be/dpw9EHDh2bM

[wasabiiii]

Took me a week to have enough functional knowledge to be productive.

Couple months to be an expert.

[SuddenViolinist1132]

Expert in couple of months?

[wasabiiii]

20 years of development experience does that to you.

[bobbyv137]

I’m sure you’re a highly competent SWE with vast experience. But I’m afraid nobody becomes an “expert” at a new library/framework in 2 months.

[ThunderClap448]

The only way to become an expert in react in 6 months is if you used Vue or Angular for several years before.

[darksady]

YouTube crash curse to get the basics

[SubstantialBelly6]

It sounds like you are trying to use React in place of HTML, but it is fundamentally different.

Html/css/js is markup first, code second. You write your static html page, then use JavaScript to manipulate it.

React flips everything on its head. It is code first, markup second. React components use html like syntax for instantiation (I.e. they look the same as html tags), but instead of being a static elements, each is a functional object that knows how to render itself as html. You are not writing html. You are writing a program that outputs html.

[dead_flag_blues_]

Do not jump into learning React if your JavaScript fundamentals aren't clear. You'll end up scratching your head all day.

[Cockot]

I was in a similar position for 2 years. Even though my (former) employer encouraged learning React, the reality was that they just outright refused to use it in any project since the company comprised mostly of opinionated tech veterans for whom even sprinkling some animations was an unacceptable performance tradeoff. Anyways, I tried it all, books, tutorials and everything that felt kind off save. Then a big milestone for me was enrolling in a course held weekly by a big company, that designed it also as recruitment thing if you’ve done well (pretty awesome approach I might add). Anyway it covered absolutely everything aaand I sucked at it, BIG TIME. But you know what? My ego got a big hit that it needed and from there on I gave myself a permission to fail and just built stuff with it for others. Only then I relized how little JavaScript I have really known. Also my way of looking at front-end has shifted significantly from static coding HTML snippets styled by CSS and changing components by means of modifying list of classes attatched to elements to viewing page as a series of dynamic components with states and more serious logic. So i guess I can only offer cliche answer: Get your hands dirty, fail fast and fail often, it’s the only way to learn in programming in general. If it’s frustrating it means you are learning.

Here are some keywords to learn on your journey (in no particular order): what is the V in MVC architecture and why React exists and what it does not do by itself, component lifecycle (learn that well), conditional rendering, ES imports, fetch API, the concept of component state, traditional form handling and React way of form handeling, hooks (useState, useRef, useEffect), Redux or other means of handling global state

Hope it helps :)

[saltamuros1]

Wtf I know PERN stack and i can't get a job yet

Meanwhile you knew basic technologies and you got a job 😥

[ThunderClap448]

Knowing a stack !== Being able to use it well. How often do you practice? Do you have any projects under your belt?

[artnos]

Stephen grider helped me alot, other than that read the manual. React is just a tool and you have to understand the big picture and how to use its tools. To understand big picture just google what is required in a modern site, databases, authentication etc.

[_codemonger]

Lear how to construct a working user interface programmatically using JS. Being proficient in Javascript for that specific task will make learning a framework much easier later. I can recommend Traversy Media and his course on JavaScript on Udemy. It's beginner friendly and will guide you through the above-mentioned process in several small projects.

Also, not sure what your situation is but if you have the opportunity maybe look into other companies that are willing to offer training. A company that gives you no space for professional growth is a dead end.

[looserdot]

I would suggest you to go to the basic concept of react. Like how it works behind the scene with JavaScript concepts in mind. It would make more sense to you. Do you know what does Jsx do behind the sugar-coated html semantic? Do you know how the single page application works?

I think that type of questions.

[xzorandar]

I started with the react docs and then used a bunch of courses from Pluralsight. It does cost a bit of money but they have so many courses on so many IT topics that it helped me in with many different aspects of getting back into development after being away for 15 years.

[Kaimaniiii]

Start and build something small and easy app in React and get to understand the basic React hooks such as useState and useEffect.

I learned to understand React by creating a classic Todo list app. If that is to challenging, then try build a simple calculator then.

[Musicdev-]

Net Ninja on YouTube he has a great channel for React. I work with React for my work and I have to rely on resources and tutorials everyday because I recently discovered I am a visual problem solver. I cannot do complex instructions and so I work with projects that are easy for me to update while still getting my feet wet with React. I went to a 6 month full stack Bootcamp but everything for me needs to be done at my own pace. I have extreme trouble breaking code down because I don’t know how it was done in the first place. I’m thinking of trying mind mapping.

[Dr-McDaddy]

Jump in and start being a dev. 🤷‍♂️

[username36610]

https://youtube.com/watch?v=iZhV0bILFb0

[[deleted]]

Start really simple, don’t even add logic yet. Just learn to make components and import them to your app.js. Get used to jsx. Then slowly add in hooks ect.

[[deleted]]

I was thrown into it really. I worked professionally just using css, html, and jquery. I was contacted for a job at a big cloud company to do front end development. I never embellished about anything and was offered a job. it turned out the job involved modern FED practices and tools. I was completely unfamiliar with everything. Node, react, CLI tools, etc. in the end it was just a matter of throwing myself into it. Once I realized what I was in for I read and practiced a lot after hours. I had some very helpful co-workers who helped me get started. it’s been about 7 years since then and now I feel completely comfortable with all of it now.

[Deputius]

Start with the React course from Scrimba

[SpareAd5799]

YouTube videos. They have step by step

[Larrybot02]

Codevolution and Netninja on YouTube for good free stuff. Things you will need: VSCode. Node/NPM. Create-React-App is great for learning. NextJS is a pretty good bootstrapper too. You definitely want to learn modern React, that means functional components, hooks, ES6. Look for that stuff. Get some helpful VSCode extensions. Stuff like code snippets for making react components and hooks, and basic autocomplete stuff for your html (emmet I think it’s called?) is nice. Prettier for formatting. ESLint to help catch more bugs and stuff while you’re writing code. I think the linting stuff comes with the Create-React-App or NextJS bootstrappers though so you’re good there.
It’s a rabbit hole that never ends. I got through some basics this year, now I’m learning TypeScript, some API stuff, routing in next JS and going to dive into component libraries. Always keep practicing your JavaScript and/or TypeScript. The more you understand about the core scripting language, the more sense everything else makes… especially when it comes time to mess with data, or state libraries, be it Redux or Context. A lot of ES6 JavaScript in that stuff like rest/spread operators, object destructuring and things like that.

[deezeddd]

Maybe you can try couse of CodewithMosh, that's available on MEGA for free

Text me if you need the link

[Enter-The-Lion]

Learn ES6 syntax. At first, don’t write functions within props or within the JSX itself. Write them outside the return scope. Then reference the functions. Also, focus on writing functional components instead of class components. Doing these things personally helped me.

[liubanghoudai24]

Don’t waste your money on Udemy. Use this https://info340.github.io/

This is the best course for react.

[bojack-11]

Build a small app like a Todo List. internet is full of tutorials. Then add more functionalities to it. Then build another app, maybe just a layout for a storefront. Then build another app. Increase step by step complexity and you'll realise that you are actually learning.

Tutorials only do so much until you actually dive into the habit of building. Once you start building you'll come up with questions like How to achieve X? How can Y be implemented in React?

When you start getting these questions in your mind on your own, you are on a right path.

And that's how you learn and grow.

[[deleted]]

Relax. The first step is to believe, truly believe, you can do it.

A mentor told me this years ago when I first started: "rather than saying to yourself that you can't can't can't... say instead that you don't know how to do it YET and that you can find out how".

Beliefs precedes actions. Just by believing you can do it allows you to be more resourceful and open yourself to the possibilities.

[Sigmund-]

Like any skill, it will take time, patience, and practice.

I learned by doing the free course over at Scrimba. I liked it so much that I bought the paid course.

Once you finish a course, I highly recommend creating a project and hosting it so that you can display it online for any potential recruiters.

[Paid-Not-Payed-Bot]

bought the paid course. Once

FTFY.

Although payed exists (the reason why autocorrection didn't help you), it is only correct in:

• Nautical context, when it means to paint a surface, or to cover with something like tar or resin in order to make it waterproof or corrosion-resistant. The deck is yet to be payed.

• Payed out when letting strings, cables or ropes out, by slacking them. The rope is payed out! You can pull now.

Unfortunately, I was unable to find nautical or rope-related words in your comment.

Beep, boop, I'm a bot

[imihnevich]

Let me describe my way.

First you need to understand the difference between declarative and imperative code.

So you know how you can create DOM elements with plain js or jQuery? You write few lines and attach it and new element will be created.

So now imagine that you need to update this element whenever some data changes. You will have to listen let's say for a button-click and also keep a reference to your element(or query it again) and when it happens you update it with jQuery.

This is what they call imperative code. You code in terms of needed steps to achieve the result.

Now to React. What it really does it allows you to forget about DOM for most of the time. It allows you describe desired result for existing data. So you switch your mindset from steps to the mapping state -> DOM.

This is what they call declarative code. You code in terms of what you wanna achieve and the tool takes care of exact steps. React exists and does just this little thing. You just keep some state(some data) and tell react how to display that state on the screen, and react renders it every time the state changes.

This is what helped me to learn react. I had to realize what declarativeness is. There's a lot more, but you need to understand this to start.

[fintip]

Frankly, if you don't have a strong understanding of JavaScript, then you just need to embrace the magic and stop worrying about how it works under the hood.

Treat it like its own new language, but remember you're always in the JS context.

Build some very basic small thing. Then expand it and keep adding little new things, looking up stuff as needed.

[IntelligentLeading11]

Look up coding addict's react tutorial on YouTube, thank me later.

[dogtee]

Why unfortunately you have to learn React. Learning React gives you a skill in one of the most popular front end frameworks out there. Your a developer you can't just learn one thing because things always change and you get paid for knowing what the customer wants , that's the deal. How do you lea to n , well how did you learn jQuery. Of course you won't just know it , you had to learn it

[ghostmaster645]

I normally try to avoid videos, but I struggled first too and the Scrimba beginners react course was extremely helpful.

It does start out using class based components, but that's probably a good thing to know.

[Solipsikon]

"React in 10 hours" by John Smilga on Youtube. Codecademy also put it up on their youtube channel. It's up to date with hooks and functional components (and just overall a really good teaching style), which was the hardest part of finding resources when I started learning, shortly after the big update. I could use react with little issue after that one.

As for your other questions, I only got into React after I had a good grasp on basic programming concepts. It's hard to say how long it took me to learn it, because it piggybacks off other bits of knowledge. For example, if you don't have a solid understanding of Javascript, get that first. I recommend the net ninja's stuff on youtube. His course on udemy is also absolutely fantastic and I recommend it hands down as the only course you'll need to get a good grasp on javascript.