I have to complain about this

Contributors
1

I just finished the Front End Libraries Cert courses, and I’m just starting the five Front End projects. On the very fhe first step, I’m completely stuck. Although the lessons told me how to use these languages, none of them ever taught me how to set anything up. All the lessons took place with FCC code running in the background. All the setup code, at every step, was hidden. I have no idea how to set up the code myself.

The only thing I’ve been told about this is at the very end of the React/Redux lessons, on how various scripts are imported into the main site data and used from there.

It also says “Alternatively, you can enable Babel as a JavaScript Preprocessor in CodePen, add React and ReactDOM as external JavaScript resources, and work there as well.”

I have no idea how to set up React, ReactDOM, Redux, JQuery, etc., because none of it that was ever explained. Everything at every step on how to set that up was hidden.

My takeaway from this is there needs to be a lesson, or a set of lessons, in the Front End Libraries Certification course, on how to actually implement various libraries in your page or app, and then have it done the person taking the lesson do it from scratch - like a big review lesson.

I understand part of the FCC learning method is looking things up, but leaving this out completely seems like a big oversight. People learning need to be told, if even just once or twice, what the background code is that’s making this work, how it’s being implemented. Not specifically how it’s working with FCC’s editor, but how it’s supposed to be implemented in a page, as if working from scratch.

2 Likes
2

If you are going to use React then I would recommend you use create-react-app for your first project as it basically sets everything up for you and all you have to do is add your JS source files.

1 Like
3

Setting up a React project by hand is… a bit of a pain. There are a lot of moving parts, and various libraries and dependencies go out of date at a rapid pace. In fact I am having some trouble with a course from 2019 I am taking because it is already out of date. It might be too much to ask for FCC , which is free after all, to set that up and maintain it.

I second the recommendation of just typing in good 'ol npx create-react-app.

But if you want to learn how to do it by hand, you can just google that and I’m sure you will find multiple blog posts that walk you through it.

2 Likes
4

open the pen settings, in the JavaScript part set Babel as preprocessor if you want to use React and import the external JavaScript resources adding the links in the boxes below - you can use the search box to find them.

in the CSS part of the settings you can change preprocessor if you want to use SASS

You can also add the tests link as external script resource there instead of having the script tag in the HTML editor

1 Like
5

Others have dealt with the “how do I get started” portion - I’ll take a crack at the “something is wrong here” portion.

Of course we’re getting into opinion here, but personally I like that FCC doesn’t hold your hand the whole way. I think the trend is going in the wrong direction. I think being able to research and figure things out is an important skill. I think we are at risk of building a generation of developers that can’t figure things out. I often get amazed when a junior developer comes to ask me a question that would take less time to google, and then expect me to explain it to them.

Learn to google, check stack overflow, read the docs.

A google of “setting up react on codepen” yields several results, including from this forum. If I look on youtube, I find videos, some from FCC.

I was recently wanted to learn a new library and integrate it into a project. No one sat me down and gave me a checklist. No one gave me a tutorial, a step by step learning progression to get me to where I understood it. No, I had to dive into the docs, do some google searches, do some experiments, and make some mistakes. That’s how it is in the real world.

I know some people may disagree, but I think we do learners a disservice when we molly coddle them. Read - Search - Ask. That is a great motto, not just for FCC campers, but for devs in general. In the real world, not everything gets spoon fed to you.

11 Likes
6

Let me also make it clear to windowpuncher that I’m not trying to put you down. I know this is tough. I remember the struggle. But I learned a lot from that struggle, things that made me a better developer.

6 Likes
7

freeCodeCamp also tries to be pretty platform agnostic. How to set up your project is going to depend on where and how you are choosing to build it. Most people use CodePen, but some people prefer other online platforms or to build locally. Giving instructions for setting up a project outside of freeCodeCamp could
a) confuse people who are building their project elsewhere.
b) easily become problematic when these platforms, which are unconnected to freeCodeCamp, change.
In this type of scenario, giving bad information is worse than giving no information.

2 Likes
8

Absolutely, and I fully understand that. I’ve been doing that from the start, because not only is it (personally) easier to look something up quickly than bother someone for help, but it’s usually faster, like you said.

My main complaint is it feels jarring after learning about ~5 different API’s and all about how they work, but not how they’re implemented. I wouldn’t want someone to hold my hand through it, but it would be nice to have a review lesson about the basic theory of how API’s are usually included in various bits of code.

1 Like
9

Yeah, I get that. Maybe there should be some kind of warning text explaining that this is a big step and that they will need to do some research.

10

Blockquote
“what the background code is that’s making this work, how it’s being implemented”

Actually, that is not within FCC’s scope. FCC exists to teach how to code in various technologies, not how to set up those technologies. If it did, there would be mission creep.

Notwithstanding that, it is not too hard to setup a React environment.

  1. Install Node.js on your computer
  2. From the command line run:
npm install -g create-react-app
npx create-react-app myfirstreact 
cd myfirstreact
npm start

Take a look at: React Tutorial

Also, React might be somewhat difficult to get working on CodePen, but codesandbox.io is a similar service where it is extremely easy to get React working. A simple way is to first upload your React app to Github, and codesandbox.io will allow you to import it and immediately have your React app running .

12

Hi @windowpuncher!

I share the same opinion as yours.

I have just finished my first project in this certification and it took me a lot of time and patience, but I think it was worth it, I have learned a lot.

And about a project with this kind of complexity, I think the CodeSandbox is a better online tool then CodePen.

I am letting here my recomendation to the FCC administration (@ilenia, @kevinSmith, @ArielLeslie) about CodeSandbox.

13

I mean, it would be cool if there was a section on how to set things up. It might even have detailed tutorials on webpack, babel, and whatnot. However, creating that as a part of the curriculum with step-by-step challenges and tests would take a lot of work. Maintaining it and keeping it up-to-date would likely also be very challenging.

Information like that is better served as guide articles with links to docs, etc. and I see no reason why the intro section for both the RWD and front-end projects would not be able to have some links to some guides…well that is except for the fact that someone has to actually write and maintain them, which again is easier said than done.

I agree about Codesandbox. Migrating the example projects and starter boiler-plates to Codesandbox would be better in my opinion.

1 Like
14

fyi, we are just volunteer mods

also, I know the long term goal is to move as much as possible “in-home”, to avoid having users need to open various accounts around, we will see how it evolves

1 Like