Follow Me:
Showing posts with label ReactJS. Show all posts
Showing posts with label ReactJS. Show all posts

Monday 3 July 2017

ReactJS Simple Installation Setup Steps

React is front end library developed by Facebook. It's used for handling view layer for web and mobile apps. ReactJS allows us to create reusable UI components. 


React implements one way data flow which makes it easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.

React is all about components. You need to think of everything as a component. This will help you to maintain the code when working on larger scale projects.

JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended.



 Steps 1 :

 First install Nodejs and NPM. For Install  Nodejs Setup Environment

Steps 2 :

To install Global packages for this install babel

sudo npm install -g babel
npm install -g babel-cli

 Steps 3:

Create Folder

Create the reactjs execution folder by using command prompt by using below command.

 mkdir reactApp
 npm init
 
Steps 4:

Install Dependencies Modules like install webpack bundler.

npm install webpack --save
npm install webpack-dev-server --save

Install react and react-dom dependencies

npm install react --save
npm install react-dom --save

Install the babel plugin module

npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015

Steps 5:

Create the reactjs files

index.html
App.jsx
main.js
webpack.config.js

Index.html

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!! Welcome to Codingslover...!
         </div>
      );
   }
}

export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

webpack.config.js

var path = require('path');
var webpack = require('webpack');

var config = {
   entry: './main.js',

   output: {
     // path:'./',
     path: path.resolve(__dirname, 'build'),
      filename: 'index.js'
   },
   
   devServer: {
      inline: true,
      port: 8080
   },
   
   module: {
      /*  // loaders: [
         {
          //  test: /\.jsx?$/,
          //  exclude: /node_modules/,
          // loader: 'babel-loader',
               
           // query: {
            //   presets: ['react']
           // }
        // }
      //]  */
   
     rules: [
      {
        test: /\.jsx?$/,
        exclude: [/node_modules/, /\.test\.jsx?/],
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['react', ['es2015', {'modules': false}]]
          }
        }]
      }]
   }
   ,
    resolve: {
       extensions: [ '.js', '.jsx']
    }
}

module.exports = config;

Steps 6:

Run the reactjs in command  prompt

Npm start




Advantage :
  • React uses virtual DOM which is JavaScript object. This will improve apps performance since JavaScript virtual DOM is faster than the regular DOM.
  • React can be used on client and server side.
  • Component and Data patterns improve readability which helps to maintain larger apps.
  • React can be used with other frameworks.

Sunday 2 July 2017

ReactJS Webpack Module build failed: Error: Cannot find module

Running the npm start in reactjs by using nodejs, its throwing error like "Module build failed: Error: Cannot find module".


Module build failed: Error: Cannot find module 'locate-path'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (F:\php\htdocs\reactjs\node_modules\pkg-dir\node_modul
es\find-up\index.js:3:20)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-serve
r ./main.js
webpack: Failed to compile.

Solution:

Actually when running the script that time corresponding module is not available. For this excute below commands, that is issue will be resolved.

1. To find the webpack errors 
Run your webpack with display-error-details option to enable more debugging on the errors.

webpack --progress --color --watch --display-error-details


2. Run below Commands in your command promt

npm list -g

npm install --global  [Your Missing Module Name]

npm install --global locate-path

npm install wisp --save
npm install --global --verbose promised-io

3. Set your Environment variable

For Windows:

set NODE_PATH=C:\Users\codingslover\AppData\Roaming\npm\node_modules

4. Check Module Folder

Sometimes our installed available in our user appdata folders also. So that goto
C:\Users\codingslover\AppData\Roaming\npm\node_modules
folder, find the missing modules and copy the module and place into your execution folder.

Example : 

I am executing my reactjs npm module in
F:php/htdocs/reacttest/
, inside module folder need to check module availability.