Creating and setting up your own React project from scratch can be, at times, a little bit tricky, even though it's not your first time starting a ...
For further actions, you may consider blocking this person and/or reporting abuse
You don't need an Express server though. Better use live-server, even better, use webpack-dev-server which not only run the app on localhost but also supports HMR for CSS, JS along with in-memory compilation for faster dev builds and has historyFallbackApi option. Express server is simply an overkill, not to mention the management overhead.
I was about to mention just this
Great article though @underscorecode
An why using --save-dev. Will it still work without using --save-dev?
Google it.
I got this error after following everything:
PS C:\Users\USER\projects\reactProj\react-manual> npm run build
'rm' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code 1
npm ERR! path C:\Users\USER\projects\reactProj\react-manual
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c rm -rf dist && webpack --mode development
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\USER\AppData\Local\npm-cache_logs\2021-06-07T10_51_10_993Z-debug.log
PS C:\Users\USER\projects\reactProj\react-manual> npm run build
'rm' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code 1
npm ERR! path C:\Users\USER\projects\reactProj\react-manual
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c rm -rf dist && webpack --mode development
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\USER\AppData\Local\npm-cache_logs\2021-06-07T10_51_29_766Z-debug.log
PS C:\Use
what does this mean?
Good post. Just a few questions from my side: for the webpack css loader you included solutions for plain css, and for sass & less preprocessors, but for use a css in js solution, what loader should I use? Also I will love to see a config optimized for production later maybe in another post. Thanks in advance.
I guess you mean PostCSS. There’s actually a Webpack loader for it as well, which is
postcss-loader
, and you can give it a basic configuration like the following:Note that you’ll also need to install
postcss-preset-env
.Happy coding!
Forgive my ignorance. I don't know if we are talking about the same so I'll explain. I mean all the CSS in JS libraries out there like styled-components, JSS and others. Those are the ones that use the PostCSS loader? Thanks in advance
I'm so glad I found this and a special thanks for including express I wanted to see how the integration works for so long.
You can also try parcel or esbuild to do that, better results with a lot less code.
Anyway post was worth reading.
I'm glad you found it useful.
showing the file structure would be really helpful. i try to make
App.js
but it wont let me because it shares a name withapp.js
even with the capitalization. does everything just go in the root? are there other folders?I wanted to know how to add React to my HTML.
It's something I wanna do to practice and learn REACT. Because my computer cannot load node at the moment but then I cannot wait for a new computer.
Any ideas ?
Nice and informative
Thank you!
Cool idea.
Thanks!
Thank you so much for this Tutorial. It's really specific for newbies front-end.
Thank you for your feedback!
Very cool and detailed.
The part on babel and webpack is a bit complex, maybe a tool like Vite, Snowpack or Esbuild could simplify thoses steps.
This is very clear and to the point ....a pdf download will be appreciated
Thanks for your feedback!
And I really liked the inclusion of express.js.
Thank you very much!. A really interesting and informative post. I would like to read more posts like this one. Thanks!
Happy to hear you found it interesting. Thanks for your feedback!
You don't need express for this though, you can just open the HTML file in a browser.
I love this. really cool. but it will be more than ok if you can provide a file tree of the dependencies you mentioned e.g. webpack.config.js, touch .babelrc for the purpose of the beginners
There is no step in this to install the html-webpack-plugin
or you could just use parcel instead of this all configuration
or vite
Wht did we have to bring in webpack in the config if we not gona use it ?