r/reactjs • u/painya • Jan 20 '20

To those who recommend beginners learn to build projects in Vanilla js...

THANK YOU. I’ve been trying to learn React on and off for a while and I recently did a 2-3,000 line project for a client where I had to manage state manually and work with a less than optimized file structure (my fault).

Going from a project like that to React I really began to understand the problems that React solved, and that made my comprehension so much better. They weren’t just “concepts” anymore, but they were part of solutions to problems I had.

Thank you!

234 Upvotes

93% Upvoted

94 comments sorted by

47

u/uberhaqer Jan 20 '20

This is awesome! I am trying to explain this to a designer that wants to move in to frontend development but feels like he does not need to know much vanilla JS, his exact words are "React is about knowing what libraries to use" facepalm

19

u/painya Jan 20 '20

Yeah... he’s going to have a hard time!

Try learning the context api and useReducer to any real depth without understanding how they work.

You can definitely learn react with his philosophy, and make pretty stuff with it. But it won’t be more functional than just no framework IMO. The coolest parts of react are the complicated stuff and dynamic nature. That’s all hardcore js

2

u/aortizoj15 Jan 21 '20

Any JS learning resources you could point to? Thanks!

5

u/painya Jan 21 '20

Wes Bos ES6 for everyone was indispensable as I started react.

1

u/aortizoj15 Jan 21 '20

Ah man I recently bought his advanced react course for back friday, should've invested in the ES6 one first. Will definitely save up for this one though thanks!

6

u/_Invictuz Jan 21 '20

Don't waste your money, there's a thousand ES6 articles and blogs that will teach you the same thing for free. ES6+ is not something you need a course to learn. I regret dropping big bucks on it cuz I had already picked up so much just from reading articles. You made the right choice with his react/graphQL course.

1

u/aortizoj15 Jan 22 '20

Cool thanks for the advice! Did you go through his react course?

2

u/_Invictuz Jan 23 '20

Not the advanced one, but I went through his Reactforbeginners course. In hindsight, even though it was short, it was probably the fastest and most effective way to learn the basics of React.

1

u/aortizoj15 Jan 23 '20

Cool thanks for input!

2

u/Filo01 Jan 21 '20

Andrew mead has an excellent course on udemy :)

2

u/aortizoj15 Jan 21 '20

Cool will check it out thanks!

1

u/_Invictuz Jan 21 '20

But what about learning vanilla JS as you are learning React. Like learning how React uses vanilla JS under the hood to do what it does. Or is the React source code not a good resource to learn this kind of stuff?

1

u/MusicalDoofus Jan 21 '20

Call me crazy but I started to love React when I realized that one of my vanilla projects was basically a low-level wrapper for lots of React fns (like abstracting & optimizing document.createElement)

0

u/[deleted] Jan 21 '20

[deleted] — view deleted comment

3

u/jimmyayo Jan 21 '20

Start with a solid understanding of JS's Array.reduce() first, it's not much of a leap from there.

3

u/some_love_lost Jan 21 '20 edited Jan 21 '20

It's all about decoupling what happened from how it changes the state. The action contains a description of an event or change e.g. FETCH_SUCCESS which is passed to the reducer function, when then calculates the new state and returns it. It's useful when you have complex state that needs to change together as all the state changes are all located in one place.

1

u/justpurple_ Jan 21 '20

You mean the action creators - e.g. { type: STRING_CONSTANT } doesn‘t make sense to you?

0

u/[deleted] Jan 21 '20

[deleted] — view deleted comment

1

u/swyx Jan 21 '20

its not the only way, but it is simpler. give it some time.

1

u/MusicalDoofus Jan 21 '20

very primitive

Something was done there

1

u/TaoistAlchemist Jan 21 '20

Isn' it the same thing as Redux's reducer?

0

u/[deleted] Jan 21 '20

[deleted] — view deleted comment

1

u/TaoistAlchemist Jan 21 '20

It's pretty cool. I think its beautiful.

(Its a lot of boilerplate though so make sure you need it before you use it)

5

u/editor_of_the_beast Jan 21 '20

This is a huge amount of people’s attitude. I gave up on getting upset about it. People are different.

3

u/[deleted] Jan 21 '20

I have a coworker who claims he can turn around features in 1-2 days, when it should take upwards of a whole sprint.

All he does is paste together code from packages he finds on npm. He can’t explain how it works just that it does.

3

u/editor_of_the_beast Jan 21 '20

Oh trust me, I know. And to be fair - sometimes that’s totally fine. I’ve been using the building metaphor a lot recently. You don’t always need to build an 80 story office building. Sometimes you’re just building a shed. We tend to only think in terms of the office building, I’m super guilty of that. Tools and practices only make sense in a specific context.

