Skip to content

Commit 196e97c

Browse files
nooobcodernooobcoder
committed
react playground
1 parent e8d5ca5 commit 196e97c

23 files changed

+1160
-48041
lines changed

‎Track 4_ReactJS_Web Development/react-playground/.env

-2
This file was deleted.

‎Track 4_ReactJS_Web Development/react-playground/.github/dependabot.yml

-11
This file was deleted.

‎Track 4_ReactJS_Web Development/react-playground/.gitignore

+98-20
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,104 @@
1-
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
28

3-
# dependencies
4-
/node_modules
5-
/.pnp
6-
.pnp.js
9+
# Diagnostic reports (https://nodejs.org/api/report.html)
10+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
711

8-
# testing
9-
/coverage
12+
# Runtime data
13+
pids
14+
*.pid
15+
*.seed
16+
*.pid.lock
1017

11-
# production
12-
/build
18+
# Directory for instrumented libs generated by jscoverage/JSCover
19+
lib-cov
1320

14-
# misc
15-
.DS_Store
16-
.env.local
17-
.env.development.local
18-
.env.test.local
19-
.env.production.local
21+
# Coverage directory used by tools like istanbul
22+
coverage
23+
*.lcov
2024

21-
npm-debug.log*
22-
yarn-debug.log*
23-
yarn-error.log*
25+
# nyc test coverage
26+
.nyc_output
27+
28+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29+
.grunt
30+
31+
# Bower dependency directory (https://bower.io/)
32+
bower_components
33+
34+
# node-waf configuration
35+
.lock-wscript
36+
37+
# Compiled binary addons (https://nodejs.org/api/addons.html)
38+
build/Release
39+
40+
# Dependency directories
41+
node_modules/
42+
jspm_packages/
43+
44+
# TypeScript v1 declaration files
45+
typings/
46+
47+
# TypeScript cache
48+
*.tsbuildinfo
49+
50+
# Optional npm cache directory
51+
.npm
52+
53+
# Optional eslint cache
54+
.eslintcache
55+
56+
# Microbundle cache
57+
.rpt2_cache/
58+
.rts2_cache_cjs/
59+
.rts2_cache_es/
60+
.rts2_cache_umd/
61+
62+
# Optional REPL history
63+
.node_repl_history
64+
65+
# Output of 'npm pack'
66+
*.tgz
67+
68+
# Yarn Integrity file
69+
.yarn-integrity
70+
71+
# dotenv environment variables file
72+
.env
73+
.env.test
74+
75+
# parcel-bundler cache (https://parceljs.org/)
76+
.cache
77+
78+
# Next.js build output
79+
.next
80+
81+
# Nuxt.js build / generate output
82+
.nuxt
83+
dist
84+
85+
# Gatsby files
86+
.cache/
87+
# Comment in the public line in if your project uses Gatsby and *not* Next.js
88+
# https://nextjs.org/blog/next-9-1#public-directory-support
89+
# public
90+
91+
# vuepress build output
92+
.vuepress/dist
93+
94+
# Serverless directories
95+
.serverless/
96+
97+
# FuseBox cache
98+
.fusebox/
99+
100+
# DynamoDB Local files
101+
.dynamodb/
24102

25-
# Eclude JetBrains config directory
26-
.idea
103+
# TernJS port file
104+
.tern-port

‎Track 4_ReactJS_Web Development/react-playground/.prettierrc.json

Whitespace-only changes.

‎Track 4_ReactJS_Web Development/react-playground/LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 Tomas Belada
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎Track 4_ReactJS_Web Development/react-playground/README.md

+12-53
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,18 @@
1-
# React 18 template ⚛️
2-
> Faster as it should be. This template has stripped all tests and dust that is included with CRA (`create-react-app`) template.
3-
>
4-
> A very minimal and skimmed setup of React. Hope you liked it. ✌🏽
1+
# react-esbuild-starter
52

6-
## Default package manager: Yarn (lighter than NPM)
7-
> You can use NPM too, just remove the `yarn.lock` in that case.
3+
Starter template for React and Typescript.
4+
Inspired by https://github.com/sikanhe/rescript-esbuild-starter
85

6+
It provides minimal yet 🔥 blazing fast ™ development boilerplate for rapid React prototyping.
97

