ReactJS course starting 10 steps in

The React JSX tutorial starts off about 10 steps in.
I don’t see the full stack involved, e.g.:

  • HTML page with tags
  • Invocation of the transpiler to transpile JSX to JavaScript
  • package.json (if required)

Jumping right in without setting these up just raises many more questions than it answers.
Is there any course that covers ReactJS from ground zero ?

The courses are meant to be taken in order, so it’s assumed you know HTML5 already. As for invocation of the transpiler and package.json, that’s well outside the scope of the course, which is to teach JSX itself, not how it’s implemented.

Thanks Chuck.
I have 20+ years of HTML (5 and the rest) as well as JavaScript (Vanilla, ES5 and ES6)
The problem I have is how to take JSX and then add it to a website ?
I am unable to do that without all the plumbing and how things link together which is why I posted the question

Typically, you invoke the Babel transpiler through a module bundler like webpack, which itself has a massive learning curve. Other module bundlers like Parcel are supposed to have much less config involved, at the expense of flexibility (I’ve never used Parcel myself). You could also use create-react-app which gets you going right away, hiding all the webpack details for you.

You can also avoid the complex setup of webpack and babel and such by using an existing boilerplate setup (create-react-app is also mentioned there). It’s probably a good exercise to try to do it at least once by hand though.

I’ve found and followed a number of tutorials on webpack and react by just searching “webpack 4 react tutorial”. Try to find a recent one (thus “webpack 4”), and you’ll probably need to follow more than one. Webpack is kind of painful to learn, but it does have excellent documentation, so give it a week or two to learn it.

If the purpose is to just learn react and jsx, and avoid having to set up locally, one can also just use cdn links for the transpiler, React and ReactDOM

1 Like

Thanks folks.

I found this https_://_tighten.co/blog/react-101-building-a-gif-search-engine which has what I was looking for - i.e. clearly indicated HTML, JS, CSS etc. so I can see exactly what is present.

It may be the case that the approach taken by Free Code Camp does not fit in with the way I approach things.

That looks like an excellent tutorial indeed. I’d say FCC’s React curriculum is more about whetting your appetite for React than it is about teaching it soup-to-nuts. Hopefully the v7 project-based curriculum will start with some more fundamentals.

The simplest way of getting React up and running, JSX transpiling and all, is probably create-react-app.

npm i -g create-react-app
create-react-app <dirname>
cd <dirname>
npm start

That gives you all your standard boilerplate, webpack setup, package.json, Babel transforms, index.html content, and so on.

1 Like