DEV Community

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 ...

Read full post

Muhammad Hasnain • Jun 6 '21 • 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.

nikhilmwarrier • Jun 7 '21

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

Elijah • Aug 29 '21

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

aderchox • Apr 11 '22

Google it.

Khorne07 • Jun 6 '21

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.

_CODE • Jun 6 '21

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
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
…

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

Happy coding!

Khorne07 • Jun 6 '21

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

Atang • Jun 7 '21

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

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?

Atulit Anand • Jun 6 '21 • 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.

_CODE • Jun 6 '21

I'm glad you found it useful.

Christopher Dirksen • Aug 26 '24

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?

overFlow • Aug 22 '23

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 ?

Kidi Tran • Jun 6 '21

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

_CODE • Jun 7 '21

Thank you for your feedback!

EnriqueSource • Jun 6 '21

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

_CODE • Jun 6 '21

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

EnriqueSource • Jun 6 '21

And I really liked the inclusion of express.js.

DrSimple • Jun 6 '21

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

_CODE • Jun 6 '21

Thanks for your feedback!

Antoine Caron • Jun 6 '21

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.

Vishal2369 • Jun 5 '21

Nice and informative

_CODE • Jun 5 '21

Thank you!

Andrew Baisden • Jun 24 '21

Cool idea.

_CODE • Jun 25 '21

Thanks!

Vijay Iyer • Mar 18 '24

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

Atang • Jun 8 '21

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

naolchala • Jun 8 '21

or you could just use parcel instead of this all configuration

Damian Żygadło • Jun 9 '21

or vite

Adam Jamiu • Aug 19 '21

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

Yash Karandikar • Jun 6 '21

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