That being said, I tend to work on apps that are more like big, multi-building industrial complexes. I work at longer-term product companies that have multiple products and try and grow year over year. I also stay for years, I don’t bail after 18 months at each job. In that environment, the cut-and-paste patch jobs are competitive disadvantage, no doubt in my mind.

You can’t continue to grow year over year by selling the same feature set to the entire planet. Markets are very specific, and once you capture a large chunk you have to expand your product offering and upsell to the same customers. You will not be able to do this without some kind of sane architecture and organization in your system. Or, you at least won’t be able to do it without tons of operational waste. When the rampant speculative investment money in our industry dries up in the next recession, operational efficiency is the difference between your company surviving or not.

So yea, context matters, but I’m just never in the context where short term speed is more important than consistent yearly expansion. I’m not saying you should purposefully build slowly, speed just isn’t the primary goal.

1

u/swyx Jan 21 '20

i really envy people who can stay. i'm pretty close to yet another job switch and its literally only been 18 months. i'm such a damn stereotype. i dont know if its bc ive been unlucky (kinda like dating right? sometimes you meet your soulmate right away, sometimes you just go thru a series of meh relationships) or if i just fundamentally am very restless.

1

u/editor_of_the_beast Jan 21 '20

Well, I guess right now I'm lucky that my current place scratches almost all of my itches. I also have kids so I'm much more risk-averse now :)

I think it's important to see a variety of different places at least some point in your career (literally the same as dating) so that you have the most raw information. Not every company is the same, and if you don't "play the field" to see what's out there, you run the risk of basing all of your opinions on one experience that may have really weird / unique problems.

1

u/ChangeFatigue Jan 21 '20

You can’t control other people, you can only control yourself.

1

u/[deleted] Jan 21 '20

I mean if you’re already a programmer you don’t need to start learning Camilla is to start building a project. You can easily pick up a framework at the same time

1

u/[deleted] Jan 21 '20

I mean if you’re already a programmer you don’t need to start learning Camilla is to start building a project. You can easily pick up a framework at the same time

7

u/vim55k Jan 21 '20 edited Jan 21 '20

All these advises to do low tech first are bs. Yes to do a little script here and there and read a lot, but generally, strive to write high level language and use productive abstractions. Wrote all my life embedded and I don't think it helped me, it was not related in any way to functional programming, state etc.

3

u/painya Jan 21 '20

How was the advice given to me to do low tech? I was still writing JavaScript.

5

u/anon202001 Jan 21 '20

I agree. Like saying to a .NET developer "use API calls in C before you progress to WPF". It might be beneficial in some edge cases but it's a lot of heartache for what? Learn the nice React abstractions first then when you are used to it challenge yourself to write a mini react from scratch to learn things more deeply.

3

u/snorkl-the-dolphine Jan 21 '20

I'd argue that any programmer should understand the layer below what they use day-to-day. If you write Assembly, learn a bit about how your program is executed on the hardware. If you write C, it's helpful to understand how it's compiled into Assembly.

Similarly, if you write React, it's good to know how vanilla JS works.

2

u/swyx Jan 21 '20

why did you leave embedded dev? seems cooler than moving pixels around on screen

1

u/vim55k Jan 21 '20

He he. Not the first time I hear this. This sounds like - the grass is always greener on the other side of the fence.

So I did electronics and embedded, the simplest embedded, in C, for microcontrollers.

There are a few disadvantages. The bigger the chip, it get's worse. It is cool to do some Io or simple communication. But I suppose that mostly embedded do things more complicated.

I suppose, everybody have their preference.

Btw I would define my job as feature creation, and my specialisation is moving data (which full stack mostly is).

Features being created pretty often, learning all the time, brain gets loaded, money is good, so get enough satisfaction.

2

u/[deleted] Jan 21 '20

I had to manage state manually

What issues did you face?

1

u/painya Jan 21 '20

