Django + Babel + Webpack + React Tutorial

[@trainchen9861]

First, thanks for this great tutorial! I had to add "options" object like this in webpack.config.json so that building webpack doesn't result in "Unexpected token" error(referring to "

[@abhijitghate6042]

Thanks!! I was stuck there too! Helpful!

[@frankhuff6922]

Thank you for posting this!

[@brent9512]

This was awesome - so much more straightforward than other tutorials. Thanks!

[@Yunbeomsok]

If anyone gets the "Unexpected token" error, create a .babelrc file and place it in static/src where the package-lock.json and package.json files are. Add the following to the .babelrc file { "presets": ["@babel/preset-env", "@babel/preset-react"] }

[@bopeng3299]

I have to leave a comment here, very useful stuff for combing Django with webpack! I've been searching for this for a while. Thanks

[@heyitsmeraaj]

hii page is not reloaded when I change anything in index.js. How can I fix this

[@fredyortegon]

Hello Chris, thank you very much for the video. I have tried to step by step your project several times from scratch, but when I change the index.js and show "this is JSX" and run $ npm run webpack again and then the server. When loading the url, the alert continues to appear as if the index.js had not changed. do you know what can be?

[@shaileshmourya3100]

index.js file is not rendering. hello world is displaying but alert is not working

[@ismailhossain964]

Can somebody advise me about something. My entire project is in django. I had two pages in my entire app where lot of user interactions needed. So build that two pages using react, text/bable script. I used react using CDN. Everything was working fine. But When i published the project in VPS. That specific two pages gives me "Server Error" I dont want to make the whole application in react. Just that two specific pages

[@realchrishawkes]

Did you ever figure this out?

[@streetmoney7393]

Chris, Thanks for this tutorial buddy. I am learning Django 2.2 and I am kind of getting to know how each part fits in. Know lotsa JavaScript and done it for 3 years. But didn't know where to merge what I know into Django. Thanks again

[@LS-ws3dp]

excellent video! these four are all I need:) I have a question, what is the purpose of the "js" folder?

[@realchrishawkes]

Watch the video lol. It's just simply for where JS files will go in the future.

[@alvanzaputra5839]

got error when running webpack after configure the react into index. js ReactDOM.render( > 5 | | ^ 6 | From JSX 7 | , 8 | document.getElementById("root") its look like some setting on my IDE/ I dont know.. please help .. :( .. 3 more minute to finish your great tutorial.

[@realchrishawkes]

Your code is choking on the JSX. Look at my package.json file and the webpack config. Your missing settings I did to get that JSX/REACT to compile.

[@ShivamSingh-wh9jj]

I also have same problem plzz help me

[@drewipson838]

Add this object to your webpack.config.js file and replace the rules object he has listed in the video: rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/react',{ 'plugins': ['@babel/plugin-proposal-class-properties']}] } } ]

[@TorIvanBoine]

7:00 haha :D

[@lowkeygaming4716]

Maybe he meant mother fairy 😂

[@mdxprograms]

how does this work in conjunction with collectstatic or whitenoise? Is there a way to define specific assets that get collected so that the src and webpack.config.js don't get transfered over?

[@lowkeygaming4716]

Great tutorial. Clearer than those that I found on other channels. I wish there's a vuejs version too, most steps of the setup is the same but there are still some small differences which can still be so confusing for newbies in jsframeworks like me.

[@johndoggett4657]

Is django worth learning if I am trying to get a web developer job?

[@arturo_gomez]

Hi Chris, Great tutorial. I would like to know if the source code is available on GitHub? Thank you

[@benklan]

Very very helpful! Great balance between being concise and including the necessary details. Thanks! =)

[@realchrishawkes]

Glad it was helpful!

[@nadaralpenidze9549]

Hey, awesome video!. If you or anyone can help me uploading such setup to PROD would be lovely.. I'm trying to upload this to Heroku but having some difficulties. I can't manage to let Heroku run a postbuild command to create a webpack-build, since it doesn't live on the root of the project. Am I missing something? since the package.json located inside a static folder you can't access it. Help would be appreciated !

[@nadaralpenidze9549]

What I've managed to do is build the client manually running Webpack --build and then uploading the dist files on Heroku manually. But it isn't maintainable and certainly doesn't work with CI/CD

[@mohammadsamir2713]

7:00 it seems that the notification was from your Mother, she took your mind LOL

[@realchrishawkes]

lol :)

[@bishwobhandari7219]

Can u make a video of doing a CRUD operation on this project?

[@skyblaze6687]

can i ask why u not use complex code? u scared o,o the main issue these all people face is image transmission cause their many features not work npm install --save-dev webpack-bundle-tracker pip install django-webpack-loader

[@mxschmitt_]

Why no create-react-app?

[@realchrishawkes]

Too bloated

[@SiddharthPant]

@@realchrishawkes Actually thanks that you don't. I never was able to grasp the whole picture of the webpack builds despite knowing what it does and use it professionally. But Now that you have shown it from the ground up it all finally makes sense.

[@_romeopeter]

Thanks for this video. This was a great tutorial showing how to setup a modern django application.

[@realchrishawkes]

Thanks for watching and commenting!

[@InSaneRoGer112003]

why i am not able to install babel Unrecognized token in source text. At line:1 char:16 + npm install -D

[@InSaneRoGer112003]

plz help

[@realchrishawkes]

Your exactly typing this? npm install @babel/core -D

[@saitaro]

woo-hoo! this is my stack. I'm making some tea and gonna watch it like a pro. Edit: Done. Chris, do you think having the React project inside of the Django one is a good idea? When should I use DRF + React feeding form it separately?

[@foundaneer8606]

This is exactly what im looking for. Thank you man!

[@realchrishawkes]

Glad I could help!

[@bobc8190]

super clear tutorial awesome

[@bartosz5882]

Thank you, that helped me a lot

[@realchrishawkes]

Glad it helped!

[@unregisteredaccount6555]

Is this... dev ops?

[@skyblaze6687]

Nvm matter solved thnx