Create new react project
Use the create react app:
| Code Block |
|---|
|
npx create-react-app my-app
cd my-app
npm start |
Set up environment
Create a .env file. Suggested entries:
| Code Block |
|---|
|
# Allow relative imports
NODE_PATH=src/
# Override default port
PORT=5000
# Connect to API
REACT_APP_API_ROOT=http://localhost:3000 |
Note that the REACT_APP_* syntax is required for any custom environment values. From within the application, you can read them from process.env, p.e. process.env.REACT_APP_API_ROOT. For more information, see here.
Set up page title
- Change the HTML <title> in /public/index.html
- Change title and abbreviation in /public/manifest.json
Install Dependencies
Install from command line with npm install package-name
Suggestions:
Install Linter
| Code Block |
|---|
|
npm install eslint |
To use the default linting rules from create-react-app, add the following to your package.json:
| Code Block |
|---|
|
"eslintConfig": {
"extends":"react-app"
} |
Organizing your Components
This is the recommended organization of your /src folder:
- /actions: Sync and async actions for your components
- /assets: Styles and images you need to package
- /components: All components
- /reducers: All reducers, reacting to sync actions to update the store
- /selectors: Store filters
- /store: Main store file
- /util: API utilities for AJAX access, service workers, and other utilities
- /index.js: Main entry point for the file
Related articles
| Filter by label (Content by label) |
|---|
| showLabels | false |
|---|
| max | 5 |
|---|
| spaces | com.atlassian.confluence.content.render.xhtml.model.resource.identifiers.SpaceResourceIdentifier@28a7b0 |
|---|
| showSpace | false |
|---|
| sort | modified |
|---|
| reverse | true |
|---|
| type | page |
|---|
| cql | label in ( "kb-how-to-article" , "development" , "javascript" , "react" ) and type = "page" and space = "WIKI" |
|---|
| labels | kb-how-to-article |
|---|
|
...