react-pixi-fiber

When setting properties that expect a PIXI.Point or PIXI.ObservablePoint, you can use shorthand notation instead of creating full objects:

• Array of integers: [x, y]
• Comma-separated string: "x,y"
• Single integer (applies to both x and y): [i] or "i"

You can also pass a direct PIXI.Point object; the library will use the object's .copy() method to apply the values.

// Examples of shorthand for Point properties
<Container position={[10, 20]} />
<Container position="10,20" />
<Container position={[5]} />

The public folder is an "escape hatch" for assets that should not be processed by Webpack. Files in public are copied to the build folder untouched.

When to use it:

• Files requiring specific names (e.g., manifest.webmanifest).
• Thousands of images that need dynamic path referencing.
• Small scripts (e.g., pace.js) that should stay outside the bundle.
• Libraries incompatible with Webpack.

How to reference assets:

• In index.html: Use %PUBLIC_URL% prefix.
• In JavaScript: Use process.env.PUBLIC_URL.

Warning: Files in public are not minified, do not cause compilation errors if missing, and do not have content hashes for caching.

<!-- In index.html -->
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

// In JavaScript
render() {
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

The project follows the standard Create React App structure. For the application to build correctly, the following files must exist with these exact names:

• public/index.html: The page template.
• src/index.js: The JavaScript entry point.

Key Rules:

• JS and CSS files: Must be placed inside the src directory for Webpack to process them.
• Assets: Only files inside public can be referenced directly from public/index.html.
• Subdirectories: You can create subdirectories inside src for organization.
• Top-level directories: You can create other top-level directories, but they will not be included in the production build (useful for documentation).

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

By default, tests run in a jsdom environment. If your tests do not depend on browser globals (like window or document), ReactDOM.render(), or Enzyme's mount(), you can disable jsdom to improve performance.

In your package.json, change the test script from:

"test": "react-scripts test --env=jsdom"

to:

"test": "react-scripts test"

Note: jsdom is not needed for shallow rendering (shallow()) or snapshot testing.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
-   "test": "react-scripts test --env=jsdom"
+   "test": "react-scripts test"

If you use routers like React Router with the HTML5 pushState API, a standard Express setup will fail on fresh page loads for nested routes (e.g., /todos/42). You must configure Express to serve index.html for all unknown paths using a wildcard route.

 app.use(express.static(path.join(__dirname, 'build')));

-app.get('/', function (req, res) {
+app.get('/*', function (req, res) {
   res.sendFile(path.join(__dirname, 'build', 'index.html'));
 });

To ensure Sass is always compiled during development and production, use npm-run-all to run the CSS watcher/builder alongside the standard React scripts.

1. Install npm-run-all:

npm install --save npm-run-all

2. Update scripts in package.json to use npm-run-all -p (parallel) for start and sequential execution for build.

"scripts": {
  "build-css": "node-sass-chokidar src/ -o src/",
  "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
  "start-js": "react-scripts start",
  "start": "npm-run-all -p watch-css start-js",
  "build-js": "react-scripts build",
  "build": "npm-run-all build-css build-js"
}

The examples directory is managed via react-scripts. To update an existing project to a newer version of react-scripts:

1. Check your current version in package.json.
2. Consult the Create React App changelog for migration instructions and potential breaking changes.
3. Bump the react-scripts version in package.json.
4. Run npm install to apply the update.

The project uses Jest as its test runner. When you run npm test, Jest launches in watch mode, re-running tests whenever a file is saved.

Key Behaviors:

• Watch Mode: Includes an interactive CLI to run all tests or focus on specific patterns.
• Version Control Integration: By default, Jest only runs tests related to files changed since the last commit to optimize speed. You can press a in watch mode to force a full test run.
• CI Environment: On continuous integration servers (or if not in a Git repository), Jest runs all tests once and exits.
• Filename Conventions: Jest looks for files in __tests__ folders with .js suffixes, or files with .test.js or .spec.js suffixes anywhere under the src directory.

You can use react-pixi-fiber as a drop-in replacement for the older react-pixi package using an alias.

Option 1: Update imports Change import ... from 'react-pixi' to import ... from 'react-pixi-fiber/react-pixi-alias'.

Option 2: Webpack Alias Configure your webpack config to alias react-pixi$ to react-pixi-fiber/react-pixi-alias.

// Webpack configuration
resolve: {
  alias: {
    "react-pixi$": "react-pixi-fiber/react-pixi-alias"
  }
}

Flow can be added to the project to help catch bugs via static type checking.

1. Install the Flow binary: npm install --save flow-bin.
2. Add a flow script to your package.json: "flow": "flow".
3. Initialize Flow in your project root: npm run flow init (this creates a .flowconfig file).
4. Enable type checking in specific files by adding the // @flow comment at the top of the file.

Run npm run flow to execute the type checker.

npm install --save flow-bin
# Add to package.json scripts:
# "flow": "flow"
npm run flow init