React

Experimentation with React. Get started!

This repository is a Yarn workspace monorepo managed with Yarn 4 (Berry).

Getting started

Install Node.js and enable Corepack (bundled with Node.js 16+):

corepack enable
corepack prepare yarn@stable --activate

Then install all workspace dependencies from the root:

yarn install

Running tests

Run tests across all workspaces at once:

yarn workspaces foreach -A run test

Run tests for a single workspace:

yarn workspace <workspace-name> test

For example:

yarn workspace nextjs test
yarn workspace app test
yarn workspace remix-react-testing test

Adding a new workspace

1. Create a new directory at the root of the repository and add a package.json with a unique name field:

{
  "name": "my-new-app",
  "private": true,
  "scripts": {
    "build": "...",
    "test": "..."
  }
}

2. Register it in the root package.json workspaces list:

{
  "workspaces": [
    "app-misc",
    "chakra-ui",
    "my-new-app"
  ]
}

3. Run yarn install from the root to pick it up.

The new workspace's dependencies will be hoisted to the root node_modules automatically. Each workspace should declare its own dependencies — do not add application dependencies to the root package.json.

Workspaces

Directory	Name	Description
app-misc	app	Potluck of different examples
chakra-ui	chakra-ui	Example with Chakra UI
dnd	react-dnd-example-3	Example with Drag and Drop
nextjs	nextjs	Example with Next.js
remix	remix-react-testing	Example with Remix
router	frontend-react	Example with React Router

Basic

To start with the syntax. No npm / yarn installation required to test it, but it might be getting old (2016).

Sources

For learning purposes:

• Facebook: React tutorial, create-react-app
• Scotch.io: React tutorial
• FreeCodeCamp: React App One, React App Two
• Free Online rest API: jsonplaceholder.typicode.com
• React Documentation: API calls, conditional rendering
• Redux Documentation: react-redux, React-redux examples, Access redux store, Access redux store from outside component, React + Redux real world example
• Other Documentation: Pass props to component, Remove element from list, One page app, react with jwt, Real world example, react with login, Private route