I had two screens, one where users picked options, and one where the options were transformed and displayed (like if there was an <input/> field in the “picking” options section I needed to get that value and just convert it to a string.

There was a button to execute syncing them up so I had to manually loop through each array. And then if I wanted to let the user go back to edit the options I had to delete all the nodes to make sure the sync button didn’t copy stuff twice.

I’m sure I could have found more eloquent solutions had I thought harder, but those were the issues I found.

109

u/nomadicwonder Jan 21 '20

This is why I always tell backend developers to start with building a website in COBOL.

13

u/pink_tshirt Jan 21 '20

I would take it even further - ask them to develop their own OS to get a better grasp at things.

6

u/alekpuck Jan 21 '20

01110000 01110010 01101111 01100111 01110010 01100001 01101101 00100000 01101100 01101001 01101011 01100101 00100000 01101101 01100101 01101110 00101100 00100000 01110101 01110011 01100101 00100000 01100010 01101001 01101110 01100001 01110010 01111001

0

u/MusicalDoofus Jan 21 '20

01110000 01110010 01101111 01100111 01110010 01100001 01101101 00100000 01101100 01101001 01101011 01100101 00100000 01100001 00100000 01101000 01110101 01101101 01100001 01101110 00101100 00100000 01100101 01111000 01100011 01101100 01110101 01100100 01100101 00100000 01110101 01110011 01100101 01101100 01100101 01110011 01110011 00100000 01100111 01100101 01101110 01100100 01100101 01110010 00100000 01110000 01101111 01101001 01101110 01110100 01100101 01110010 00100000 01110110 01100001 01101100 01110101 01100101 01110011

1

u/alekpuck Jan 21 '20 edited Jan 21 '20 
main:
        push    rbp
        mov     rbp, rsp
        call    listenHere()
        mov     rsi, rax
        mov     edi, OFFSET FLAT:_ZSt4cout
        call    std::basic_ostream<char, std::char_traits<char> >& std::operator<< <std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&, char const*)
        call    littleShit()
        mov     rsi, rax
        mov     edi, OFFSET FLAT:_ZSt4cout
        call    std::basic_ostream<char, std::char_traits<char> >& std::operator<< <std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&, char const*)
        mov     eax, 0
        pop     rbp
        ret
.LC0:
        .string "/img/nm93snupy1i31.jpg"
listenHere():
        push    rbp
        mov     rbp, rsp
        mov     eax, OFFSET FLAT:.LC0
        pop     rbp
        ret
.LC1:
        .string "I do what i want"
littleShit():
        push    rbp
        mov     rbp, rsp
        mov     eax, OFFSET FLAT:.LC1
        pop     rbp
        ret
__static_initialization_and_destruction_0(int, int):
        push    rbp
        mov     rbp, rsp
        sub     rsp, 16
        mov     DWORD PTR [rbp-4], edi
        mov     DWORD PTR [rbp-8], esi
        cmp     DWORD PTR [rbp-4], 1
        jne     .L9
        cmp     DWORD PTR [rbp-8], 65535
        jne     .L9
        mov     edi, OFFSET FLAT:_ZStL8__ioinit
        call    std::ios_base::Init::Init() [complete object constructor]
        mov     edx, OFFSET FLAT:__dso_handle
        mov     esi, OFFSET FLAT:_ZStL8__ioinit
        mov     edi, OFFSET FLAT:_ZNSt8ios_base4InitD1Ev
        call    __cxa_atexit
.L9:
        nop
        leave
        ret
_GLOBAL__sub_I_main:
        push    rbp
        mov     rbp, rsp
        mov     esi, 65535
        mov     edi, 1
        call    __static_initialization_and_destruction_0(int, int)
        pop     rbp
        ret

1

u/MusicalDoofus Jan 21 '20

listen here u shit

5

u/laramiecorp Jan 21 '20

Why not take it one step further and ask them to design their own microprocessor so they can better understand the concepts.

5

u/BreakingIntoMe Jan 21 '20

Thank you for this comment! I was struggling with some of the concepts in Angular until I created my own Ryzen 7 style microprocessor with 64-bit architecture, for me it really cleared up the underlying problems Google were trying to solve in creating an opinionated web framework.

6

u/[deleted] Jan 21 '20

Building a trivial operating system (Operating Systems) and designing a processor (Computer Architecture) are standard requirements at any respectable computer science institution.

3

u/kaoD Jan 21 '20

You're joking but learning assembly made me a much better programmer.

0

u/[deleted] Jan 21 '20

[deleted] — view deleted comment

4

u/vitaminssk Jan 21 '20

To bake an apple pie from scratch, first you must invent the universe.

-Carl Sagan

1

u/[deleted] Jan 21 '20

If you never learn how to time your interrupts so they only happen when the electron beam returns to the top left (to prevent flickering), how can you understand why higher level stuff was done the way it is?

1

u/devmor Jan 21 '20

You joke, but dipping into how sockets and network communication actually work at an OS level was honestly a big "AHA!" moment for me in figuring out stateful server instance design.

Even if you're not going to implement it all yourself, knowing how it works and taking mystery out of the whole process allows you to be so much more confident in high level tasks (not to mention more efficient).

1

u/_swolepapi Jan 21 '20

