Skip to content

Instantly share code, notes, and snippets.

@danigb
Last active October 28, 2020 22:16
Show Gist options
  • Save danigb/b3c27c6f82a3fa3591f631e0b52a2769 to your computer and use it in GitHub Desktop.
Save danigb/b3c27c6f82a3fa3591f631e0b52a2769 to your computer and use it in GitHub Desktop.
React playground
node_modules/
.cache
dist/

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"
    ]
  },
<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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment