CODEWITHSUNDEEP
reactjs
vivek modi
vivek modi

Reputation: 812

best way to install react app manually

i am learning reactjs. And i install my react app by 

create-react-app first

but i want to know is there any manual way to install react app

Upvotes: 2

Views: 4890

Answers (2)

Mehdi Musavand
Mehdi Musavand

Reputation: 1

"build": "node_modules/.bin/webpack" does not work
instead, ensure that node is included in the command:
"build": "node node_modules/.bin/webpack"

Upvotes: 0

Ismayil Niftaliyev
Ismayil Niftaliyev

Reputation: 396

I will write the shortest tutorial :)

Step1: Create folder and file structure like below: enter image description here

Step2: Install dependencies below:

npm install -S react react-dom prop-types

Step3: Install dev dependencies:

npm install -D babel-core babel-loader babel-plugin-transform-class-properties babel-preset-es2015 babel-preset-react html-webpack-plugin webpack

Step4: Add index.html file to root folder:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <!--Mounting point for React VDOM-->
    <div id="root"></div>
</body>
</html>

Step5: Create webpack.config.js file in root folder with content:

 let path = require('path'),
    webpack = require('webpack'),
    HtmlWebPackPlugin = require('html-webpack-plugin')

const PATHS = {
    src: path.join(__dirname, 'src'),
    dist: path.join(__dirname, 'dist'),
    main: path.join(__dirname, 'src/main.js')
}

let wpConfig = {
    entry: PATHS.main,
    output: {
        path: PATHS.dist,
        filename: 'build.js',
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                  "presets": [
                      "es2015",
                      "react"
                   ],
                   "plugins": [
                      "transform-class-properties"
                   ]
                }
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({ 
            title: 'My First React App',
            template: './index.html'
        })
    ]
}

module.exports = wpConfig

Step6: Add nmp command. In package.json file go to "scripts" sections and add build command like below:

  "scripts": {
    "build": "node_modules/.bin/webpack"
  }

Step7: Create this simple React app file (main.js) in src folder:

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
    return (
        <div>
            <h1>Hello,</h1>
            <p>This is my first react app!</p>
        </div>
    )
}

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

Step8: Run command:

npm run build

Webpack will build and save files(build.js and index.html) to dist folder. Open your /dist/index.html file in browser and your first react app from zero is ready! Start with this basic app, then add some additional features like stylesheets (css, sass), router, webpack dev-server, hot reloading and etc.Happy coding!

Upvotes: 6

Related Questions