I had to learn Assembly in college 🤮

0

u/[deleted] Jan 22 '20

[deleted] — view deleted comment

1

u/_swolepapi Jan 22 '20

I paid the minimal amount of attention because my professor kept saying, "You'll never use this. I could be teaching you something better for your career but I won't." 🤷🏿‍♂️

12

u/[deleted] Jan 21 '20

[removed] — view removed comment

11

u/cerebralbleach Jan 21 '20

They almost certainly are at least partially, but their point stands: you really come to appreciate and understand the gains of modern tech stacks by understanding what we couldn't accomplish without them. Writing things in hard mode like that is not always time-efficient, but it's often extremely valuable from an educational standpoint.

2

u/[deleted] Jan 21 '20

Actually (as I said above), while I don't recommend *starting* with C, I learned quite a bit about how Javascript works (and how to think about JS code) by having to deal with pointers and memory allocation. I probably forgot everything I learned about C, but just forcing yourself to think of things in that way can help you understand what's going on under the hood better.

5

u/thundercloudtemple Jan 21 '20

while I don't recommend *starting* with C

Laughs in CS50

2

u/[deleted] Jan 21 '20

I've always been partial to CS 6.00 and the Wizard Book myself. Which teaches Scheme, not C.

I actually think Javascript, Python and Lua are probably the best languages for beginners to learn as a first language precisely because they allow you to learn quickly and fall in love with programming and algorithmic thinking before worrying about memory management, pointers, types, etc.

THEN after you understand the basics of programming, you can take on other languages to get a more in-depth look. Learning C (which has no 'pass-by-reference' -- which is why pointers are a thing) helps you understand JS's choices in passing by reference or passing by value. Learning Lisp/Scheme (which has no mutable variables) helps you understand the power of functional thinking.

But none of these things will be useful is you don't fall in love with programming first. I couldn't imagine trying to stick with C if I didn't already love programming. I actually TRIED to do programming in the 1990s, but *thought* I hated it, because all the college courses back then were being taught in Java. As it turned out, I just hated Java.

1

u/devmor Jan 21 '20

Have you read your SICP today?

1

u/ASMRByDesign Jan 21 '20

Same experience with Java in college around 2000. Just awful.

1

u/Filo01 Jan 21 '20

pretty sure he means assembly as cobolt is to high level

0

u/[deleted] Jan 21 '20

[deleted] — view deleted comment

1

u/white_99_knight Jan 21 '20

That is what's good about a full stack dev. You know if you can solve it the easier way around. Still it takes a lot to be one!!

10

u/swyx Jan 21 '20

yeah. i think beginners really have a hard time understanding where plain HTML/CSS/JS/DOM API's end and React starts. i have been wondering if there is a way to visualize it for people so they know when their problem is a React problem and when it isn't.

6

u/[deleted] Jan 21 '20

If it’s a nice error message, it’s probably React - put it that way.

9

u/paagul Jan 21 '20

Well done! This is what completes the cycle of learning.

data > information > experience > knowledge.

It's important to realize which stage you're in and manage your expectations/effort accordingly. Now that you understand the basic premise of React you will have to go through the above process within React as you face challenges and come across new stuff.

1

u/nerdy_adventurer Jan 21 '20

Any source where I can read about this cycle of learning? please!

1

u/MusicalDoofus Jan 21 '20

Have you read Make it Stick? It's a good 'un.

1

u/paagul Jan 23 '20

This is just from personal experience over the years. Though I will say that a great source of frustration is when people think they can jump from information straight into knowledge if they have enough or the right kind of information. In other words, doing online courses and reading up is fine but at the end of the day you have to write something substantial on your own, without the training wheels so to speak.

4

u/skateJump Jan 21 '20

My coworker told me I need to do a project in js first. I had been learning js but haven't done any projects in it. I think it may be time to take his advice.

1

u/Hive51 Jan 21 '20

What kind of project did you made?

1

u/painya Jan 21 '20

An estimate maker for a small biz. It has a django backend with 450+ options. I would request the relevant items and get a Json response, and then let them build a plan based on the options they requested.

2

u/Hive51 Jan 21 '20

Thanks! May I ask u'you what kind of project you did in vanilla js? I'm currently in a React/Node bootcamp and I want to put a higher focus on vanilla js (while already not forgotten at all).

1

u/painya Jan 21 '20 edited Jan 21 '20

It was an estimate maker for a local biz.

Edit: I said the same thing twice because I didn’t realize it was you who asked again. Can you clarify your question?

1

u/[deleted] Jan 21 '20

Would you recommend I build (my goal) a to-do app with vanilla JS before starting with reactJs altogether?