10-
![Yarn badge](https://img.shields.io/badge/Yarn-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white) ![](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white) ![NodeJS Badge](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white) ![](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) ![](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) ![](https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white) ![](https://img.shields.io/badge/Postman-FF6C37?style=for-the-badge&logo=Postman&logoColor=white)
8+
- `yarn start` Starts typescript typechecking and esbuild in watch mode, and serves web page at localhost:5000.
9+
- `yarn build` Builds production bundle for browser, outputs bundle to dist/bundle.js with source map.
10+
- `yarn clean` Clean up assets produced by esbuild.
1111

12-
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) ![ts](https://badgen.net/badge/-/TypeScript?icon=typescript&label&labelColor=blue&color=555555) ![ts-strict](https://camo.githubusercontent.com/0f9fcc0ac1b8617ad4989364f60f78b2d6b32985ad6a508f215f14d8f897b8d3/68747470733a2f2f62616467656e2e6e65742f62616467652f547970655363726970742f7374726963742532302546302539462539322541412f626c7565)
13-
[![js-standard-style](https://cdn.rawgit.com/standard/standard/master/badge.svg)](http://standardjs.com)
12+
All code bundling and transpilation is handled by esbuild. Its configuration is kept inside `esbuild.config.mjs`. Follow [esbuild docs](https://esbuild.github.io/getting-started/) to see all supported options.
1413

15-
## ⚠️This template uses React 18-rc⚠️
16-
Since React18 is the future and already in the release candidate, i felt confident of using the rc version of react and react-dom in the template. Not major changes would be made in `rc -> latest release`.
14+
### Caveats
1715

18-
Please read the [docs](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html) for more information about the changes from **React 17 to 18**.
19-
20-
### P.S
21-
> React 18 uses a new Client Root API, documented below, same has been explained well in `App.js` inside the `src` folder.
22-
23-
24-
```jsx
25-
// New ROOT API in React 18 ⚛️
26-
import { createRoot } from 'react-dom/client';
27-
const container = document.getElementById('app');
28-
const root = createRoot(container);
29-
root.render(<App {...props} />);
30-
```
31-
32-
## Running the project on port 2000
33-
```shell
34-
npm install
35-
npm run start
36-
```
37-
> That's it ✌🏽 (Installing the dependencies might take time, depending upon your workstation's computing power and network bandwidth available).
38-
39-
**After `npm run start` open: [ReactApp🔗](http://127.0.0.1:2000) **
40-
41-
---
42-
43-
### Advanced Implementations ahead (skip if not needed)
44-
45-
**Please checkout the branch as per your requirement, currently the branches are:**
46-
47-
1. **NextJS with Tailwind** `nextjs-tailwind` -> https://github.com/nooobcoder/clean-react-app/tree/nextjs-tailwind
48-
49-
2. **NextJS with TypeScript** `nextjs-typescript` -> https://github.com/nooobcoder/clean-react-app/tree/nextjs-typescript
50-
51-
3. **React with Typescript (very strict typechecks)** `typescript-react-app` -> https://github.com/nooobcoder/clean-react-app/tree/typescript-react-app
52-
53-
---
54-
55-
A very clean React App ⚛️ starter template by [Ankur Paul](https://github.com/nooobcoder)
56-
57-
---
58-
59-
![profile-avatar](https://avatars.githubusercontent.com/u/50350828?s=400&u=82f5ebc3cbedef0c5ca3c59086cf0f38c45dedbc&v=4)
16+
- No output file hashing
17+
- No test runner
18+
- Importing CSS in JS file is not supported in esbuild yet. It is currently in development https://github.com/evanw/esbuild/issues/20. In meantime either opt-in for some CSS-in-JS solution, or include styles directly in `www/index.html`.

‎Track 4_ReactJS_Web Development/react-playground/esbuild.config.mjs

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import esbuild from "esbuild";
2+
import serve, { error, log } from "create-serve";
3+
import cssModulesPlugin from "esbuild-css-modules-plugin";
4+
5+
const isDevServer = process.argv.includes("--dev");
6+
7+
esbuild
8+
.build(
9+
{
10+
entryPoints: ["src/index.tsx"],
11+
bundle: true,
12+
outfile: "www/dist/bundle.js",
13+
minify: !isDevServer,
14+
sourcemap: true,
15+
incremental: isDevServer,
16+
target: ["chrome58", "firefox57", "safari11", "edge18"],
17+
define: {
18+
"process.env.NODE_ENV": isDevServer
19+
? '"development"'
20+
: '"production"',
21+
},
22+
watch: isDevServer && {
23+
onRebuild(err) {
24+
serve.update();
25+
err ? error("❌ Failed") : log("✅ Updated");
26+
},
27+
},
28+
},
29+
cssModulesPlugin({
30+
// optional. set to false to not inject generated css into page;
31+
// default value is false when set `v2` to `true`, otherwise default is true,
32+
// if set to `true`, the generated css will be injected into `head`;
33+
// could be a string of css selector of the element to inject into,
34+
// e.g.
35+
// ```
36+
// inject: '#some-element-id' // the plugin will try to get `shadowRoot` of the found element, and append css to the `shadowRoot`, if no shadowRoot then append to the found element, if no element found then append to document.head
37+
// ```
38+
// could be a function with params content & digest (return a string of js code to inject to page),
39+
// e.g.
40+
// ```
41+
// inject: (cssContent, digest) => `console.log("${cssContent}", "${digest}")`
42+
// ```
43+
inject: false,
44+
45+
localsConvention: "camelCaseOnly", // optional. value could be one of 'camelCaseOnly', 'camelCase', 'dashes', 'dashesOnly', default is 'camelCaseOnly'
46+
47+
generateScopedName: (name, filename, css) => string, // optional. refer to: https://github.com/madyankin/postcss-modules#generating-scoped-names
48+
49+
cssModulesOption: {
50+
// optional, refer to: https://github.com/madyankin/postcss-modules/blob/d7cefc427c43bf35f7ebc55e7bda33b4689baf5a/index.d.ts#L27
51+
// this option will override others passed to postcss-modules
52+
},
53+
54+
v2: true, // experimental. v2 can bundle images in css, note if set `v2` to true, other options except `inject` will be ignored. and v2 only works with `bundle: true`.
55+
})
56+
)
57+
.catch(() => process.exit(1));
58+
59+
if (isDevServer) {
60+
serve.start({
61+
port: 7000,
62+
root: "./www",
63+
live: true,
64+
});
65+
}

0 commit comments

Comments
 (0)