This is an easy, basic and raw (no styles attached) example of HOW to fetch
data from x-endpoint and set it as local state
.
Feel free to replace the API
with yours or an external one. In any case (also for localhost
with other port
) remember to enable CORS
yarn install
yarn start
<RegularWay />
<HooksWay />
<CustomHookWay />
Alternatively, you can use Async/Await
Snippet for react-state-fetch/src/containers/RegularWay.js
componentDidMount() {
this.fetchUsers()
}
/* Or
async fetchUsers() {}
*/
fetchUsers = async () => {
try {
const response = await fetch(API + limitQuery + limitUserResults)
const parsedResponse = await response.json()
this.setState({ users: parsedResponse })
}
catch (error) {
console.log('RegularWay', error)
}
}
Even when this is outside the scope of the project's documentation, remember that you should be particularly careful at the time of using hooks
like useEffect()
.
The difference between this...
// Runs with every render
useEffect(() => {
})
... and this ...
// Runs once
useEffect(() => {
}, [])
... is an infinite loop.
This is unrelated to the project; however, if you want to utilize a similar CI/CD pipeline, you can follow the instructions beneath
First, be sure that you connect circleci with your GitHub
account setting the proper permissions. Once this is done, go to Add Projects
and click on Set Up Project
next to your repository. Then, follow the instructions.
What are orbs? Orbs are packages of CircleCI configuration that can be shared across projects. Orbs allow you to make a single bundle of jobs, commands, and executors that can reference each other and can be imported into a CircleCI build configuration and invoked in their own namespace. Orbs are registered with CircleCI, with revisions expressed using the semver pattern. circleci.com
What is a workflow? A workflow is a set of rules for defining a collection of jobs and their run order. circleci.com
Create the file .circleci/config.yml
.
Example:
version: 2
jobs:
build:
docker:
- image: node:11.10.1
environment:
CI: false
steps:
- checkout
- run: yarn install
# run: yarn run test
- run: yarn run build
deploy:
docker:
- image: buildpack-deps:trusty
steps:
- checkout
- run:
name: Deploy to Heroku
command: |
git push https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME.git master
workflows:
version: 2
build-and-deploy:
jobs:
- build
- deploy:
requires:
- build
filters:
branches:
only: master
Go to travisci
, select your project, click on the wheel icon
and, under Build Settings
click on Environment Variables
and add...
reveal API key
.heroku
, in my case react-state-fetch
(App: https://dashboard.heroku.com/apps/react-state-fetch)Then, commit and push your local changes to your "external repo" and click on Start Building
.
Now go to heroku
, select your app (in this case react-state-fetch
), click on Settings
. Under Buildpacks
...
heroku/nodejs
https://github.com/mars/create-react-app-buildpack
Make a change in one of your files and start the CI/CD
process.