DEV Community

Cover image for Creating your React project from scratch without create-react-app: The Complete Guide.

Creating your React project from scratch without create-react-app: The Complete Guide.

_CODE on June 05, 2021

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 ...
Collapse
 
hasnaindev profile image
Muhammad Hasnain • Edited

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.

Collapse
 
nikhilmwarrier profile image
nikhilmwarrier

I was about to mention just this
Great article though @underscorecode

Collapse
 
ezecodes profile image
Elijah

An why using --save-dev. Will it still work without using --save-dev?

Collapse
 
aderchox profile image
aderchox

Google it.

Collapse
 
theantipioneer profile image
Atang

I got this error after following everything:
PS C:\Users\USER\projects\reactProj\react-manual> npm run build

react-manual@1.0.0 build
rm -rf dist && webpack --mode development

'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

react-manual@1.0.0 build
rm -rf dist && webpack --mode development

'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?

Collapse
 
khorne07 profile image
Khorne07

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.

Collapse
 
underscorecode profile image
_CODE

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:


{
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },

Enter fullscreen mode Exit fullscreen mode

Note that you’ll also need to install postcss-preset-env.

Happy coding!

Collapse
 
khorne07 profile image
Khorne07

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

Collapse
 
icecoffee profile image
Atulit Anand • Edited

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.

Collapse
 
underscorecode profile image
_CODE

I'm glad you found it useful.

Collapse
 
chrispyrice024 profile image
Christopher Dirksen

showing the file structure would be really helpful. i try to make App.js but it wont let me because it shares a name with app.js even with the capitalization. does everything just go in the root? are there other folders?

Collapse
 
overflow profile image
overFlow

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 ?

Collapse
 
vishal2369 profile image
Vishal2369

Nice and informative

Collapse
 
underscorecode profile image
_CODE

Thank you!

Collapse
 
andrewbaisden profile image
Andrew Baisden

Cool idea.

Collapse
 
underscorecode profile image
_CODE

Thanks!

Collapse
 
kiditran profile image
Kidi Tran

Thank you so much for this Tutorial. It's really specific for newbies front-end.

Collapse
 
underscorecode profile image
_CODE

Thank you for your feedback!

Collapse
 
slashgear_ profile image
Antoine Caron

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.

Collapse
 
drsimplegraffiti profile image
Abayomi Ogunnusi

This is very clear and to the point ....a pdf download will be appreciated

Collapse
 
underscorecode profile image
_CODE

Thanks for your feedback!

Collapse
 
enriquesource profile image
EnriqueSource

And I really liked the inclusion of express.js.

Collapse
 
enriquesource profile image
EnriqueSource

Thank you very much!. A really interesting and informative post. I would like to read more posts like this one. Thanks!

Collapse
 
underscorecode profile image
_CODE

Happy to hear you found it interesting. Thanks for your feedback!

Collapse
 
karx1 profile image
Yash Karandikar

You don't need express for this though, you can just open the HTML file in a browser.

Collapse
 
adamjamiu profile image
Adam Jamiu

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

Collapse
 
vijayiyer profile image
Vijay Iyer

There is no step in this to install the html-webpack-plugin

Collapse
 
naolchala profile image
naolchala

or you could just use parcel instead of this all configuration

Collapse
 
willaiem profile image
Damian Żygadło

or vite

Collapse
 
theantipioneer profile image
Atang

Wht did we have to bring in webpack in the config if we not gona use it ?