Skip to content

Instantly share code, notes, and snippets.

View myogeshchavan97's full-sized avatar

Yogesh Chavan myogeshchavan97

608 followers · 4 following
View GitHub Profile
@myogeshchavan97
myogeshchavan97 / .babelrc
Last active April 9, 2021 08:56
babelrc file
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
@myogeshchavan97
myogeshchavan97 / app.js
Last active April 9, 2021 08:57
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<h1>Welcome to REACT!</h1>
)
}
}
@myogeshchavan97
myogeshchavan97 / index.html
Last active April 9, 2021 08:59
Final index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root"></div>
@myogeshchavan97
myogeshchavan97 / package.json
Last active April 9, 2021 09:00
{
"name": "react_starter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --watch"
},
"keywords": [],
@myogeshchavan97
myogeshchavan97 / webpack.config.js
Last active April 9, 2021 09:01
Final webpack file
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'public')
},
module: {
rules: [{
loader: 'babel-loader',
@myogeshchavan97
myogeshchavan97 / JSXDemo.js
Created November 28, 2019 16:56
A React Component
class JSXDemo extends React.Component {
render() {
return <h1>This is JSX</h1>;
}
}
ReactDOM.render(<JSXDemo />, document.getElementById('root'));
@myogeshchavan97
myogeshchavan97 / JSXDemo_compiled.js
Created November 28, 2019 17:46
Converted JSX for JSXDemo
class JSXDemo extends React.Component {
render() {
return React.createElement("h1", null, "This is JSX");
}
}
@myogeshchavan97
myogeshchavan97 / jsx_object.js
Created November 28, 2019 18:08
JSX Object representation
class JSXDemo extends React.Component {
render() {
const jsx = <h1>This is JSX</h1>;
console.log(jsx);
return jsx;
}
}
ReactDOM.render(<JSXDemo />, document.getElementById('root'));
@myogeshchavan97
myogeshchavan97 / jsx_onclick.js
Last active November 28, 2019 18:20
Button On Click Demo
class JSXDemo extends React.Component {
handleOnClick = () => {
}
render() {
return <button id="btn" onClick={this.handleOnClick}>Click Here</button>;
}
}
ReactDOM.render(<JSXDemo />, document.getElementById('root'));
@myogeshchavan97
myogeshchavan97 / jsx_with_class.js
Last active November 28, 2019 18:26
JSX with class
class JSXDemo extends React.Component {
render() {
return <h1 class="user-name">{this.props.name}</h1>;
}
}
ReactDOM.render(<JSXDemo name="John"/>, document.getElementById('root'));