### Install Now CLI Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Command to install the Now command-line tool globally using npm, for deploying applications. ```sh npm install -g now ``` -------------------------------- ### Install and Run Serve for Static Deployment Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Installs the 'serve' package globally and then uses it to serve the static files generated in the 'build' directory. 'serve' is a simple HTTP server ideal for deploying static sites. ```sh npm install -g serve serve -s build ``` -------------------------------- ### Install npm Dependency Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Demonstrates how to install a new npm dependency, such as React Router, using the npm install command. This is a standard procedure for adding external libraries to a project. ```sh npm install --save react-router ``` -------------------------------- ### Install gh-pages and Deploy to GitHub Pages Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Installs the gh-pages package and demonstrates the command to deploy a React application to GitHub Pages after build configuration. ```sh npm install --save gh-pages npm run deploy ``` -------------------------------- ### jest-enzyme Integration in Setup File Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Instructions to import `jest-enzyme` into the setup file (`src/setupTests.js`) to make its custom matchers available globally for all tests. ```javascript import 'jest-enzyme'; ``` -------------------------------- ### Install jest-enzyme Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Command to install the `jest-enzyme` package, which provides convenient matchers for testing React components with Jest. ```sh npm install --save jest-enzyme ``` -------------------------------- ### Install Enzyme and React Adapter Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Command to install Enzyme and the appropriate React adapter for testing React 16 components. This is a prerequisite for using Enzyme's rendering APIs. ```sh npm install --save enzyme enzyme-adapter-react-16 react-test-renderer ``` -------------------------------- ### Install React Styleguidist Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Installs the react-styleguidist npm package as a project dependency. This package provides a development environment for creating style guides and developing React components in isolation. ```sh npm install --save react-styleguidist ``` -------------------------------- ### Add Styleguidist Scripts to package.json Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Adds npm scripts to your project's package.json file for starting the Styleguidist development server and building the static style guide. These scripts automate the process of running and deploying Styleguidist. ```json "scripts": { "styleguide": "styleguidist server", "styleguide:build": "styleguidist build", "start": "react-scripts start", ``` -------------------------------- ### Run Styleguidist Server Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Starts the Styleguidist development server using the npm script defined in package.json. This allows you to view your component library, documentation, and develop components interactively. ```sh npm run styleguide ``` -------------------------------- ### Install npm-run-all for Parallel Scripts Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Installs `npm-run-all`, a utility for running multiple npm scripts. This is useful for executing watch scripts and development servers concurrently. ```sh npm install --save npm-run-all ``` -------------------------------- ### Get Serve Command Help Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Displays the help message for the 'serve' command, listing all available options and their descriptions. This is useful for understanding the full capabilities of the 'serve' utility. ```sh serve -h ``` -------------------------------- ### Integrate Sass Watch and Start Scripts Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Updates `start` and `build` npm scripts to use `npm-run-all`. The `start` script now runs `watch-css` in parallel with `react-scripts start`, and the `build` script runs `build-css` before `react-scripts build`. ```diff "scripts": { "build-css": "node-sass-chokidar src/ -o src/", "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive", - "start": "react-scripts start", - "build": "react-scripts build", + "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", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } ``` -------------------------------- ### Deploy to Netlify CLI Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Commands to install the Netlify CLI and deploy a React application to Netlify's CDN. Choose 'build' as the deployment path. ```sh npm install netlify-cli netlify deploy ``` -------------------------------- ### Initialize Storybook in Project Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Runs the getstorybook command within your project directory to set up Storybook. This command analyzes your project and configures Storybook accordingly, allowing you to start developing UI components in isolation. ```sh getstorybook ``` -------------------------------- ### Install Storybook CLI Globally Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Installs the Storybook command-line interface globally, which is necessary for initializing Storybook in your project. This tool helps in setting up Storybook and managing its configuration. ```sh npm install -g @storybook/cli ``` -------------------------------- ### Enzyme Setup for React 16 Adapter Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Configuration for Enzyme's React 16 adapter, typically placed in a setup file like `src/setupTests.js`. This allows Enzyme to correctly interact with React components. ```javascript import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() }); ``` -------------------------------- ### Installing Flow for Static Type Checking Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Installs the `flow-bin` package, which provides the Flow static type checker. This is the first step in adding Flow to a Create React App project. ```bash npm install --save flow-bin ``` -------------------------------- ### Installing React Bootstrap and Bootstrap CSS Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Installs the `react-bootstrap` and `bootstrap` packages using npm. This is a prerequisite for using React Bootstrap components and includes the necessary Bootstrap CSS. ```bash npm install --save react-bootstrap bootstrap@3 ``` -------------------------------- ### Install Sass CLI Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Installs the `node-sass-chokidar` package, a command-line interface for Sass, which is recommended for its performance and file detection capabilities over standard `node-sass`. ```sh npm install --save node-sass-chokidar ``` -------------------------------- ### Firebase Project Initialization and Deployment Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Initializes a Firebase project for hosting, configures build settings, and deploys the application. Requires Firebase CLI installation and a Firebase account. ```sh npm install -g firebase-tools firebase login firebase init # Follow prompts for project selection, database rules, public directory (build), and single-page app configuration. npm run build firebase deploy ``` -------------------------------- ### Install Source Map Explorer for Bundle Analysis Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Installs the 'source-map-explorer' package using npm, which is used to analyze JavaScript bundles by examining source maps to identify code bloat. This is a prerequisite for running the analysis script. ```sh npm install --save source-map-explorer ``` -------------------------------- ### Firebase Hosting Deployment CLI Output Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Example output from the Firebase deployment process, showing the progress and success of uploading build assets and completing the release. ```sh === Deploying to 'example-app-fd690'... i deploying database, hosting ✔ database: rules ready to deploy. i hosting: preparing build directory for upload... Uploading: [============================== ] 75% ✔ hosting: build folder uploaded successfully ✔ hosting: 8 files uploaded successfully i starting release process (may take several minutes)... ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/example-app-fd690/overview Hosting URL: https://example-app-fd690.firebaseapp.com ``` -------------------------------- ### Configure Multiple Proxies with Regex in package.json Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md This example demonstrates how to configure multiple proxy rules in `package.json`, using regular expressions to match different URL paths. It shows how to set targets, enable WebSockets, and rewrite paths for specific routes. This provides granular control over request routing. ```json { // ... "proxy": { // Matches any request starting with /api "/api": { "target": "", "ws": true // ... }, // Matches any request starting with /foo "/foo": { "target": "", "ssl": true, "pathRewrite": { "^/foo": "/foo/beta" } // ... }, // Matches /bar/abc.html but not /bar/sub/def.html "/bar/[^/]*[.]html": { "target": "" // ... }, // Matches /baz/abc.html and /baz/sub/def.html "/baz/.*/.*[.]html": { "target": "" // ... } } // ... } ``` -------------------------------- ### Install Dependencies for Git Hooks and Prettier Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Installs the necessary npm packages to enable Git hooks for code formatting. Husky is used to manage Git hooks, lint-staged runs scripts on staged files, and Prettier is the code formatter itself. These ensure consistent code style across the project. ```sh npm install --save husky lint-staged prettier ``` -------------------------------- ### npm Script: Start Development Server Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Runs the React application in development mode, enabling hot-reloading and displaying lint errors in the console. It serves the application at http://localhost:3000. ```bash npm start ``` -------------------------------- ### Node.js Express Server for Static Files Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md A programmatic example using Node.js and the Express framework to serve a Create React App build. It sets up Express to serve static files from the 'build' directory and handles root requests by sending 'index.html'. ```javascript const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'build'))); app.get('/', function (req, res) { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); app.listen(9000); ``` -------------------------------- ### Enable HTTPS in Development Server (Windows cmd.exe) Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md This command sets the `HTTPS` environment variable to `true` and starts the development server on Windows using `cmd.exe`. This enables serving the application over HTTPS, which is useful when proxying to an HTTPS API server. ```cmd set HTTPS=true&&npm start ``` -------------------------------- ### Travis CI Configuration for React Apps Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md An example `.travis.yml` file for configuring Travis CI to build and test a React application. It specifies the Node.js version, caches `node_modules`, and runs build and test scripts. ```yaml language: node_js node_js: - 6 cache: directories: - node_modules script: - npm run build - npm test ``` -------------------------------- ### Example Folder Structure for Create React App Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Illustrates the default folder structure created by Create React App. It highlights essential files like index.html and index.js, and explains the role of the 'src' and 'public' directories regarding Webpack processing and asset accessibility. Files outside 'src' are not processed by Webpack. ```text 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 ``` -------------------------------- ### Example Sass Import Statements Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Demonstrates how to use Sass's `@import` directive to include shared variables or external CSS files. This allows for modular styling and easier management of common style properties. ```scss @import 'styles/_colors.scss'; // assuming a styles directory under src/ @import 'nprogress/nprogress'; ``` -------------------------------- ### Configuring Jest Coverage Reporting in package.json Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Provides an example of how to configure Jest's coverage reporting by overriding default settings in the `package.json` file. This includes options for specifying which files to collect coverage from, coverage thresholds, and reporting formats. ```json { "name": "your-package", "jest": { "collectCoverageFrom" : [ "src/**/*.{js,jsx}", "!/node_modules/", "!/path/to/dir/" ], "coverageThreshold": { "global": { "branches": 90, "functions": 90, "lines": 90, "statements": 90 } }, "coverageReporters": ["text"], "snapshotSerializers": ["my-serializer-module"] } } ``` -------------------------------- ### Enable HTTPS in Development Server (Linux/macOS Bash) Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md This command sets the `HTTPS` environment variable to `true` and starts the development server on Linux or macOS using Bash. This enables serving the application over HTTPS, which is useful when proxying to an HTTPS API server. ```bash HTTPS=true npm start ``` -------------------------------- ### Render Sprite with React DOM (v16-17) Source: https://github.com/michalochman/react-pixi-fiber/blob/master/README.md This example demonstrates rendering a PixiJS Sprite with react-pixi-fiber using React DOM versions 16 and 17. It uses the legacy `render` function from 'react-dom'. The setup is similar to the v18+ example, differing only in the ReactDOM import and usage. ```jsx import { render } from "react-dom"; import { Sprite, Stage } from "react-pixi-fiber"; import bunny from "./bunny.png"; function Bunny(props) { return ; } const container = document.getElementById("container"); render( , container ); ``` -------------------------------- ### Initializing Test Environment with Mocked localStorage Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Shows how to set up a test environment by creating a `src/setupTests.js` file. This file is automatically executed before tests run and can be used to mock browser APIs like `localStorage`. ```javascript const localStorageMock = { getItem: jest.fn(), setItem: jest.fn(), clear: jest.fn() }; global.localStorage = localStorageMock ``` -------------------------------- ### CSS Post-Processing with Autoprefixer Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md This section illustrates the effect of Autoprefixer, a tool used in the project setup to automatically minify CSS and add vendor prefixes. This ensures cross-browser compatibility without manual intervention. The example shows a CSS rule before and after being processed by Autoprefixer. ```css .App { display: flex; flex-direction: row; align-items: center; } ``` ```css .App { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } ``` -------------------------------- ### Deploy to Now Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Steps to build a React application and deploy it using the Now CLI. This includes building the app, navigating to the build directory, and running the deploy command with a project name. ```sh npm run build cd build now --name your-project-name ``` -------------------------------- ### Serve Application with Custom Port Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Demonstrates how to use the 'serve' command with the '-p' flag to specify a custom port for serving the static build. This is useful for avoiding port conflicts. ```sh serve -s build -p 3000 ``` -------------------------------- ### Web App Manifest Configuration for start_url Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md This JavaScript snippet shows how to configure the 'start_url' in the 'public/manifest.json' file for a React application. Setting 'start_url' to '.' ensures that when the app is added to a device's home screen, the shortcut correctly points to the root of the application ('/'), which is necessary for client-side routers that expect the app to be served from the root path. ```json { "start_url": "." } ``` -------------------------------- ### Build Project in Linux/macOS (Bash) Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Builds the project using npm run build. This command also performs linting checks and will fail if any warnings are detected. ```bash CI=true npm run build ``` -------------------------------- ### Update Watchman on macOS Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Issues with 'npm test' hanging on macOS Sierra can be related to Watchman installation. This snippet provides commands to shut down the Watchman server, update Homebrew, and reinstall Watchman, potentially fixing the problem. It's recommended to try this after deleting 'node_modules' and running 'npm install'. ```bash watchman shutdown-server brew update brew reinstall watchman ``` -------------------------------- ### Build and Analyze Production Bundle Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Commands to first create a production build of the React application and then run the 'analyze' script. The analyze script utilizes source-map-explorer to show the composition of the JavaScript bundle. ```sh npm run build npm run analyze ``` -------------------------------- ### React Router BrowserRouter basename Prop Example Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md This JavaScript code example shows how to use the 'basename' prop with the 'BrowserRouter' component from React Router. Setting 'basename' to '/calendar' ensures that all links within the application are prefixed with '/calendar'. This is useful when routing needs to be handled from a subdirectory rather than the server root. ```javascript // renders ``` -------------------------------- ### npm Script: Build for Production Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Bundles the React application for production, optimizing it for performance. The output is minified and placed in the 'build' folder with hashed filenames, ready for deployment. ```bash npm run build ``` -------------------------------- ### Netlify Redirects for pushState Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Configuration file for Netlify to handle client-side routing using the HTML5 pushState API by rewriting all requests to index.html. ```none /* /index.html 200 ``` -------------------------------- ### Implement a Rectangle Component in React Pixi Fiber Source: https://github.com/michalochman/react-pixi-fiber/blob/master/README.md Example of creating a reusable `Rectangle` component using `react-pixi-fiber`. It defines custom behavior for drawing a rectangle with specified properties like position, dimensions, and fill color. ```javascript // components/Rectangle.js import { CustomPIXIComponent } from "react-pixi-fiber"; import * as PIXI from "pixi.js"; const TYPE = "Rectangle"; export const behavior = { customDisplayObject: props => new PIXI.Graphics(), customApplyProps: function(instance, oldProps, newProps) { const { fill, x, y, width, height } = newProps; instance.clear(); instance.beginFill(fill); instance.drawRect(x, y, width, height); instance.endFill(); } }; export default CustomPIXIComponent(behavior, TYPE); ``` ```jsx // App.js import { render } from "react-pixi-fiber"; import * as PIXI from "pixi.js"; import Rectangle from "./components/Rectangle" // Setup PixiJS Application const canvasElement = document.getElementById("container") const app = new PIXI.Application(800, 600, { view: canvasElement }); render( , app.stage ); ``` -------------------------------- ### Basic Jest Test for Sum Function Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md A simple Jest test case demonstrating the use of `it()` blocks and `expect()` for asserting the output of a function. This example assumes a `sum` function is imported from a local module. ```javascript import sum from './sum'; it('sums numbers', () => { expect(sum(1, 2)).toEqual(3); expect(sum(2, 2)).toEqual(4); }); ``` -------------------------------- ### Custom PIXI Property Registration in React Pixi Fiber Source: https://github.com/michalochman/react-pixi-fiber/blob/master/README.md This example shows how to register custom PIXI properties for React Pixi Fiber components using the CustomPIXIProperty API. It covers cases for specific components, all components, and includes optional validation. ```javascript import { Container, Sprite } from "react-pixi-fiber"; const group = new PIXI.display.Group(0, true); // if you just want to get rid of Unknown Prop Warning: CustomPIXIProperty(Container, "parentGroup"); CustomPIXIProperty(undefined, "zIndex"); // if you want to be strict in the values that are provided CustomPIXIProperty(Container, "parentGroup", value => value instanceof PIXI.display.Group); CustomPIXIProperty([Container, Sprite], "zIndex", value => Number.isFinite(value)); function App() { return ( {/* `parentgroup` below will trigger prop warning, as the letter casing is incorrect */} {/* `zindex` below will trigger prop warning, as the letter casing is incorrect */} ) } ``` -------------------------------- ### npm Script: Eject Configuration Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Permanently removes the single build dependency (react-scripts) from a project, copying all configuration files (Webpack, Babel, ESLint) into the project. This provides full control over the build setup but is a one-way operation. ```bash npm run eject ``` -------------------------------- ### Dynamic Code Splitting with import() Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Shows how to implement code splitting using the dynamic `import()` syntax. This allows for loading modules on demand, improving initial load times by splitting the application code into smaller chunks. ```javascript const moduleA = 'Hello'; export { moduleA }; ``` ```javascript import React, { Component } from 'react'; class App extends Component { handleClick = () => { import('./moduleA') .then(({ moduleA }) => { // Use moduleA }) .catch(err => { // Handle failure }); }; render() { return (
); } } export default App; ``` -------------------------------- ### Setting Temporary Environment Variables in Shell (Linux/macOS) Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Provides the command for setting a temporary environment variable, REACT_APP_SECRET_CODE, in a Linux or macOS Bash shell before starting the React development server. This variable will only be active for the duration of the shell session. ```bash REACT_APP_SECRET_CODE=abcdef npm start ``` -------------------------------- ### Setting Temporary Environment Variables in Shell (Windows) Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Provides the command for setting a temporary environment variable, REACT_APP_SECRET_CODE, in a Windows command prompt (cmd.exe) before starting the React development server. This setting is only valid for the current shell session. ```cmd set REACT_APP_SECRET_CODE=abcdef&&npm start ``` -------------------------------- ### Configure React App for GitHub Pages Deployment Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md Configures a React application to deploy to GitHub Pages by setting the 'homepage' field in package.json and adding deploy scripts. ```javascript "homepage": "https://myusername.github.io/my-app", ``` ```javascript "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build", "start": "react-scripts start", "build": "react-scripts build" } ``` -------------------------------- ### Enzyme Test with Jest Matchers for Component Content Source: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/README.md An example of testing specific content within a React component using Enzyme's `shallow()` and Jest's `toEqual()` matcher. It checks if the component renders a specific JSX element. ```javascript import React from 'react'; import { shallow } from 'enzyme'; import App from './App'; it('renders welcome message', () => { const wrapper = shallow(); const welcome =

Welcome to React

; expect(wrapper.contains(welcome)).toEqual(true); }); ```