Moving from React on fCC to VS Code. STEEP learning curve?

JavaScript
1

“Is moving from React on fCC to React on VS Code really this troublesome??”

Hi everyone, thanks for your time.

So I completed the Front End Deevelopment Libraries unit a couple months ago, then spent some time practicing my HTML/CSS/JS skills doing several projects in frontendmentor (not with React), and now went over the React section of Front End Development Libraries unit again and decided to take on a frontendmentor project but, this time, using React, so I get more practice with it. I felt pretty confident about it as I did well working with React on the fCC course, but trying to get it to work on VS Code has been very challenging and I just wanted to know from you if this is normal or even necessary, because it feels like a big leap in terms of difficulty and hassle.

  1. I understand fCC (also CodePen) took care of getting React to work behind the scenes so we wouldn’t need to worry about the setup (at most, we had to write “import React from…” or something like that), but trying to get it to work locally on VS Code has been significantly different: downloading node (node-v20.10.0-x64, in my case), using the terminal to get I-don’t-even-remember-what-anymore to run (“npx create-react-app [app-name]”, then having it install tens of thousands of files… For context, this is one of the tutorials I followed: https://www.youtube.com/watch?v=av5fmpgEJSU&ab_channel=RishavChanda

  2. The first issue I run into (lies, I actually ran into other issues before for which there was no reason to come up, but managed to deal with them) is, if you’re watching the video I provided, that after running “npm start”, I never, EVER get the damn screen at 8:09. The browser always loads a page that reads “Index of” with links to all the files in the folder.
    Sin título

And even if I click on /public which renders the index.html file, direct changes to this file will render, but nothing on the App.js file renders, even though it is set to be rendering on a < div id=“root” > element in index-html, much like the fCC exercises which use “ReactDOM.render(< App/ >, document.getElementById([target node ID])”. Nothing drives my as insane as doing everything exactly as in the tutorial and my computer returning an entirely different thing.

  1. The other thing that surprised me is how massive the file size is for React apps. For context, I have about 13 folders of FrontendMentor projects, and they all amount to less than 3 mb combined. However, running “npm start” added over 40.000 files that amounted to over 300 mb for only ONE project folder. Is it normal for React projects to be this huge? It feels unnecessarily complex. I was only looking to create single-page application with 2 or 3 different states.

PS: I have previously done one React project working on CodePen and then exported that file, everything went well, but I was really looking forward to using react on VS Code as it is a much more convenient development environment, but this whole ordeal really put me off. I’ve been struggling with this damn thing since yesterday. Does anybody have any advice? Or any input as to whether or not using React on VS Code really is this complex and the file size so big? And why the hell do I get that “index” screen of getting the React app to load like in the video at 8:10 ?

A big thank you to anybody who takes the time to read and reply. It really is very frustrating when you do well on an fCC unit, only for you to run into such a roadblock from the get-go the moment you try to do something outside of fCC.

2

Short answer:

  1. Use Vite, not CRA.
npm create vite@latest
  1. Use pnpm instead of npm. It will save you on disk space and is generally faster.

Not sure why your development server isn’t serving the app correctly. But I would use Vite and post again if that also is giving you issues.

Yes, the apps in development are huge, welcome to the wonderful world of npm packages. The dist version (your build output) will not be anything like that although still not small compared to normal static sites. If you want a static site I would give Astro a look (you can still do client-side stuff using frameworks on top of it).

3 Likes
3

Thank you very much for your time, Lasse (my posts aren’t usually short reads). I’ll save your tips for future reference for when I eventually try to work with React locally again. For now, I finally opted for doing as much of the HTML/CSS work as I can on VS Code, and then moving everything to CodePen to take care of the JSS/React portion there, and just export the file. Not the most convenient thing in the world, but trying to get Node/React to work locally on my PC was so frustrating and ended up wasting so much time that I’ll probably wait some time before giving it another go (but will make sure to come back to this post when I do).

Thanks again for your advice, and have great day!

1 Like
4

Take a break for a few days, make sure you ahve the latest node installed, then use the vite instructions

Create react app is no longer supported so it’s not surprising it’s causing you problems.

it will really benefit you to be able to code locally and not have to rely on Codepen, but for now do what’s fun to keep you enjoying coding.

here is a reasonable tutorial:

2 Likes
5

Thank you very much for your time as well AdventureBear!

2 Likes
6

Did you try Vite? It really should work with little to no effort.

If you do want to use an online editor for React I would highly recommend using Stackblitz or Codesandbox.

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.