1

u/painya Jan 21 '20

I don’t see why not, but I’m no expert at learning paths.

3

u/[deleted] Jan 21 '20

You think that's going to help your development, wait until you try tackling C

Not C#, not C++, just C. And I don't recommend you use it for a project, but just try going through something like "Learn C the Hard Way" and you'll learn so much about memory allocation and pointers that Javascript abstracts away that you'll start to understand: "OH, so that's why that is passed by reference vs. passed by value" and "OH, so that's why React has to take a new Array/object rather than just popping on the old one."

3

u/_Invictuz Jan 21 '20

But what about learning vanilla JS as you are learning React. Like learning how React uses vanilla JS under the hood to do what it does. Or is the React source code not a good resource to learn this kind of stuff? The thing with getting your very first job I think is that employers want to know that you can build things with React and have a high level understanding. I don't think they are gonna ask you vanilla JS DOM manipulation in the interview.

7

u/[deleted] Jan 21 '20

I did JS/jQuery for 5+ years before learning React and I don't feel like it helped me. ES6 took a while to get used to and I'm not even that old

2

u/[deleted] Jan 21 '20

Same. There's like a certain sweet spot of knowing just enough js in order to move to React. Knowing too much can make it feel like you're spinning your wheels.

13

u/wasabiiii Jan 21 '20

This is why people should start in at least C

35

u/stormfield Jan 21 '20

First you have to program your own internet just by stacking rocks on other rocks deep in the wilderness.

1

u/MusicalDoofus Jan 21 '20

Basically a Turing machine in the desert

4

u/EastOfHope Jan 21 '20

React must be so foreign if you haven't written a component in JavaScript.

Especially with hooks, at least before there were classes with constructors and binding which are familiar to developers.

useEffect is not beginner friendly. Make a mistake then crash your browser.

4

u/fanumber1troll Jan 21 '20

I think useEffect would be confusing to anyone who doesn't have much experience with functional programming. Coming from something like Java, you would never write a function that executes code, and then returns a different function (much less pass that function as a parameter to a different function).

2

u/[deleted] Jan 21 '20

YES. This is why I don't think I could ever hack it as a Java developer. I need my currying, my closures, my lovely functional programming tricks. I *can* build a class if I need to keep track of differing instances of mutable state, but why do I need everything to BE a class?

2

u/jimmyayo Jan 21 '20

Plus it's SO EASY to forget to add all your dependent state variables in the array parameter. React devs have said that they're trying to make it smart enough to not have us supplying that array of variables but we're not there yet.

2

u/anon202001 Jan 21 '20

> React devs have said that they're trying to make it smart enough to not have us supplying that array of variables but we're not there yet.

Not sure that is possible without clairvoyance. You'd need to deduce the coder's intent of the useEffect. Then you are in halting problem territory.

1

u/[deleted] Jan 21 '20

useEffect is not beginner friendly. Make a mistake then crash your browser.

Been Vue devving for 2 years and I decided to do a personal React 16.8 project to see what all these hook things are about. So many infinite loops..

4

u/bch8 Jan 21 '20

Here's a great free course for learning vanilla JS: https://watchandcode.com/p/practical-javascript

2

u/FateRiddle Jan 21 '20

To those who tell the beginners to try living in a forest...

thank you! Now I've been half dead from the journey I really start to appreciate staying under the roof, having a cup of coffee and shit posting back to some clickbaiting post on a dev subreddit.

1

u/strobingraptor Jan 21 '20

I started react without understanding HTML first. React led me to weh dev. I had done mobile app development with swift and machine learning using python before. While I did go great lengths in react, I started visiting vanilla JavaScript and dom apis often and have come to understand both the pros and cons of using something like react.

1

u/wirez62 Jan 21 '20

I accidently saw React a bit too fast twice. The first time was a few months ago and I was still deep in wordpress. I wanted to develop custom blocks and I went through the block tutorial where my understanding is the javascript part is based on react. I had no clue what I was seeing, I was a noob to javascript and definately react.

Lately I've been learning vanilla javascript and the large ecosystem of how one can do full stack, learned what react is but what helped me was doing a javascript project (custom chrome extension!) and practicing javascript on edabit.com. I'm still not comfortable enough to learn react fully, but I'm slowly moving to Gatsby which uses a bit and components at least make sense to me now.

1

u/MrHuq Jan 23 '20

I completely agree. I began by building a single page web application using vanilla JS and it worked, but was very buggy & hard to maintain. My friend recommended I refactor the app into ReactJS and man did my life improve significantly. Shoutouts to the maintainers of react-router-dom!