Converts an angle from degrees to radians.


Degrees to radians



In the code above, there are a few important parts:

The first is the DOCTYPE declaration. This tells the browser how to interpret the code. In this case, it is telling the browser that the code is written in HTML.

The second is the opening of the head tag. This tells the browser where to start looking for content.

The third is the declaration of the meta tags. These tell the browser information about the page, such as the language it is written in and the browser version.

The fourth is the declaration of the link tag. This tells the browser where to find the style.css file.

The fifth is the declaration of the script tag. This tags a JavaScript file.

The sixth is the declaration of the title tag. This is the name of the page.

Starter HTML Page

Decorator Class

React Recipes

react

You create two files in the same folder, which should have the same prefixed name:

- component (`.tsx`)
- styles (`.module.scss`)

Run the shortcut in your component file and presto the boilerplate is all there for you.

Create Minimal React Component With SASS Modules 

React recipes



This code sets the variable named "variableName" to the value "initialValue" and stores the result in the variable "setvariableName".

React useState



The code defines a new React.Component class named ComponentName. The class has a constructor that takes a props object as an argument. The constructor sets the this.state variable to an object containing a date property. The class also defines a render method that returns a div element with the following markup:

<div>

<label>Date:</label>
<input type="text" />
</div>

The code in the render method sets the this.state variable to an object containing the Date object. This object has a property called date that is set to the new Date() object.

React class component



In the SVG, there is a rectangle that has a fill of rgb(0,0,255) and a stroke-width of 10. This means that the rectangle will be filled with a light blue color, and the stroke will be a light blue color as well.

rectangle using SVG



This code prints "Enter message" to the console.

DIscord JS Send message in DM to author


This code creates an iframe and sets the src attribute to enter url.

HTML Iframe

JavaScript snippets for React


The code above creates a function that takes an object as a parameter. It then creates a WrappedComponent object that contains the properties of the object. Finally, the code adds a property to the WrappedComponent object that contains the propTypes for the object.

hocComponent

typeofSnippet


In the code above, we first import React and then the connect function. The connect function takes two arguments: first, a function that takes in state and returns a new function that takes in props. The new function will then use the state argument to determine what props to give to the WrappedComponent instance.

hocComponentWithRedux



var first = true;



The variable first is initially set to the value true. This can be seen in the first line of the code.

commentBigBlock

Name='John';

This initializes the this.state object to contain the string "John" .

componentState



This code binds the this reference to the current element.

bindThis

Name

The firstName prop on this object references the value of the first name property on the parent object, which is this .

componentProps



The following code sets the state of the object to first.

componentSetStateObject



The this.setState((state, props) => { return { first }}) method sets the state of the component to the given state and the given props.

componentSetStateFunc



const second = React.createContext()

const third = React.createContext()

({

first,

second,

third

});

The code creates three React contexts. The first context is used to create the first value, the second context is used to create the second value, and the third context is used to create the third value.

createContext



this.firstRef is a reference to the current React element.

createRef



The getSnapshotBeforeUpdate function takes two arguments: prevProps and prevState. prevState is the current state of the object, while prevProps is an object that describes the state of the object before the update.

getSnapshotBeforeUpdate



This code is part of the redux-saga library, and helps to get the state from props and the action from props. It returns a function that takes in a state and an action.

getDerivedStateFromProps



The code in this context means that the component will be unmounted from the DOM when it is destroyed.

componentWillUnmount



shouldComponentUpdate is a function that returns a boolean value. The function will be called every time the state of the component changes. The first argument is the new state of the component. The function will then check if the new state needs to be updated in the data binding. If so, the function will call the nextProps and nextState arguments with the new data.

shouldComponentUpdate



prevProps is a object that holds the previous value of the props of the component that is being updated. prevState is an object that holds the previous state of the component.

componentDidUpdate



The componentDidMount() function is called just before the component is initialized. This can be used to set up any initial state or perform any required initialization.

componentDidMount



The code states that the state variable is initially set to the value first.

emptyState



The constructor in this code is defined with the keyword constructor. This keyword indicates that this function is going to be the one that initializes the object instance. In this case, the code assigns the value of the props parameter to the this.state property. This state variables will be used to store information about the object itself.

classConstructor

;

const { last } = this.state;

This simply assigns the current state of the object to two variables. These variables will be used to access the properties of the object.

destructState

; const { second } = this.props;

The code defines two properties on the this object, first and second . The first property is referencing the first property from the this.props object, and the second property is referencing the second property from the this.props object.

destructProps



Promise is an API and abstraction for asynchronous tasks. It allows you to make a statement like "I will do X when Y happens" without needing to use any expressions. This is a constructor for a new Promise object. The first argument is a function that takes two arguments: resolve and reject. The Promise will call this function when the promise is fulfilled or rejected.

