Create React apps with no build configuration.
- Creating an App – How to create a new app.
- User Guide – How to develop apps bootstrapped with Create React App.
Create React App works on macOS, Windows, and Linux.
If something doesn’t work, please file an issue.
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
.
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.
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 create-react-app my-app
(npx comes with npm 5.2+ and higher, see instructions for older npm versions)
npm init react-app my-app
npm init <initializer>
is available in npm 6+
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:
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.
Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit.
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.
- Full-Stack React Articles
- Pure React
- Full-Stack React - The Complete Guide to ReactJS and Friends
- Alligator.io - React
- Testing React-Redux App using Jest and Enzyme
- React Composition Patterns
- React, Inline Functions, and Performance
- React Router DOM v4 Tutorial
- Stateful vs Stateless Functional Components in React
- When to use Component or PureComponent
- React — Composing Higher-Order Components (HOC)
- React Internals - How React Works (Used React 15, a bit outdated but good grasp is what you need)
- Using Destructure and Spread in React Components
- Our Best Practices for Writing React Components
- React Components – Props and States in ReactJS with Examples
- React Lifecycle Methods- how and when to use them
- ReactJs component lifecycle methods - A deep dive
- How to Benchmark React Components: The Quick and Dirty Guide
- Build a NavBar & Side Drawer
- React.js Forms: Controlled Components
- Building forms using React — everything you need to know
- Extracting Logic from React Components
- 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
- 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.
- Idiomatic Redux: The History and Implementation of React-Redux
- What Does Redux Do? (and when should you use it?)
- How Redux Works: A Counter-Example
- What is Redux: A Designer's Guide
- My take on Redux Architecture
- Async Operations in React Redux Applications
- Understanding compose functions in redux
- Understanding how redux-thunk works
- Building CRUD App with React + Redux
- React + Redux Architecture : Separation of Concerns
- 10 Tips for Better Redux Architecture
- Using Redux DevTools in Production
- React + Redux Architecture
- React + Redux : Architecture Overview
- Getting Started with React, Redux and Immutable: a Test-Driven Tutorial (Part 1)
- Redux Step by Step: A Simple and Robust Workflow for Real Life Apps
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!
- How to Structure Your React Project
- Presentational and Container Components
- Structuring projects and naming components in React
- Tips on Creating Reusable Components
- Atomic Design With React and Bit: Simplify a Complex UI
The User Guide includes information on different topics, such as:
- Updating to New Releases
- Folder Structure
- Available Scripts
- Supported Browsers
- Supported Language Features and Polyfills
- Syntax Highlighting in the Editor
- Displaying Lint Output in the Editor
- Formatting Code Automatically
- Debugging in the Editor
- Changing the Page
<title>
- Installing a Dependency
- Importing a Component
- Code Splitting
- Adding a Stylesheet
- Post-Processing CSS
- Adding a CSS Preprocessor (Sass, Less etc.)
- Adding Images, Fonts, and Files
- Using the
public
Folder - Using Global Variables
- Adding Bootstrap
- Adding Flow
- Adding a Router
- Adding Custom Environment Variables
- Can I Use Decorators?
- Fetching Data with AJAX Requests
- Integrating with an API Backend
- Proxying API Requests in Development
- Using HTTPS in Development
- Generating Dynamic
<meta>
Tags on the Server - Pre-Rendering into Static HTML Files
- Running Tests
- Debugging Tests
- Developing Components in Isolation
- Publishing Components to npm
- Making a Progressive Web App
- Analyzing the Bundle Size
- Deployment
- Advanced Configuration
- Troubleshooting