cra-template-spacedev

The official template used by SpaceDev for Create React App

Usage

npx create-react-app my-app --template @space-uy/cra-template-spacedev

What this includes

We tried to include all the libraries we use in all our projects and some more to improve performance, developer experience and user experience.

Here are the libraries and extras we included:

• redux + @reduxjs/toolkit + redux-persist
• apisauce + axios-cache-adapter so you can query your api with a slightly improved axios and configurable caching
• react-router and react-router-dom
• status and error slices for global error handling
• useImageUpload so you can upload your images without even thinking
• Styling and theming 💅 with @material-ui/core
• useMountEffect because useEffect without dependencies is not descriptive enough.
• i18n with react-i18next
• commitlint and eslint run automatically before each commit through husky
• bitbucket-pipelines to run linting and deploy the app

How do I structure my project?

Just follow the examples in all the features. CONTRIBUTING.md has a more detailed explanation.

If you have reusable components you need put them in the components folder.

If you have a new feature, be it a redux slice for something alone or maybe it has a screen that you'll later navigate to, put it in the features folder. See how the counter feature is mapped to a folder called the same way with the component inside it and its redux slice and api helpers?

When you have strings you need to show in your UI they go in localization/en.json because if you later want to translate the app you'll be ready to do that without any major hassle. An example of how to access those strings can be found in the counter/Counter.js component.

When you begin, update your theme to match your app. Read this to know how.

In the app folder there are shared files only, there is the redux store configuration, the apisauce client configuration and global services like the fileUpload function.

How do I style my components?

const MyComponent = () => {
  const classes = useStyles();
};

const useStyles = makeStyles((theme) => ({
  self: {
    width: '90%',
    marginLeft: 'auto',
    marginRight: 'auto',
  },
  // ...more styles...
}));

Read this link for details.

Making API requests

Follow these steps:

1. Update the REACT_APP_API_URL variable in the .env file
2. Use the makeApiCall higher order function in your api files like the following snippet

import makeApiCall from 'app/makeApiCall';

// the following does a post request to your server to the
// baseUrl + 'something' with the data variable as its body
const fetchSomethingFromTheApi = makeApiCall((client, data) => client.post('something', data));

How do I upload files?

The useImageUpload hook or the others you can find to upload other types of files in our knowledge base work like so:

const [progress, handleUpload] = useImageUpload(onValueChange);

Think of that onValueChange function it receives as what would be (value) => setFieldValue('coverUrl', value) in formik.

Since we recommend you use formik but we can't use hooks inside the formik context we recommend you make a separate component to call this hook and get that function as a prop.

Other than that, all you need to do is to have you api client properly setup and the POST /storage endpoint configured like it is in our other knowledge base article.

:computer: Contributing

Contributions are very welcome. Please check out the contributing document.

:bookmark: License

This project is MIT licensed.