In the project directory, you can run:
This command install all packages, and any packages that it depends on. If the folder has a package-lock.json, the installation of dependencies will be driven by that.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
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.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
Avoid too much nesting
Rule: You should never nest components more than two levels.
Top-Level Component that wraps the entire application.
Components are react components that can be reused throughout the application.
Components which are used by more than one component.
Containers are also react components, but they only represent the layout.
Contain one or more components.
Usually these containers have no state, but they can have a local state if required, as long as the state does not depend on other processes. (Do not confuse with Container vs Presentational components)
These stateless components print out what is given to them via props.
You may create subdirectories inside if you want split up the container into subcomponents.
Important: From here on you need to be careful to not nest too deeply your components into each other.
Pages are also react components, but they represent a page or screen.
These map 1:1 with a route in the routes.js file.
A page component contains the code that connect with Redux.
Pages is used for dispatching actions to the store, also, pages receives the store state, and should return an object of data that the component needs.
There is a Page component at the top that passes down the data to its child (Container) as props.
It keep all of the context components in a separate folder, to not confuse them with plain react components.
Custom hooks is a basic way of extracting and sharing non-visual logic, hooks come with the advantage of being able to 'hook' into things like component lifecycle and state.
Custom hooks allow you to create functionality that can be reused across different components.
Higher Order Component is a function that accepts a component, and returns a component that renders the passed component with a few extra props or capabilities.
When using a 3rd party library, You can put all of the initialization in a folder called lib.
You'll then export the instance of that initialized library.
This is your typical index file, where you render your React app to the document.
This file contains all the routes of the application.
- Branch name for production releases: [master]
- Branch name for "next release" development: [develop]
- Feature branches: [feature/]
- Bugfix branches: [bugfix/]
- Release branches: [release/]
- Hotfix branches: [hotfix/]
- Support branches: [support/]
- Chore branches: [chore/]
- Experimental branches: [experimental/]
Version tag: vXX.XX.XX
This project was bootstrapped with Create React App.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify