Giters

barryblando / burger-builder

Thinking React. [bootstrapped w/ create-react-app]

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

reactcreate-react-appcomponentslayoutthinking-in-react

BurgerBuilder

Create React apps with no build configuration.

Create React App works on macOS, Windows, and Linux.
If something doesn’t work, please file an issue.

Quick Overview

npx create-react-app my-app
cd my-app
npm start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.

npm start

Get Started Immediately

You don’t need to install or configure tools like Webpack or Babel.
They are preconfigured and hidden so that you can focus on the code.

Just create a project, and you’re good to go.

Creating an App

You’ll need to have Node >= 6 on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to easily switch Node versions between different projects.

To create a new app, you may choose one of the following methods:

npx

npx create-react-app my-app

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

npm

npm init react-app my-app

npm init <initializer> is available in npm 6+

Yarn

yarn create react-app my-app

yarn create is available in Yarn 0.25+

It will create a directory called my-app inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

No configuration or complicated folder structures, just the files you need to build your app.
Once the installation is done, you can open your project folder:

cd my-app

Inside the newly created project, you can run some built-in commands:

npm start or yarn start

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console.

Build errors

npm test or yarn test

Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit.

Read more about testing.

npm run build or yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
By default, it also includes a service worker so that your app loads from local cache on future visits.

Your app is ready to be deployed.

React References

Building High Performance React Applications

- Render when really needed
- Measure performance e.g using ?react_perf (i.e development mode: localhost:3000/?react_perf)
- Use key correctly when displaying lists of data (Used to uniquely identify an element), Never use Math.random() or index as key
- Manage shouldComponentUpdate
- Extend PureComponent(Does a shallow comparison of all props/state) instead of Component
- Use stateless component
- Use Immutable Data (Fancy word for making new copy of an object), Makes tracking changes cheap
- Use Isomorphic React
- Build for Production
- Gzip all the plaintext (compress everything you possibly can)
- Use PNG & Lossless for Images
- Analyze Webpack Bundle
- Make App work first, then make it fast

Composition vs. Inheritance

- In React using Composition and Props gives you all the flexibility that you would need. React doesn't say Composition is better than Inheritance. Composition just fits better within the React's component structure.

- If you are new to React and are considering reusing code, always go for React Composition over Inheritance. With the addition of the latest Hooks in React, re-using code is only going to be much easier.

- React uses a variety of patterns for code reuse:
  - **Inheritance Pattern**: Used sparingly to share common code across React class components.
  - **Composition Pattern**: The core pattern for separating concerns while creating complex UIs with React.
  - **Decorator Pattern**: Used to provide a nice interface for separating out logic shared by multiple components and centralizing it.
  - **Mixin Pattern**: Hooks use a variation on the Mixin pattern to allow sharing related behavior and data between unrelated function components easily.

Redux References

Redux Rules

If you use Redux correctly, you’re going to get major benefits:

- Eliminate timing dependency bugs (No race of Async Request & Render sequence)
- Enable deterministic view renders (Isolated from network I/O and state updates)
- Enable deterministic state reproduction (Transactional)
- Enable easy undo/redo features
- Simplify debugging
- Become a time traveler

But for any of that to work, you have to remember some rules:

- Reducers must be pure functions
- Reducers must be the single source of truth for their state
- Reducer state should always be Serializable
- Reducer state should not contain functions

Also keep in mind:

- Some Apps don’t need Redux
- Use constants for action types
- Use action creators to decouple action logic from dispatch callers
- Use ES6 parameter defaults for self-describing signatures
- Use selectors for calculated state and decoupling
- Always use TDD / BDD!

Structuring Project

User Guide

The User Guide includes information on different topics, such as:

About

Thinking React. [bootstrapped w/ create-react-app]

reactcreate-react-appcomponentslayoutthinking-in-react

Languages

Language:JavaScript 86.8%Language:CSS 12.2%Language:HTML 1.1%