Posts

Showing posts with the label WebPack configarion

An error occurred while installing rmagick (2.16.0), and Bundler cannot continue

-
An error occurred while installing rmagick (2.16.0), and Bundler cannot continue You have to install library of rmagick in your system. sudo apt-get install imagemagick libmagickcore-dev libmagickwand-dev
Read more

Rational Number or Rational Mothod in ruby or rational operation

-
Rational Number or Rational Mothod in ruby or Rational operation Rational Number is always comes with paired integer Number(1 ,2 ,3 .... && -1, -2, .....) x/y (where y>0). Rational (1) => (1/1) Rational (2, 5) =>(2/5) Rational(4, -8) => (-1/2) 5.to_r =>(5/1) 2/3r => (2/3) Rational into Numeric rational*numeric -> numeric (perfoms multiplecation) Rational(1, 3)  * Rational(2, 3)   => (2/9) Rational(200)   * Rational(1)      => (200/1) Rational(-5, 4) * Rational(-4, 5)  => (1/1) Rational(9, 4)  * 4                => (9/1) Rational(20, 9) * 9.8              => 21.77777777777778 rat ** numeric => numeric (Performs exponentiation) Rational(3)    ** Rational(3)    => (27/1) Rational(10)   ** -2             => (1/100) Rational(10)   ** -2.0           => 0.01 Rational(-4)   ** Rational(1,2)  => (1.2246063538223773e-16+2.0i) Rational(1, 2) ** 0              => (1/1) Rational(2,
Read more

Export Import component in react

-
Image
 Export Import component in react See installation and configuration in my other blog Now Create a file into a public folder or anywhere into Root directory inside your project folder Create to directory into root directory         mkdir public           mkdir src Create two new into public folder index.html index.js Create two new file into src folder main.js  item.js Copy and paste code into index.html <!DOCTYPE html> <html> <head> <title>React - demo</title> </head> <body> <div id="root"></div> <script src="index.js"></script> </body> </html> Now into item.js import React from 'react'; class Item extends React.Component{ render(){ return( <div> Hello Item </div> ); } } export default Item; // you must have to make component exportable Now into main.js import React from 'react&#
Read more

Print static text in React by webpack using Function component

-
Image
Install Webpack and configure it first See installation and configuration in my other blog Now Create a file into a public folder or anywhere into Root directory inside your project folder Create to directory into root directory         mkdir public           mkdir src Create two new into public folder index.html index.js Create a new file into src folder main.js Copy and paste code into index.html <!DOCTYPE html> <html> <head> <title>React - demo</title> </head> <body> <div id="root"></div> <script src="index.js"></script> </body> </html> Now into main.js import React from 'react'; import ReactDOM from 'react-dom'; function Welcome() { return (<div> Hello </div>) } const root = document.getElementById('root');  ReactDOM.render(<Welcome />, root); Project Structure will be like this
Read more

Print static text in React by webpack using class component

-
Image
Install Webpack and configure it first See installation and configuration in my other blog Now Create a file into a public folder or anywhere into Root directory inside your project folder Create to directory into root directory         mkdir public           mkdir src Create two new into public folder index.html index.js Create a new file into src folder main.js Copy and paste code into index.html <!DOCTYPE html> <html> <head> <title>React - demo</title> </head> <body> <div id="root"></div> <script src="index.js"></script> </body> </html> Now into main.js import React from 'react'; import ReactDOM from 'react-dom'; class Welcome extends React.Component{ render(){ return( <div> Hello  </div> ); } } const root = document.getElementById('root');  ReactDOM.render(<Welcome />, root);
Read more

The 'mode' option has not been set, webpack will fallback to 'production' for this value

-
WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/ module.exports = {   mode: "development", // Add mode here to solve this warning    entry: './src/main.js', // Bundle all assets from this location together    output: {        filename: 'index.js', // Output to this file        path: path.resolve( __dirname, 'public' ), // In this location    }
Read more