Hello React: Create a minimalist react app

Overview

hello react

we're going to create a minimalist react app.

the goal isn't just to get something working. it's to make something you can understand in its entirety. to that end, we're going to keep things much simpler than, say, create-react-app.

prerequisites

this quick start assumes you already know javascript and are familiar with web basics, including HTML and CSS.

beyond that, all we need is:

  1. git

    if you haven't already, clone this repo.

  2. node, including npm: https://nodejs.org/en/download/

    the following version should be greater than 8.0.0

    npm --version
    
  3. optionally, an IDE. i recommend VS Code, which has excellent support for web development without much configuration.

quick start

clone this repo. create an empty NPM package:

npm init

this creates a package.json file. this will be our ONLY build configuration file. it specifies all of our dependencies, how to build, and how to test.

next, install, dependencies:

npm install esbuild react react-dom @types/react @types/react-dom

esbuild is an exceptionally fast javascript bundler. it serves a similar function as parcel or webpack, but is both faster and simpler. it turns a source tree plus npm dependencies into a single bundle.js that can run in a browser.

react is a super popular library for coding single-page webapps.

finally, @types/xyz, by convention, contains Typescript types for package xyz.

reference

intro to react: https://reactjs.org/tutorial/tutorial.html

intro to typescript: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

step 1: hello world

run ls -lha node_modules. you should see our dependencies plus a folder called .bin.

run ./node_modules/.bin/esbuild. this prints esbuild's help options. as a shortcut, you can achieve the same thing by running npx esbuild.

create a file, app.tsx, as follows:

import * as React from 'react'
import ReactDOM from 'react-dom'

function App() {
    return <h1>hello world</h1>
}

ReactDOM.render(<App />, document.querySelector('#root'))

next run:

npx esbuild app.tsx --serve

this bundles your file plus all dependencies, converts Typescript to Javascript, and produces a single app.js. load it in your browser to see what that looks like!

finally, we're going to create an empty page. this is a very common pattern in react: the HTML is just a bootstrapping mechanism for loading JS.

make a folder called www/, then www/index.html:

<!DOCTYPE html>
<html>
  <body>
    <div id="root" />
    <script src="js/app.js"></script>
  </body>
</html>

run the following:

npx esbuild app.tsx --bundle --servedir=www/ --outdir=www/js

congratulations! your first React web app.

to avoid excess, typing, add the following to your package.json

  "scripts": {
      "start": "esbuild app.tsx --bundle --servedir=www/ --outdir=www/js"
  }

from now on, you can just run:

npm start     # shorthand for `npm run start`

if you are stuck, run git diff origin/step1

step 2: cookie clicker

recreate the cookie clicker game. for reference: https://orteil.dashnet.org/cookieclicker/

check out the Intro to React reference, link above.

should look something like this:

image

bonus: prettier

i recommend installing the Prettier extension in VS Code. then, configure format-on-save. one less thing to think about.

bonus: test

start with:

git checkout step2

...then, write a unit test for pluralize. i recommend tape, the most minimal testing libary for npm. once done, you should be able to run

npm test

...to see your tests run.

bonus: deploy

add a build script to your package.json:

  "scripts": {
      // "start" as before
      "build": "esbuild app.tsx --bundle --minify --outdir=www/js"
  }

deploy to Netlify, using npm run build as the build command.

create-esbuild-app is an extremely fast create-react-app replacement.

create-esbuild-app is a wrapper around create-react-app while esbuild-scripts is a react-scripts compatible CLI which can be dropped in as a replacement

Luke Sheard 75 Jan 11, 2022
In this React JS course, create-react-app was used to create the project using typescript as the standard language for development

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jeferson Carvalho 1 Jan 7, 2022
Boilerplate app for full-stack MERN app with Create React App client toolchain. Uses JWT for auth.

