Posts

Showing posts with the label react

Show Escape or Enter and tab in column or row in Rails

Show Escape or Enter and tab in column or row in Rails @users.each do |user|      raw(user.address.gsub(/\n/, '<br>'))   end //assuming you have \n or enter in your record and if you have another Special character then replace that character wiht respective html tag

Difference Between pluck and collect

Difference Between pluck and collect Pluck Pluck takes less time then collect because when we use collect we have to execute two queries for collecting record Example-  When have a user table and we have to collect all id's User.all.collect(&:id) // when we use collect we are running two query internally                                        first user.all and then we collect id's User.pluck(:id) // Here we are running only one query that's why it take less time Pluck also take more than one parameter at a time but collect can not Example- user.pluck(:id, :name) // it will return array of id and name user.collect(&:id , &:name) // it will give an error

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&#

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

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);

Install webpack in react Application || install babel

Run this commands form terminal or cmd npm init npm i webpack --save-dev npm i webpack-cli --save-dev  npm install -D babel-loader @babel/core @babel/preset-env webpack  npm i @babel/preset-react --save-dev npm i babel-core --save-dev npm i babel-preset-env --save-dev npm i babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev npm i react react-dom --save-dev npm install webpack-dev-server -g   // In window and mac os this command will not work then use this npm i webpack-dev-server --save-dev Create a new file named Webpack.config.js into root directory copy and paste this code into webpack.config.js file var path = require('path'); module.exports = {    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    },    module: {        rules: [        

set mode on webpack.config.js || webpack file configuration

Give mode in webpack.config.js            mode: "development || production"  //whatever you want to give Use it before Entry module.exports = {   mode: "development",    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    }, 

What is WebPack || WebPack React app by webpack || babel loader || babel core || babel

Image
Webpack is a tool that puts all your assets including images,javascript ,fonts and css in a dependency graph entry point: is the file webpack looks for to start building your Javascript bundle webpack’s main strength is code splitting. It introduce a production mode and development mode. As ,, Syntax of  ReactJS is based on ES6. old browsers doesn’t understand ES6. So , to run JS we need something which transform our ES6 code to browser understand language , the same thing is done by babel-loader. Babel-loader is a webpack loader for transpiling ES6 and above , down to ES5. For this, you need three things - babel-core, babel-loader, babel-preset-env   Commands- 1. npm init: This cmd create a package.json file . 2.npm i webpack --save-dev: This cmd generate dependencies for webpack in package.json file. Like "devDependencies": {    "webpack": "^4.16.2"  } 3. npm i webpack-cli --save-dev : This cmd is

React Component || Functional Component || Class Component || composing function component

What is Component? React Components that render html elements and tags Types of Component Functional Component Class Component Functional Component Render html element through function Class Component Render html element through class Composing function component Means call a function component into another function component Functional Component Example Now again make a directory inside root directory        mkdir public (you can take name as you want)        mkdir src (you can take name what ever you want you want) inside public folder create two new file index.html index.js inside src folder create one new file  main.js ( this is file where react app execution is start. you can take name what ever you want). app.js or main.js function Item(){ return(<h1>Hello from Item</h1>) } function Welcome(){ return(<div> <h1>Hello React</h1> <Item />  </div>); } const element = <Welcome /> ReactDOM.render(e

React Component || Functional Component || Class Component

What is Component? React Components that render html elements and tags Types of Component Functional Component Class Component Functional Component Render html element through function Class Component Render html element through class Functional Component Example Now again make a directory inside root directory        mkdir public (you can take name as you want)        mkdir src (you can take name what ever you want you want) inside public folder create two new file index.html index.js inside src folder create one new file  main.js ( this is file where react app execution is start. you can take name what ever you want). app.js or main.js function Welcome(){ return(<h1>Hello React</h1>); } const element = <Welcome /> ReactDOM.render(element, document.getElementById('root')); in index.html <!DOCTYPE html> <html> <head> <title></title> <script crossorigin src="https://unpkg.com/

Create react app by live-server || live Server || React App

Image
First install node and check node -v and npm -v Create a directory mkdir <your_directory_name> Run command npm init (press enter and use all defaults) by this command package.json file will be created in root directory for creating Dependency we run this command npm install --save-dev babel-cli babel-preset-react npm install --save-dev babel-cli babel-preset-env sudo npm install -g  babel-cli babel-preset-env babel-preset-react ( Installed "babel-cli@6.26.0" with binaries:  - babel-doctor  - babel - babel-node  - babel-external-helpers ) this packages are created. Install live server npm  install  -g  live - server Now again make a directory inside root directory mkdir public (you can take name as you want) mkdir src (you can take name what ever you want you want) inside public folder create two new file index.html index.js inside src folder create one new file  main.js ( this is file where react app execution is start. you can take