Where is a track with this lesson in context of React.js?

Hey there, fellow communtiy members! I finished all the ReactJS tracks I could find but there are no lessons on Babel or Webpack setup I see here in the latest ReactJS forum category sections! I really feel the need in learning how to setup Babel and Webpack and in some sort of final project.

There are plenty of tutorials online you can find to set up webpack. I highly recommended them.

Here is what i did:

npm init

then:

npm install webpack -g # install global
npm install babel-core babel-loader babel-preset-env  babel-preset-react react react-dom webpack-dev-server --save-dev

webpack-dev-server you don’t really need, but you can use it to serve your webapp during development.

then for webpack.config.js:

module.exports = {
    entry: './index.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/, 
            query:
            {
                presets:['react']
            }
        }] 
    }
}

then in index.js i simple render the app:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App.jsx'


ReactDOM.render(
    <App />, 
    document.getElementById('root')
)

then <App /> being defined in a different file.

i don’t think there is a course on how to set this up, its also a good learning process to find this out on your own.

1 Like

Thanks a lot! It looks like what I’m asking for!
Also I found a series of articles called React Setup: Part I - V starting with this article:
https://www.codecademy.com/articles/react-setup-i
which seem to be somewhat outdated.

It also seems like there is a more up-to-date article concerning the same idea and this is awesome:
https://www.codecademy.com/articles/how-to-create-a-react-app

Though, React.js is not the easiest subject of all and it is an extremely good idea to have a final project to apply all the skills.

Again, there is a project called Jammming which can be easily found on Google. But sadly somehow it is not mentioned anywhere in the React JS course.

1 Like

i was sure that they existed, but i couldn’t find them that quickly. Why is that outdated?

create-react-app is great indeed, it takes care of a lot of stuff for you.

https://www.codecademy.com/articles/how-to-create-a-react-app is linked to in the very last lesson of the reactJS part two course:

https://www.codecademy.com/courses/react-102/lessons/updating-unmounting-lifecycle-methods/exercises/lifecycle-methods-recap?action=lesson_resume

Where do you recommend we would add it? You are the person who encountered this problem, so you are the best person to tell us. I will pass it up the chain of command regardless, but i would like to hear if you have any further tips on where to place it for example :slight_smile:

1 Like

I can’t go deep into details since I’m not an expert and I’m still bad at npm and command line but I see an older JS-syntax there, e.g. var ReactDOM = require(‘react-dom’)
I may be terribly wrong about all I say.:upside_down_face:

I don’t want to be mean. I am so thankful for all of your courses! It makes so much difference in my life that I can’t fully express it!
I just want to point at the thing I noticed. It made me even more confused because Final Project is mentioned several times throughout the lessons and I expected it.

I believe that it’s a good idea to get familiar with Creating a React App article’s info and then move to the Final Project right after Lifecycle Methods lesson.

Thanks for caring and positive impact!

1 Like

That is indeed es5 syntax. The course (reactJS) was originally released in es5, then updated to es6. Seems the article didn’t get the update. I will ask about it.

i am not saying you should be mean :wink: There is always room for improvement which can be given by learners.

we are always very glad to hear that codecademy made a positive impact :slight_smile:

and then slowly move to webpack and npm, and delving more in-depth. But create-react-app is great to get started.

1 Like

You definetely do make a positive impact on people’s lifes! The ones like me at least!:slight_smile:

Yes, of course. You’re right! That would be a perfect path: create react app -> some details on webpack & babel -> final project.

i only help on the forum, can’t remember that our paths have crossed before? Codecademy should get a lot of credit, its what got me into programming

sounds like a good plan! Good luck! :slight_smile:

1 Like

It’s a lot of work to gather opinions, to get them to the company, to respond and offer solutions to people. And that’s a really meaningful job!

Thank you!:slight_smile:

1 Like

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