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


#1

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.


#2

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.


#3

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.


#4

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:


#5

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!


#6

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.


#7

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.


#8

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:


#9

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:


#10

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