Posts

Create Electron React App steps

Create Electron React App steps: 1. npx create-react-app <your_app_name> --typescript 2. npm install --save cross-env electron-is-dev 3. npm install concurrently electron electron-builder wait-on 4. Create a file named "electron.tsx" in public folder with some electron code const electron = require("electron"); const app = electron.app; const BrowserWindow = electron.BrowserWindow; const path = require("path"); const isDev = require("electron-is-dev"); let mainWindow; function createWindow() { mainWindow = new BrowserWindow({ width: 900, height: 680 }); mainWindow.loadURL( isDev ? "http://localhost:3000" : `file://${path.join(__dirname, "../build/index.html")}` ); mainWindow.on("closed", () => (mainWindow = null)); } app.on("ready", createWindow); app.on("window-all-closed", () => { if (process.platform !== "darwin") { app.quit(); ...
2 comments
Read more

React Setup

React Setup: 1. npm init 2. npm i webpack webpack-cli --save-dev 3. Add a build script to package.json "build": "webpack --mode production" 4. npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev 5. Create a .babelrc and configure it: { "presets": [ "@babel/preset-env", --for compiling Javascript ES6 code down to ES5 "@babel/preset-react" --for compiling JSX and other stuff down to Javascript ] } 6. Configure webpack.config.js: const path = require('path'); module.exports = { entry: './src/index.jsx', devtool: 'inline-source-map', module: { rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/ } ] }, resolve: { extensions: [ ".jsx", ".js" ] }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist...
1 comment
Read more

Typescript + React Setup

Typescript and React setup steps: 1. npm init 2. npm install typescript -g (if it was not already installed globally) 3. npm install typescript (ts-loader needs a local version of typescript installed in the project) 4. tsc --init 5. Example tsconfig.json {   "compilerOptions": { "target": "es5",                        "jsx": "react", // Important                          } } 6. npm install --save react react-dom @types/react @types/react-dom 7. npm install --save-dev ts-loader webpack webpack-cli 8. Sample webpack.config.js const path = require('path'); module.exports = {   entry: './src/index.tsx',   devtool: 'inline-source-map',   module: { rules: [   { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/   } ]   },   resolve: { extensions: [ ".ts...
1 comment
Read more

Typescript Setup

Typescript: 1. Install typescript: npm install typescript 2. Command to convert a typescript file(*.ts) to a javascript file (*.js) tsc file_name.ts 3. Initialize npm npm init 4. Install lite-server npm install lite-server --save-dev 5. Add a script command to package.json to start the lite-server "start": "lite-server" 5. Initialize tsc tsc --init Add the following to the tsconfig.json if it doesn't exist already: "sourceMap": true, "exclude": [ "node_modules" ] 6. To compile all typescript files to javascript simply run: tsc 7. For Modules npm install --save-dev ts-loader webpack webpackconfig.js: const path = require('path'); module.exports = {   entry: './index.ts',   devtool: 'inline-source-map',   module: { rules: [   { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/   } ]   }, ...
Post a Comment
Read more

Axios Part 3

Axios Enjoy this cheat sheet at its fullest within  Dash , the macOS documentation browser. General GET request // Make a request for a user with a given ID axios . get ( '/user?ID=12345' ) . then ( function ( response ) { console . log ( response ); }) . catch ( function ( error ) { console . log ( error ); }); // Optionally the request above could also be done as axios . get ( '/user' , { params : { ID : 12345 } }) . then ( function ( response ) { console . log ( response ); }) . catch ( function ( error ) { console . log ( error ); }); POST request axios . post ( '/user' , { firstName : 'Fred' , lastName : 'Flintstone' }) . then ( function ( response ) { console . log ( response ); }) . catch ( function ( error ) { console . log ( error ); }); Multiple concurrent requests function getUserAcc...
Post a Comment
Read more

Axios Part 2

1.       Create a new axios-main.js:   import axios from 'axios';   const intance = axios.create({                 baseURL: ' https://react-my-burger-8eda4.firebaseio.com/ ' });   export default instance   2.       In another file you can import the axios instance:   import axios from '../../axios-main';   axios.get('/orders.json')                                                                 .then(res => {             ...
Post a Comment
Read more

Axios Part 1

Axios  is a popular, promise-based HTTP client that sports an easy-to-use API and can be used in both the browser and Node.js. Making HTTP requests to fetch or save data is one of the most common tasks a client-side JavaScript application will need to do. Third-party libraries — especially jQuery — have long been a popular way to interact with the more verbose browser APIs, and abstract away any cross-browser differences. As people move away from jQuery in favor of improved native DOM APIs, or front-end UI libraries like React and Vue.js, including it purely for its  $ . ajax  functionality makes less sense. Let’s take a look at how to get started using Axios in your code, and see some of the features that contribute to its popularity among JavaScript developers. Axios vs Fetch As you’re probably aware, modern browsers ship with the newer Fetch API built in, so why not just use that? There are several differences betwe...
Post a Comment
Read more