promise



The setTimeout function sets a timer for two seconds. The first argument is the function to be executed, and the second argument is the time in milliseconds. If the timer reaches its time limit, the function will be executed.

setTimeOut

destructingArray



The code sets up an interval that will run first() every second.

setInterval



The const first = (second) => { third } code creates a new constant, first, that references the function, second, which returns the value, third.

namedFunction

;

This code assigns the value of second to the variable first.

destructingObject



When the first and second elements are both expressions, the code is executed in order from the innermost to the outermost one. If either of the elements is a block, the code block is executed first, and then the remaining code is executed.

anonymousFunction



This code iterates through the items in the array second, and for each item it assigns the value of first to the variable third.

forIn



The code instructs the console to execute the code block for each element in the collection first, then execute the code block for each element in the collection second.

forEach



This code will iterate through the first item in the second list, then the first item in the third list, and so on.

forOf



The get first() method returns the value of the second object.

propertyGet



The code sets the value of third to the value of second.

propertySet



export default is a keyword that indicates that this function should not be exported from the module. It is used to avoid creating a name conflict with a function that is already defined in a different module.

exportDefaultNamedFunction



The code assigns the value of second to the variable first, and then assigns the value of third to the variable second.

method



In this code, the export default function is being called with two parameters. The first parameter is the function name and the second parameter is the function body.

exportDefaultFunction



export const second = (first) => {fourth}

The code above defines a function that takes two arguments, and returns a third argument.

exportNamedFunction



The code exports the second variable from the first module.

exportDestructing

jest



This code will first execute the second function and then check to see if the first function should be executed.

testBlock

Name

The code exports the default value of the firstName property for a given object.

exportDefault



test fires when the first function returns, and second is then called.

Name	Language	Author	Uses
Degrees to radians	TypeScript	RH Rik Hoffbauer	0
Starter HTML Page	HTML	a alexander-aleksandrov	18
Decorator Class	Python	DS Daniel Slaughter	15
Create Minimal React Component With SASS Modules	TypeScript	DS Daniel Strong	7
React useState	TypeScript	JD Julien Delange	0
React class component	JavaScript	AM Alex Martinez	0
rectangle using SVG	HTML	KK Khalid Khan	0
DIscord JS Send message in DM to author	JavaScript	KK Khalid Khan	0
HTML Iframe	HTML	KK Khalid Khan	3
hocComponent	JavaScript	l lucycodes42	2
typeofSnippet	JavaScript	l lucycodes42	3
hocComponentWithRedux	JavaScript	l lucycodes42	0
commentBigBlock	JavaScript	l lucycodes42	2
componentState	JavaScript	l lucycodes42	2
bindThis	JavaScript	l lucycodes42	2
componentProps	JavaScript	l lucycodes42	0
componentSetStateObject	JavaScript	l lucycodes42	1
componentSetStateFunc	JavaScript	l lucycodes42	0
createContext	JavaScript	l lucycodes42	2
createRef	JavaScript	l lucycodes42	1
getSnapshotBeforeUpdate	JavaScript	l lucycodes42	0
getDerivedStateFromProps	JavaScript	l lucycodes42	3
componentWillUnmount	JavaScript	l lucycodes42	0
shouldComponentUpdate	JavaScript	l lucycodes42	0
componentDidUpdate	JavaScript	l lucycodes42	0
componentDidMount	JavaScript	l lucycodes42	0
emptyState	JavaScript	l lucycodes42	1
classConstructor	JavaScript	l lucycodes42	1
destructState	JavaScript	l lucycodes42	1
destructProps	JavaScript	l lucycodes42	2
promise	JavaScript	l lucycodes42	2
setTimeOut	JavaScript	l lucycodes42	2
destructingArray	JavaScript	l lucycodes42	2
setInterval	JavaScript	l lucycodes42	0
namedFunction	JavaScript	l lucycodes42	10
destructingObject	JavaScript	l lucycodes42	0
anonymousFunction	JavaScript	l lucycodes42	28
forIn	JavaScript	l lucycodes42	5
forEach	JavaScript	l lucycodes42	7
forOf	JavaScript	l lucycodes42	2
propertyGet	JavaScript	l lucycodes42	2
propertySet	JavaScript	l lucycodes42	0
exportDefaultNamedFunction	JavaScript	l lucycodes42	2
method	JavaScript	l lucycodes42	2
exportDefaultFunction	JavaScript	l lucycodes42	1
exportNamedFunction	JavaScript	l lucycodes42	0
exportDestructing	JavaScript	l lucycodes42	5
testBlock	JavaScript	l lucycodes42	0
exportDefault	JavaScript	l lucycodes42	15
testAsyncBlock	JavaScript	l lucycodes42	0

Codiga Snippets, page 34