DEV Community

Vishang
Vishang

Posted on

Create React Project without create-react-app

Why this post?

It's very easy to create react app with terminal by following these commands.



npx create-react-app my-app
cd my-app
npm start



Enter fullscreen mode Exit fullscreen mode

easy right? However, there is a possibility that we don't no what is running behind the scene. What components are required in order to get our react app working. So that's what we see in this post. How you can make a react app from scratch.

In order to get this going, we need npm installed in your system

Steps

Create a directory in your system

mkdir my-app

go to the directory

cd my-app

create package.json file

npm init -y

npm init will create new package.json file
Flag -y will tell npm to use all default config option while creating package.json

install react and react-dom

npm install react react-dom

Use: it will add react and react-dom under dependencies in package.json file as well as it create node_modules directory with all other dependent libraries in it.

create gitIgnore to avoid pushing unnecessary code to github

vim .gitignore

possible items you need in your gitignore file are

node_modules
.DS_Store -- If you're on mac machine
dist

dist (Distribution folder)-- is a build directory which is generated by webpack and babel when we build our code. So we dont want this folder to go along as it generates on the by compilers for the production app.

create app folder

mkdir app

create two files within it.

touch index.js index.css

Start writing your hello world react application



import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class App extends React.Component{
    render(){
        return(
            <div>Hello World</div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'))



Enter fullscreen mode Exit fullscreen mode

So when you try to run this code in the browser it will give an error as the our code is written in JSX and browser does not understand it.

So this is the point where Babel and Webpack comes into play.
To install all required dependency for these two run following command from your terminal.


npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin

Flag --save-dev : we use this flag to differentiate out build dependencies than our app dependencies

You can check your package.json file in order to see how this flag differentiate in that.

Webpack configurations

Webpack is module bundler. So currently we only have on module. However, as our app expands we will have more modules. So webpack intelligently bind all those modules together and creates one single file which serves all these.

touch webpack.config.js


var path = require('path');
var HtmlWebpackPlugin =  require('html-webpack-plugin');

module.exports = {
    entry : './app/index.js',
    output : {
        path : path.resolve(__dirname , 'dist'),
        filename: 'index_bundle.js'
    },
    module : {
        rules : [
            {test : /\.(js)$/, use:'babel-loader'},
            {test : /\.css$/, use:['style-loader', 'css-loader']}
        ]
    },
    mode:'development',
    plugins : [
        new HtmlWebpackPlugin ({
            template : 'app/index.html'
        })
    ]

}



Enter fullscreen mode Exit fullscreen mode

How to configure webpack check out my previous post

in conjuction with out babel-loader works we have to add babel preset config to our package.json file



"main": "index.js",
"babel":{
    "presets" : [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }



Enter fullscreen mode Exit fullscreen mode

To run the build we have to add webpack to our script tag in our package.json



"main": "index.js",
  "babel":{
    "presets" : [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "scripts": {
    "create": "webpack"
  },


Enter fullscreen mode Exit fullscreen mode

So when i run npm run create from terminal it will run the webpack which will create the dist folder and our bundle file with index.html file.

It's hassle to run webpack every time. So you can start a webpack dev server. so it will start build your code as soon as you run it. modify your script in package.json with following



"scripts": {
    "start": "webpack-dev-server --open"
  }



Enter fullscreen mode Exit fullscreen mode

Now when you run npm run start it will start the dev server and open your app in the browser.

Final directory structure will look like this
file

Gist

conclusion

we create our simple app component, render that app component in element which has id as 'app'. Webpack takes all the modules in our application starts from index.html, run through all the transformations. like babel-loader, css-loader, styles-loader. Babel loader uses env and react presets to support older browsers and spit the entire code out in dist folder which we can use it to deploy in the production environment.

Top comments (24)

Collapse
 
nickfazzpdx profile image
Nicholas Fazzolari

Thank you, thank you, thank you. I was using the create react app npm module and it's too much for what I currently need in my react learning path. I also I like to have a certain degree of control over my app structure.

Collapse
 
vish448 profile image
Vishang

Glad you find it useful

Collapse
 
nickfazzpdx profile image
Nicholas Fazzolari

I'm still new to managing npm modules/packages. I've been thinking about the package.json - One thing I wonder is: Should edits to the package.json be mainly automated through installations and other configuration options invoked or is a lot of time spent manually editing packages.json for config in some cases?

Thread Thread
 
vish448 profile image
Vishang

in my opinion, I would not do that. I will install the libraries as i needed and add --save or --dev-save flags accordingly. So it will added automatically to the package.json file. I am sure you're aware of it. For sure you can add manage it manually if needed. I am not doing it so far as my workflows concerned.

Thread Thread
 
nickfazzpdx profile image
Nicholas Fazzolari

Yeah, just by scrolling through it I got the vibe that it's not common to manually edit. Thanks for replying. :D

Collapse
 
kingtigre profile image
Roger Peixoto Duarte

Good job! Really useful!
I have a question though, how can I access the app from another machine? I know that while using create-react-app it is possible to access is from a adress, but it does not seem to work at the same way when installing webpack manually...

Collapse
 
lologalvez profile image
lologalvez

Awesome step-by-step guide! I bookmarked it a few months ago and came back to it many times since.

There's only one thing missing (no big deal). You don't mention the creation of index.html at any point in the guide (it's listed below with all the files below though).

Collapse
 
mohamadaminataee profile image
Mohamad Amin Ataee

thanks .. it's awesome

Collapse
 
x86chi profile image
Muhun Kim

I think you forgot add html-loader to webpack.config.js. it was didn't loading template without html-loader.

Collapse
 
trisha114 profile image
Trisha Aguinaldo

Thanks for this post! I've used create-react-app as a crutch for far too long. I finally built a react app using your article as a guide. Keep at it!

Collapse
 
vish448 profile image
Vishang

Glad it helps

Collapse
 
ronaldoperes profile image
Ronaldo Peres

Hi,

Very good, may I ask how to make it works in IE11?

I tried to use polyfill but I have no success.

Got this error in IE11: " Object doesn't support property or method 'entries'"

Any idea?

Thanks

Collapse
 
ahmedsaifulla profile image
Ahmed Saifulla N S

Yes, creation of index.html step is not mentioned as well as If you're using webpack-cli 4 or webpack 5, change webpack-dev-server to webpack serve. Otherwise, was great intro to react for me. thanks

Collapse
 
xmelsky profile image
@xmelsky

thanks. this article helped me recap all this react.js stuff!

Collapse
 
lautarolobo profile image
Lautaro Lobo

Wonderful post, you rock dude!!

Collapse
 
lnvns profile image
Lian Nivin

Excellent

Collapse
 
kizero1998 profile image
Kizero1998

Thanks, I always have to remove eslint when ever I use the npx create

Collapse
 
ridhikgovind profile image
Ridhik Govind

Well explained ! Gonna go try this way right now.

Collapse
 
romi_devx profile image
romi_devX

Awesome...thankx for sharing...but i have a question: why did put the "dist" folder in your .gitignore file ?

Collapse
 
vish448 profile image
Vishang

I think every time when you create build it will generate this dist folder automatically.

Collapse
 
snowoner profile image
snowoner

Thx for this post!