Boilerplate app for full-stack MERN app with Create React App client tool chain. Includes React, JWT authentication, Mongoose/MongoDB, Apollo Server/Client, and ExpressJS.

John Desrosiers 4 Dec 1, 2021
Template to create reactjs component library which will help you to create your dream library.

reactjs-library-template Template to create reactjs component library which will help you to create your dream library. How to use Commands to setup e

Nishant Tomar 1 Dec 25, 2021
Create React App - Set up a modern web app by running one command.

Create React App - Set up a modern web app by running one command.

Facebook 92.9k Jan 19, 2022
Kotaplate is web app template based on Create React App and Bootstrap 5

Kotaplate is web app template based on Create React App and Bootstrap 5

Asrul Hanafi 4 Nov 23, 2021
🌏 Create React App companion for universal app. No eject, auto SSR, zero config, full HMR, and more (inactive project)

cra-universal Create React App Universal CLI Create React App companion for universal app. No eject, zero config with customization, supports string a

Antony Budianto 423 Jan 6, 2022
Hlocal-app - Create React App example with styled-components & TypeScript

Create React App example with styled-components & TypeScript The main difference

Leonardo Ribeiro 0 Jan 4, 2022
Black Dashboard React is a beautiful Bootstrap 4, Reacstrap and React (create-react-app) Admin Dashboard with a huge number of components built to fit together and look amazing.

Black Dashboard React Black Dashboard React is a beautiful Bootstrap 4, Reacstrap and React (create-react-app) Admin Dashboard with a huge number of c

Creative Tim 356 Jan 14, 2022
Create React App boilerplate template with React, Redux Toolkit, React Router, Ant Design, Axios, Redux-Saga, SASS, Authentication, Routes.

Create React App boilerplate template with React, Redux Toolkit, React Router, Ant Design, Axios, Redux-Saga, SASS, Authentication, Routes. No configuration is required, Start building your App.

Nilanth 16 Dec 31, 2021
A demo repo to dockerize React Frontend(using Create React App) and Express Backend

This is a Demo Repository to dockerize a React frontend and an express backend in a single container. The two important files are: Dockerfile contains

Raghavendra Kaushik 6 Aug 17, 2021
A starter project for React-Three-Fiber bootstrapped with Create-React-App and some useful packages

A starter project for React-Three-Fiber bootstrapped with Create-React-App and some useful packages

Kevin Omyonga 9 Dec 3, 2021
Project similar to the Create React App for libraries and dependencies

Create React Dependency • • • Contributing | Code of Conduct Project similar to the Create React App for libraries and dependencies. It creates a read

André Lins 25 Nov 30, 2021
Create-React-App + TypeScript + Ant-Design (without Eject)

This project was bootstrapped with Create React App. Below you will find some information on how to perform common tasks. You can find the most recent

#кодеротбога 114 Jan 16, 2022
Use antd in create-react-app without ejecting ✨

Use antd in create-react-app ✨ Create React App + Ant Design. Step by Step Documentation ???? English: https://ant.design/docs/react/use-with-create-r

Ant Design Team 551 Jan 9, 2022
A CLI tool to clean out boilerplate code created by create-react-app

Clean React Clean React is a CLI tool that removes and modifies some of the boilerplate files and code that are being generated when initiating a new

Meike Hankewicz 13 Nov 26, 2021
This project was bootstrapped with Chakra UI & Create React App

Getting Started with Create React App This project was bootstrapped with Chakra UI & Create React App. ScreenShots Available Scripts In the project di

Pawan Kumar 44 Jan 9, 2022
A cli tool to generate cra-template from current create-react-app project.

Create Cra Template A cli tool to generate cra-template from current create-react-app project. Create Cra Template Templates cra-template-popular cra-

Yoki 20 Dec 18, 2021
Create daml app with react.js

create-daml-app See documentation for details. Please ask for help on the Daml forum if you encounter any issue! Development Quick Start You need to h

null 1 Dec 4, 2021