### Initialize Storybook in Project Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Run the getstorybook command within your project's directory after installing the global CLI. This command will guide you through the setup process for Storybook. ```sh getstorybook ``` -------------------------------- ### Install and Deploy with Netlify CLI Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Install the Netlify CLI and deploy your project. Choose 'build' as the path to deploy. ```sh npm install netlify-cli netlify deploy ``` -------------------------------- ### Install react-reel with yarn Source: https://github.com/eknowles/react-reel/blob/master/README.md Use this command to install the react-reel package using yarn. ```bash $ yarn add react-reel ``` -------------------------------- ### Add Styleguidist Scripts to package.json Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Integrate these scripts into your package.json to easily start the Styleguidist server or build the style guide. ```diff "scripts": { + "styleguide": "styleguidist server", + "styleguide:build": "styleguidist build", "start": "react-scripts start", ``` -------------------------------- ### Install react-reel with npm Source: https://github.com/eknowles/react-reel/blob/master/README.md Use this command to install the react-reel package using npm. ```bash $ npm install --save react-reel ``` -------------------------------- ### Install node-sass-chokidar Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Install the Sass command-line interface. Use npm or yarn. ```sh npm install --save node-sass-chokidar ``` ```sh yarn add node-sass-chokidar ``` -------------------------------- ### Deploy to Now Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Install the Now CLI, build your app, navigate to the build directory, and run the 'now' command. ```sh npm install -g now npm run build cd build now --name your-project-name ``` -------------------------------- ### Install gh-pages and Add Deploy Scripts Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Install the `gh-pages` package and add `predeploy` and `deploy` scripts to your `package.json` for automated deployment. ```diff "scripts": { + "predeploy": "npm run build", + "deploy": "gh-pages -d build", "start": "react-scripts start", "build": "react-scripts build", ``` -------------------------------- ### Install React Styleguidist with npm Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Use this command to install react-styleguidist as a project dependency using npm. ```sh npm install --save react-styleguidist ``` -------------------------------- ### Initialize Test Environment with Mocked Browser API Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Create a `src/setupTests.js` file to automatically execute global setup before tests. This is useful for mocking browser APIs like localStorage. ```javascript const localStorageMock = { getItem: jest.fn(), setItem: jest.fn(), clear: jest.fn() }; global.localStorage = localStorageMock ``` -------------------------------- ### Install React Styleguidist with yarn Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Use this command to install react-styleguidist as a project dependency using yarn. ```sh yarn add react-styleguidist ``` -------------------------------- ### Sass import examples Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Demonstrates how to import Sass files using include paths. This allows importing from project directories or node modules. ```scss @import 'styles/_colors.scss'; // assuming a styles directory under src/ @import 'nprogress/nprogress'; // importing a css file from the nprogress node module ``` -------------------------------- ### Install gh-pages with Yarn Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Alternative method to install the `gh-pages` package using Yarn. ```sh yarn add gh-pages ``` -------------------------------- ### Install Source Map Explorer Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Add source-map-explorer to your project's dependencies to analyze JavaScript bundle sizes. Use npm or yarn for installation. ```sh npm install --save source-map-explorer ``` ```sh yarn add source-map-explorer ``` -------------------------------- ### Start Development Server Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Runs the app in development mode, opening it at http://localhost:3000. The page auto-reloads on edits, and lint errors are shown in the console. ```bash npm start ``` -------------------------------- ### Install Enzyme and React Test Renderer Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Installs Enzyme and `react-test-renderer` as project dependencies using npm or yarn. ```sh npm install --save enzyme react-test-renderer ``` ```sh yarn add enzyme react-test-renderer ``` -------------------------------- ### Install React Bootstrap and Bootstrap CSS Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Install React Bootstrap and Bootstrap 3 CSS using npm or yarn. Bootstrap CSS is required separately as React Bootstrap does not include it. ```sh npm install --save react-bootstrap bootstrap@3 ``` ```sh yarn add react-bootstrap bootstrap@3 ``` -------------------------------- ### Install Husky, Lint-Staged, and Prettier Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Install these npm packages to enable Git hooks for automatic code formatting before commits. These tools help maintain code style consistency across the project. ```sh npm install --save husky lint-staged prettier ``` ```sh yarn add husky lint-staged prettier ``` -------------------------------- ### Install npm-run-all for parallel scripts Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Install npm-run-all to manage multiple npm scripts. This is useful for running build and watch tasks concurrently. ```sh npm install --save npm-run-all ``` ```sh yarn add npm-run-all ``` -------------------------------- ### Serve Static Build with Serve CLI Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Install the 'serve' package globally and use its command-line interface to serve your Create React App's production build. The default port is 5000, but can be changed with the -p flag. ```sh npm install -g serve serve -s build ``` ```sh serve -h ``` -------------------------------- ### Add Flow to Create React App Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Install `flow-bin` and initialize Flow to add static type checking to your project. Configure `package.json` scripts and create a `.flowconfig` file. ```sh npm install --save flow-bin ``` ```sh yarn add flow-bin ``` ```json "flow": "flow" ``` ```sh npm run flow init ``` ```sh yarn flow init ``` ```javascript // @flow ``` -------------------------------- ### Configure Travis CI Build Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Set up a `.travis.yml` file for continuous integration on Travis CI. This example specifies Node.js version, caching, and build/test scripts. ```yaml language: node_js node_js: - 6 cache: directories: - node_modules script: - npm run build - npm test ``` -------------------------------- ### Serve Create React App with Node.js and Express Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Programmatically serve a Create React App build using Node.js and the Express framework. This setup handles static file serving and directs all root requests to index.html, suitable for client-side routing. ```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); ``` -------------------------------- ### Install npm Dependency Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Use this command to install new dependencies, such as React Router, into your project using npm. ```sh npm install --save react-router ``` -------------------------------- ### Install Jest-Enzyme Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Installs `jest-enzyme` as a development dependency using npm or yarn. This library provides helpful matchers for testing React components with Jest. ```sh npm install --save jest-enzyme ``` ```sh yarn add jest-enzyme ``` -------------------------------- ### Install yarn Dependency Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Use this command to install new dependencies, such as React Router, into your project using yarn. ```sh yarn add react-router ``` -------------------------------- ### Install Storybook CLI Globally Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Install the Storybook CLI globally using npm to enable the getstorybook command. This is the first step to integrating Storybook into your React project for isolated component development. ```sh npm install -g @storybook/cli ``` -------------------------------- ### Import Third-Party Assertion Libraries Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Import assertion libraries like Chai and Sinon for use in your tests. Ensure these libraries are installed in your project. ```javascript import sinon from 'sinon'; import { expect } from 'chai'; ``` -------------------------------- ### Import React Component Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Imports a component from another file using ES6 modules. This example demonstrates importing a default export. ```js import React, { Component } from 'react'; import Button from './Button'; // Import a component from another file class DangerButton extends Component { render() { return ); }; // Also works for scores, counters, IDs, coordinates, etc. const ScoreBoard = () => (
); ``` -------------------------------- ### Handle 'Invalid Host Header' Errors Source: https://github.com/eknowles/react-reel/blob/master/example/README.md If you encounter 'Invalid Host header' errors after configuring the proxy, specify your public development host in a `.env.development` file. This is necessary for remote development setups to prevent DNS rebinding attacks. ```env HOST=mypublicdevhost.com ``` -------------------------------- ### Enzyme Shallow Rendering with Jest Matchers Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Tests a React component's output using Enzyme's `shallow()` and Jest's `toEqual` matcher. This example asserts that the component contains a specific React 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); }); ``` -------------------------------- ### Run Styleguidist Server Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Execute this command in your project's root directory to launch the Styleguidist development server. ```sh npm run styleguide ``` -------------------------------- ### Build for Production Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Builds the app for production, optimizing it for performance. The output is minified and includes hashed filenames, ready for deployment. ```bash npm run build ``` -------------------------------- ### Initialize Firebase Project Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Configure your project for Firebase Hosting by selecting the project, public directory, and single-page app settings. ```sh === Project Setup First, let's associate this project directory with a Firebase project. You can create multiple project aliases by running firebase use --add, but for now we'll just set up a default project. ? What Firebase project do you want to associate as default? Example app (example-app-fd690) === Database Setup Firebase Realtime Database Rules allow you to define how your data should be structured and when your data should be read from and written to. ? What file should be used for Database Rules? database.rules.json ✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json. Future modifications to database.rules.json will update Database Rules when you run firebase deploy. === Hosting Setup Your public directory is the folder (relative to your project directory) that will contain Hosting assets to uploaded with firebase deploy. If you have a build process for your assets, use your build's output directory. ? What do you want to use as your public directory? build ? Configure as a single-page app (rewrite all urls to /index.html)? Yes ✔ Wrote build/index.html i Writing configuration info to firebase.json... i Writing project information to .firebaserc... ✔ Firebase initialization complete! ``` -------------------------------- ### Deploy to GitHub Pages Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Execute the `npm run deploy` command to build and deploy your React application to GitHub Pages. ```sh npm run deploy ``` -------------------------------- ### Project Folder Structure Source: https://github.com/eknowles/react-reel/blob/master/example/README.md This is the standard folder structure for a Create React App project. Key files like `public/index.html` and `src/index.js` must exist with exact filenames. ```bash 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 ``` -------------------------------- ### Enable HTTPS in Development (Windows) Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Set the HTTPS environment variable to true to serve the development server over HTTPS on Windows command prompt. ```bash set HTTPS=true&&npm start ``` -------------------------------- ### Run Build with Linter Checks on Windows (cmd.exe) Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Force the build process to perform linter warning checks and fail if any are found on Windows using the command prompt. Note the intentional lack of whitespace. ```cmd set CI=true&&npm run build ``` -------------------------------- ### Configure Netlify for Client-Side Routing Source: https://github.com/eknowles/react-reel/blob/master/example/README.md To support pushState routing on Netlify, create a _redirects file in the public folder with rewrite rules. ```sh /* /index.html 200 ``` -------------------------------- ### React Component Smoke Test Source: https://github.com/eknowles/react-reel/blob/master/example/README.md A basic smoke test for a React component that verifies it renders without throwing an error. This test uses `ReactDOM.render()` and is suitable as a starting point. ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(, div); }); ``` -------------------------------- ### Add Swap Space for Builds Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Consider adding swap space to your build machine if `npm run build` fails due to insufficient memory, especially in cloud environments. ```bash # Example command to add swap space (specifics vary by OS) # sudo fallocate -l G /swapfile # sudo mkswap /swapfile # sudo swapon /swapfile ``` -------------------------------- ### Set Homepage for Relative Paths in package.json Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Specify the `homepage` in your `package.json` to override the default build assumption that your app is hosted at the server root. Use `.` for relative asset paths. ```json "homepage": ".", ``` -------------------------------- ### Dynamic Code Splitting with import() Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Demonstrates code splitting using the dynamic `import()` syntax. This loads a module on demand, returning a Promise that resolves to the module's namespace. ```js 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; ``` -------------------------------- ### WebSocket Proxy Configuration in package.json Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Configure a WebSocket proxy in package.json for real-time communication. Ensure the target is a compatible WebSocket server and set 'ws' to true. ```json { // ... "proxy": { "/socket": { // Your compatible WebSocket server "target": "ws://", // Tell http-proxy-middleware that this is a WebSocket proxy. // Also allows you to proxy WebSocket requests without an additional HTTP request // https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade "ws": true // ... } } // ... } ``` -------------------------------- ### Manually Format Project with Prettier Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Run this command to format your entire project using Prettier for the first time or to reformat all specified files. It applies Prettier's formatting rules to JavaScript and JSX files. ```sh ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}" ``` -------------------------------- ### Multiple Proxy Configurations in package.json Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Define multiple proxy configurations in package.json to handle different API endpoints and path patterns. Supports wildcards for path matching. ```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": "" // ... } } // ... } ``` -------------------------------- ### Configure package.json for parallel execution Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Update package.json scripts to use npm-run-all for parallel execution of watch-css and start-js. Also, ensure build-css runs 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": "npm run build-css && react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } ``` -------------------------------- ### Set Homepage for Specific Path in package.json Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Specify the `homepage` in your `package.json` to override the default build assumption that your app is hosted at the server root. Use a URL for a specific path. ```json "homepage": "http://mywebsite.com/relativepath", ``` -------------------------------- ### Configure package.json for Pre-commit Hooks Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Add the `precommit` script to your `package.json` to run `lint-staged` before each commit. This ensures staged files are formatted by Prettier. ```diff "scripts": { + "precommit": "lint-staged", "start": "react-scripts start", "build": "react-scripts build", ``` -------------------------------- ### Run Build with Linter Checks on Linux/macOS (Bash) Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Force the build process to perform linter warning checks and fail if any are found on Linux or macOS using Bash. This is useful for CI environments. ```bash CI=true npm run build ``` -------------------------------- ### Deploy to Surge Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Specify the build folder when deploying to Surge. Ensure index.html is renamed to 200.html for client-side routing support. ```sh project path: /path/to/project/build ``` -------------------------------- ### Display React Reel Component Source: https://github.com/eknowles/react-reel/blob/master/docz/index.mdx Demonstrates how to use the React Reel component with specific text, delay, duration, and theme props. Ensure the component and theme are imported. ```jsx import { Playground, PropsTable } from 'docz' import Component from '../src/index.js' import theme from './theme' # Component ## Props ## Basic usage ``` -------------------------------- ### Enable HTTPS in Development (Linux/macOS) Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Set the HTTPS environment variable to true to serve the development server over HTTPS on Linux or macOS using Bash. ```bash HTTPS=true npm start ``` -------------------------------- ### Manual Proxy Configuration in package.json Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Configure proxy rules manually in package.json for specific API paths. This allows for more flexibility than the basic proxy option. ```json { // ... "proxy": { "/api": { "target": "", "ws": true // ... } } // ... } ``` -------------------------------- ### Theming with CSS Modules Source: https://context7.com/eknowles/react-reel/llms.txt Apply custom styles using CSS Modules by passing a theme object with 'reel', 'group', and 'number' keys to the 'theme' prop. ```css /* reel.module.css */ .reel { height: 1em; display: flex; align-items: flex-end; overflow-y: hidden; font-size: 48px; font-weight: 700; color: #2ecc71; border-bottom: 2px solid #27ae60; line-height: 0.95em; } .group { transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transform: translate(0, 0); height: 1em; } .number { height: 1em; } ``` ```jsx import React from 'react'; import Reel from 'react-reel'; import styles from './reel.module.css'; const StyledReel = () => ( ); ``` -------------------------------- ### Live Currency Display with Intl.NumberFormat in React Source: https://context7.com/eknowles/react-reel/llms.txt Demonstrates how to use React Reel with the browser's Intl.NumberFormat API to display localized and formatted currency, decimal, and percentage values. The component updates on click. ```jsx import React, { Component } from 'react'; import Reel from 'react-reel'; const theme = { reel: { height: '1em', display: 'flex', alignItems: 'flex-end', overflowY: 'hidden', fontSize: '45px', fontWeight: '300', color: '#E2AB5B', borderBottom: '1px solid #0492BD', lineHeight: '0.95em', }, group: { transitionTimingFunction: 'ease-in-out', transform: 'translate(0, 0)', height: '1em', }, number: { height: '1em' }, }; class LiveDashboard extends Component { state = { amount: 1234, locale: 'en', currency: 'GBP' }; randomize = () => { this.setState({ amount: Math.floor(Math.random() * 9999) }); }; render() { const { amount, locale, currency } = this.state; const formatted = new Intl.NumberFormat(locale, { style: 'currency', currency, }).format(amount); // e.g. "£1,234.00" const decimal = new Intl.NumberFormat(locale, { style: 'decimal', }).format(amount); // e.g. "1,234" const percent = new Intl.NumberFormat(locale, { style: 'percent', minimumFractionDigits: 1, }).format(amount / 10000); // e.g. "12.3%" return (
); } } export default LiveDashboard; ``` -------------------------------- ### Deploy to Firebase Hosting Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Deploy your production build to Firebase Hosting after running `npm run build`. ```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 ``` -------------------------------- ### Run Tests Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Launches the test runner in interactive watch mode. Consult the documentation for more information on running tests. ```bash npm test ``` -------------------------------- ### CSS After Autoprefixer Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Illustrates the CSS output after Autoprefixer has added vendor prefixes for broader browser compatibility. ```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; } ``` -------------------------------- ### Import Bootstrap CSS in src/index.js Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Import Bootstrap CSS and optionally theme CSS at the beginning of your `src/index.js` file. Ensure component styles take precedence by placing other imports below. ```javascript import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap-theme.css'; // Put any other imports below so that CSS from your // components takes precedence over default styles. ``` -------------------------------- ### Configure API Proxy in package.json Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Add this field to your `package.json` to tell the development server to proxy unknown requests to your API server in development. This avoids CORS issues and allows you to use relative paths like `fetch('/api/todos')`. ```json "proxy": "http://localhost:4000", ``` -------------------------------- ### Configure GitHub Pages Homepage Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Set the `homepage` field in `package.json` to specify the root URL for your GitHub Pages deployment. ```json "homepage": "https://myusername.github.io/my-app", ``` -------------------------------- ### CSS Before Autoprefixer Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Shows a basic CSS structure for a component before it is processed by Autoprefixer. ```css .App { display: flex; flex-direction: row; align-items: center; } ``` -------------------------------- ### Update Watchman on macOS Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Commands to restart and reinstall Watchman using Homebrew to resolve `npm test` hanging issues on macOS Sierra. ```bash watchman shutdown-server brew update brew reinstall watchman ``` -------------------------------- ### Run Tests Once on Windows (cmd.exe) Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Force Jest to run tests once and exit on Windows using the command prompt. This is useful for CI environments. ```cmd set CI=true&&npm test ``` -------------------------------- ### Configure Express for Client-Side Routing Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Amend your Express server configuration to serve index.html for any unknown paths, enabling client-side routing. ```diff 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')); }); ``` -------------------------------- ### Importing CSS Module Theme Source: https://github.com/eknowles/react-reel/blob/master/README.md Import your custom CSS module file to apply styles to the Reel component. ```javascript import theme from 'theme.css'; ``` -------------------------------- ### Configure lint-staged in package.json Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Define the `lint-staged` configuration in your `package.json` to specify which file types should be formatted by Prettier and added back to the Git index. ```diff "dependencies": { // ... }, + "lint-staged": { + "src/**/*.{js,jsx,json,css}": [ + "prettier --single-quote --write", + "git add" + ] + }, "scripts": { ``` -------------------------------- ### Theming with Inline Styles Source: https://context7.com/eknowles/react-reel/llms.txt Apply custom styles using inline objects by passing a theme object with 'reel', 'group', and 'number' keys to the 'theme' prop. ```jsx import React, { useState } from 'react'; import Reel from 'react-reel'; const inlineTheme = { reel: { height: '1em', display: 'flex', alignItems: 'flex-end', overflowY: 'hidden', fontSize: '45px', fontWeight: '300', color: '#E2AB5B', borderBottom: '1px solid #0492BD', lineHeight: '0.95em', }, group: { transitionTimingFunction: 'ease-in-out', transform: 'translate(0, 0)', height: '1em', }, number: { height: '1em', }, }; const ThemedCounter = () => { const [amount, setAmount] = useState('0'); return ( <> ); }; ``` -------------------------------- ### Initialize Google Analytics Source: https://github.com/eknowles/react-reel/blob/master/example/public/index.html This snippet initializes the Google Analytics dataLayer and configures the tracking ID. Ensure this is included in your application's entry point. ```javascript window.dataLayer = window.dataLayer || []; function gtag(){ dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-103255008-1'); ``` -------------------------------- ### Configure package.json scripts for Sass Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Add scripts to package.json to build and watch Sass files. This enables automatic CSS generation from Sass. ```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", "test": "react-scripts test --env=jsdom", ``` -------------------------------- ### Referencing Assets in `index.html` using `PUBLIC_URL` Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Use the `%PUBLIC_URL%` variable in your `index.html` to reference assets located in the `public` folder. This variable is substituted with the correct absolute path during the build process. ```html ``` -------------------------------- ### Import React Bootstrap Components Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Import necessary React Bootstrap components in your `src/App.js` or custom component files to use them within your application. ```javascript import { Navbar, Jumbotron, Button } from 'react-bootstrap'; ``` -------------------------------- ### Import CSS Stylesheet Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Shows how to import a CSS file directly from a JavaScript file, which is handled by Webpack. This links the styles to the component. ```css .Button { padding: 20px; } ``` -------------------------------- ### Apache .htaccess for Client-Side Routing Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Use a .htaccess file in your public folder to configure Apache to serve index.html for non-existent files, supporting client-side routing. ```apache Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L] ``` -------------------------------- ### Add Analyze Script to package.json Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Configure the 'scripts' section in your package.json to include an 'analyze' command for source-map-explorer. This command targets the main JavaScript bundle in the build output. ```diff "scripts": { + "analyze": "source-map-explorer build/static/js/main.*", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", ``` -------------------------------- ### Bypass Host Check (Dangerous) Source: https://github.com/eknowles/react-reel/blob/master/example/README.md As a last resort, you can bypass the host check completely by adding `DANGEROUSLY_DISABLE_HOST_CHECK=true` to `.env.development.local`. This is not recommended as it exposes your machine to attacks. ```env # NOTE: THIS IS DANGEROUS! # It exposes your machine to attacks from the websites you visit. DANGEROUSLY_DISABLE_HOST_CHECK=true ``` -------------------------------- ### Enable Sass include paths Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Modify build scripts to include paths for Sass imports. This allows importing files from specified directories without relative paths. ```json "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/", "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive" ``` -------------------------------- ### Import Jest-Enzyme Matchers Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Imports `jest-enzyme` matchers into your test environment by adding the import statement to `src/setupTests.js`. This makes custom matchers available in all your tests. ```javascript import 'jest-enzyme'; ``` -------------------------------- ### Module for Code Splitting Source: https://github.com/eknowles/react-reel/blob/master/example/README.md A simple module intended to be dynamically imported for code splitting. It exports a constant value. ```js const moduleA = 'Hello'; export { moduleA }; ``` -------------------------------- ### Run Tests Once on Linux/macOS (Bash) Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Force Jest to run tests once and exit on Linux or macOS using Bash. This is useful for CI environments. ```bash CI=true npm test ``` -------------------------------- ### Configure ESLint for Editor Integration Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Add this .eslintrc file to your project root to enable ESLint integration within your editor. Note that these settings only affect editor integration and not terminal or browser output. ```json { "extends": "react-app" } ``` -------------------------------- ### Basic Reel Usage Source: https://context7.com/eknowles/react-reel/llms.txt Use the Reel component by passing a string to the 'text' prop. Non-numeric characters are static, while digits animate. ```jsx import React from 'react'; import Reel from 'react-reel'; const PriceDisplay = () => ( ); export default PriceDisplay; // Output: renders a slot-machine reel showing "$1,234.56" // Non-numeric characters ("$", ",", ".") are static; digits spin to their positions ``` -------------------------------- ### Basic React Reel Usage Source: https://github.com/eknowles/react-reel/blob/master/README.md Import and use the Reel component in your React application. The 'text' prop is required to display content. ```jsx import React, { Component } from 'react' import Reel from 'react-reel' const Example = () => ; ``` -------------------------------- ### Dynamic Meta Tag Placeholders in HTML Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Add placeholders in your HTML's head section to dynamically generate meta tags on the server. Ensure values are sanitized before embedding. ```html ``` -------------------------------- ### Configure BrowserRouter with basename Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Use the `basename` prop on the `` component to root ``s when using `react-router@^4`. ```javascript // renders ``` -------------------------------- ### Configure VS Code Debugger for Chrome Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Add this JSON configuration to your `.vscode/launch.json` file to enable debugging your React app in VS Code using the Chrome Debugger Extension. Ensure your app is running on `http://localhost:3000`. ```json { "version": "0.2.0", "configurations": [{ "name": "Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceRoot}/src", "userDataDir": "${workspaceRoot}/.vscode/chrome", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } }] } ``` -------------------------------- ### Referencing Assets in JavaScript using `process.env.PUBLIC_URL` Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Access assets from the `public` folder within your JavaScript code using `process.env.PUBLIC_URL`. This is an escape hatch and should be used sparingly, as these assets are not processed by Webpack. ```javascript render() { // Note: this is an escape hatch and should be used sparingly! // Normally we recommend using `import` for getting asset URLs // as described in “Adding Images and Fonts” above this section. return ; } ``` -------------------------------- ### Global CSS for Default React Reel Theme Source: https://context7.com/eknowles/react-reel/llms.txt Provides global CSS rules to style the default React Reel components using their BEM-class names. This allows for easy customization of the appearance. ```css /* Global CSS targeting default class names */ .react-reel__reel { height: 1em; display: flex; align-items: flex-end; overflow-y: hidden; font-size: 32px; color: #333; } .react-reel__group { transition-timing-function: ease-in-out; height: 1em; } .react-reel__number { height: 1em; } ``` -------------------------------- ### Importing CSS in React Component Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Demonstrates how to import CSS styles into a React component using Webpack. This approach is specific to Webpack and may reduce portability. ```javascript import React, { Component } from 'react'; import './Button.css'; // Tell Webpack that Button.js uses these styles class Button extends Component { render() { // You can use them as regular CSS styles return
; } } ``` -------------------------------- ### Switch Moment.js Locales Source: https://github.com/eknowles/react-reel/blob/master/example/README.md After explicitly importing multiple Moment.js locales, you can switch between them at runtime using `moment.locale()`. Ensure the desired locale has been imported previously. ```javascript import moment from 'moment'; import 'moment/locale/fr'; import 'moment/locale/es'; // ... moment.locale('fr'); ``` -------------------------------- ### Eject from Create React App Source: https://github.com/eknowles/react-reel/blob/master/example/README.md This is a one-way operation that removes the single build dependency from your project. It copies configuration files and dependencies (Webpack, Babel, ESLint) into your project for full control. Use this if you need to customize the build tool configuration. ```bash npm run eject ``` -------------------------------- ### Setting Temporary Environment Variable (Windows) Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Temporarily set the REACT_APP_SECRET_CODE environment variable for a single command execution on Windows using cmd.exe. ```cmd set REACT_APP_SECRET_CODE=abcdef&&npm start ``` -------------------------------- ### Define Development Environment Variables in .env Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Create a .env file in the project root to define permanent environment variables. This feature is available with react-scripts@0.5.0 and higher. Ensure .env*.local files are excluded from source control. ```env REACT_APP_SECRET_CODE=abcdef ``` -------------------------------- ### Basic Jest Test Source: https://github.com/eknowles/react-reel/blob/master/example/README.md A simple Jest test case using `it()` and `expect()` to assert the output of a function. Ensure the function being tested is imported. ```javascript import sum from './sum'; it('sums numbers', () => { expect(sum(1, 2)).toEqual(3); expect(sum(2, 2)).toEqual(4); }); ``` -------------------------------- ### Setting Temporary Environment Variable (Linux/macOS) Source: https://github.com/eknowles/react-reel/blob/master/example/README.md Temporarily set the REACT_APP_SECRET_CODE environment variable for a single command execution on Linux or macOS using Bash. ```bash REACT_APP_SECRET_CODE=abcdef npm start ```