Scribd
Upload
81 views

NPM Cache Clean - Force"

This document provides instructions for setting up a React development environment and creating a sample React app. It includes steps to install Node.js, NPM, Express, React, Reactstrap, Bootstrap, Babel and Webpack. It describes creating the project file structure, configuring Webpack and Babel, and modifying package.json to run the app. The output is a simple "Hello World" React app served on a local development server.

Uploaded by

Mitesh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
81 views

NPM Cache Clean - Force"

This document provides instructions for setting up a React development environment and creating a sample React app. It includes steps to install Node.js, NPM, Express, React, Reactstrap, Bootstrap, Babel and Webpack. It describes creating the project file structure, configuring Webpack and Babel, and modifying package.json to run the app. The output is a simple "Hello World" React app served on a local development server.

Uploaded by

Mitesh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

1.installation of node.

js and npm :

https://blog.teamtreehouse.com/install-node-js-npm-windows

or / and

https://mtyiu.github.io/csci4140-spring15/tutorials/5/install-nodejs-on-windows.pdf

Note : Choose to select node package manager while installing in the wizard in place of node.js runtime.

It will install, node.js and npm both.

2.installation of Express.js framework:

a)execute “npm init” from command prompt. First initialize to create package.jason file.

Note :press enter many times until you see a question asking for (y/n). type y.

b) execute” npm install express –save” from command prompt.

c) if …..AppData/roaming/npm-cashe/log file has any error then execute “npm cache clean –force”

after that again execute ” npm install express –save” to install express.js.

3.Install express application generator :npm install express-generator


-g
4.create an express app :express myapp
5.install dependencies :
a)cd myapp
b)npm install
6. Run the app :execute “set DEBUG=myapp & node .\bin\www”
7.Type in browser : http://localhost:3000

Installation of React, react-dom,Babel,Webpack,HTML webpack


plugin etc

8.Step by step React configuration from setup to deployment


https://dev.to/nsebhastian/step-by-step-react-configuration-2nma

or
https://www.robinwieruch.de/react-js-windows-setup/

. or also can check

a)https://www.codecademy.com/articles/react-setup-i
b)for react setup Babel :
https://www.codecademy.com/articles/react-setup-ii
c)for react setuo Webpack :
https://www.codecademy.com/articles/react-setup-iii
d)React setup HTML webpack plugin:
https://www.codecademy.com/articles/react-setup-iv
e)Deployment and running React app:
https://www.codecademy.com/articles/react-setup-v

Installation of Reactstrap,Bootstrap,react-transition-
group,react-popper etc.
9. https://www.npmjs.com/package/reactstrap
10. npm install --save bootstrap

npm install --save reactstrap

npm install axios

npm install react-router-dom

11 npm install -g --save create-react-app

Create-react-app runapp
cd runapp
npm start

12.To Create production build :


Npm run build
13.To Create components folder structure refer:
https://www.robinwieruch.de/complete-firebase-authentication-react-
tutorial/

To create login,registration form etc – source code


14.https://www.codesolution.co.in/detail/post/reactjs-redux-login-and-
signup-form-validation-and-call-rest-full-api-using-axios
15. Import required reactstrap components within
src/components/App/index.js file or your custom component files:
Example : import { Button } from 'reactstrap';

Configuration of Webpack, Webpack-dev-server and babel

16.Add import 'bootstrap/dist/css/bootstrap.min.css'; in src/index.js file.


17.Chage default browser from IE to chrome. Go to control panel
and programs there set chrome as default browse.

18. https://medium.com/bcgdv-engineering/when-using-react-js-
webpack-dev-server-does-not-bundle-c2d340b0a3e8

or

https://www.topcoder.com/challenges/30058010

Full Configuration summary

Step 1:-Environment Setup

 Install Node.js and NPM.


 Install BABEL plugin. As a browser can not interpret JSX(Explained later in this tutorial), we
need to first convert it into JavaScript. BABEL will do it for us on a fly and take care of cross
browser compatibility.
 Open command prompt and type “npm install -g babel”
 Install Babel CLI by typing “npm install -g babel-cli”
 Install React
Type npm init
 Type “npm install react --save” in command prompt. --save will update the
package.json file with the packages.
 Type ”npm install react-dom --save” in command prompt.
 npm install --save bootstrap

 npm install --save reactstrap


 npm install axios
 npm install react-router-dom


 Install WEBPACK Bundler. WEBPACK bundler will bundle the dependencies & JSX
code together.
 Type “npm install webpack --save” in command prompt.
 Type “npm install webpack-dev-server --save” in command prompt.
 Install Babel dependencies(In the same folder which you have created in previous
step)
 Type “npm install babel-core --save” in command prompt.
 Type “npm install babel-loader --save” in command prompt.
 Type “npm install babel-preset-react --save” in command prompt.
 Type “npm install babel-preset-es2016 --save” in command prompt.

Step 2: Create project file.

You need to create following file in the src folder.

Webpack.config.js

Step 3: Configure webpack and babel.

In order to run your first app you need to instruct webpack on which file to target as entry point.
Also, we will configure babel loader to use es2016 and react presets which we have installed in
previous steps.

webpack.config.js

const path = require("path");

const config = {

entry: "./index.js",

output: {

path: path.resolve(__dirname, "dist"),

filename: "app.js"

},

module: {

loaders: [

test:/\.(js|jsx)$/,
loader: "babel-loader",
query: {

presets: ["react", "es2016"]


}

};

module.exports = config;

Step 4: Update package.json

Update package.json's scripts section file with following script to start webpack. You must replace the test
script to start the webpack server. We don't need test script as we are not going to perform testing in this tutorial.

"scripts": {

"start":"webpack-dev-server --hot"
},

Step 7: Run your (Hello World) app

Run the app by executing command "npm start" in command prompt from runapp folder. You need
to look for the port number in the command prompt to know on which port the output has been
served.

Output:

The output will be serverd on targeting http://localhost:8081(Note:Port number may be different


for your project while creating http server.) in the browser in case your project has successfully
compiled. In case port number 8081 is busy then you need to look for the port number in
the command prompt to know on which port the output has been served.

The output which you will see in the browser is Hello World!

You might also like