If you get the following error when you start working with SCSS files you can fix this easily Module build failed (from ./node_modules/sass-loader/dist/cjs.js):Error: Cannot find module ‘node-sass’ Go to the command like of the project folder and run the following commad
Blog
How to pass props to state variable to state variable inside a functional component I want to pass products ariable to <SearchBox > component. Your search box component is like this
When you develop Electron application with React.js you have to do Inter Process Communication (IPC) between your react component and mail process. Forexample if you send message to main process you have to use the following code But when you build the App you will get build errors So to get rid of this build […]
There are two types of process in electron app (1) Main process – is run by the main controller of the electron app and manege the lifecycle of the app (2) Render process – represent the UI window and usually this is visible. This render process is managed by the Main process There is only […]
If you want to open the browser window in your Electron application you can use the following code If do not know how to create Electron app please refer this tutorial in your index.js file, you can add the following code
You can follow the following steps to run your first Electron application (1) use npm init command to create your project (2) Next you can install the electron by running the following command npm install electron (3) Next, create the index.js file and add the following code (4) Run the following command in your terminal […]
Props are immutable and once the component is rendered you can not change the value of the Prop So how to do change the UI values ? This is where React sate comes into play When the state object changes, the component re-renders How to create state object
You can validate the property of a React component using the built in PropTypes
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import React from "react"; import { PropTypes } from "prop-types"; export class Setting extends React.Component { render() { return ( <div> <ul> <li>{this.props.title}</li> </ul> <table> <tr> <td> Currency </td> <td> {this.props.currency} </td> </tr> <tr> <td> Rows Per Page </td> <td> {this.props.rowsperpage} </td> </tr> </table> </div> ); } } Setting.defaultProps = { rowsperpage: 20, currency: "USD" }; Setting.propTypes = { rowsperpage: PropTypes.number, currency: PropTypes.string }; export default Setting; |
When i pass the following props to the component When there are validation errors they will be shown in the console as warning message Warning: Failed prop type: Invalid prop rowsperpage of type string supplied to Setting, expected number.
You can assign default values for properties of your components. When you do not supply prop values externally to the component default values are applied
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import React from "react"; export class Setting extends React.Component { render() { return ( <div> <ul> <li>{this.props.title}</li> </ul> <table> <tr> <td> Currency </td> <td> {this.props.currency} </td> </tr> <tr> <td> Rows Per Page </td> <td> {this.props.rowsperpage} </td> </tr> </table> </div> ); } } Setting.defaultProps = { rowsperpage: 20, currency: "USD" }; export default Setting; |
You can Setting.defaultProps object is used to define the default properties. defaultProps is declared outside of the class or we call them instance of the class This is your […]