How to properly setup React Hooks in VS Code?

This is the first time i use VS code to build my FCC project instead of codepen. I only tried VS Code recently, for writing some functions for my latest projects.
Im currently working on the last Project from the front-end curriculum, which im gonna write using React and also try the new Hooks technique. Ive checked few articles on the matter(how to set it) and watched some youtube tutorials and i had problems making the useState hook work with my browser, so i wanna ask whats the proper way to do it. Im using Live Server to test my code. I load react cdn’s ive seen shown on videos and react site, as well as Babel and apply it to the JS file. The Hooks guide suggests using import React, { useState, useEffect } from 'react'; , but this does not work in my case. Another youtube video called useState as React.useState, which is less convenient if you need to call it multiple times(but it does work in my case). I finally came to the solution to set a global variable const {useState}= React, which works and lets me just call useState() .

1 Like

Hooks are just part of React, so, assuming that you have a recent version of React, it should work out of the box and has nothing to do with whether you are using VSC or not.

The Hooks guide suggests using import React, { useState, useEffect } from 'react';

Yes, that would be the standard way to do it.

Another youtube video called useState as React.useState ,

These are doing very similar things. The difference is that the first way is pulling out those named exports on the import and the second way is pulling it off the module, as is your descructuring example.

They are all valid ways to do it, but I don’t understand why

React, { useState, useEffect } from 'react';

isn’t working. Perhaps there is something in your babel/webpack that is preventing you from using modules like that.

How did you set up this React project? Did you use create-react-app? Did you set it up by hand? Did you use webpack, etc?

Do you have a repo of this?

1 Like

Hey Kevin, i used the intro in this video

I also get this error on my console:

You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/

edit: its a warning*, not an error

Right, so, you have babel to transform. But you also aren’t at lease from the tutorial you are using, using webpack or anything.

The way he’s doing this is a little naive. I don’t mean that he’s a bad coder, just that the way he’s teaching this is not the way a “real” React app would be built. It’s kind of a stepping stone between doing it in something like codepen and doing it locally. There is not bundler so you can’t split things apart into modules so things like:

import React, { useState, useEffect } from 'react';

don’t make sense. That is assuming that you are using some kind of bundler so you can break your modules into different files and therefore have to import and export them. This guy isn’t doing that. He’s manually importing everything into his index.html so all of those things are globally available.

I think if you do some tutorials on how to use create-react-app, or how to use webpack to bundle things, then this will all make more sense.