danigb/.gitignore

## .gitignore
node_modules/
.cache
dist/

## README.md

      
    Raw
  

              README.md
            
          
    React playground

Setup

Easy

Clone this gist
npm run start
Detailed

1. Add parcel

npm init -y
npm install parcel-bundler
2. Add html

Create a index.html with:
<html>
  <title>Hello React</title>
  <body>
    <div id="root"></div>
    <script src="index.tsx"></script>
  </body>
</html>
3. Add code

Create a index.tsx file with:
import * as React from "react";
import { render } from "react-dom";

const App: React.FC = () => <h1>Hola 👋</h1>;

render(<App />, document.getElementById("root"));
4. Enjoy!

npx parcel index.html
Bonus

Tailwind

Add this line after the <title> tag:
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
### eslint with react rules
Install:
$ npm i eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser
Add this to package.json:
  "eslintConfig": {
    "parser": "@typescript-eslint/parser",
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:react-hooks/recommended"
    ]
  },

  
## index.html
<html>
  <title>Minimal React</title>
  <body>
    <div id="root"></div>
    <script src="index.tsx"></script>
  </body>
</html>

## index.ts
import * as React from "react";
import { render } from "react-dom";

const App: React.FC = () => <h1>Hola 👋</h1>;

render(<App />, document.getElementById("root"));

## package.json
{
  "name": "react-playground",
  "version": "1.0.0",
  "description": "",
  "main": "index.tsx",
  "scripts": {
    "start": "parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "parcel-bundler": "^1.12.4"
  }
}
	<html>
	<title>Minimal React</title>
	<body>
	<div id="root"></div>
	<script src="index.tsx"></script>
	</body>
	</html>
	import * as React from "react";
	import { render } from "react-dom";

	const App: React.FC = () => <h1>Hola 👋</h1>;

	render(<App />, document.getElementById("root"));
	{
	"name": "react-playground",
	"version": "1.0.0",
	"description": "",
	"main": "index.tsx",
	"scripts": {
	"start": "parcel index.html"
	},
	"keywords": [],
	"author": "",
	"license": "MIT",
	"dependencies": {
	"parcel-bundler": "^1.12.4"
	}
	}