This is the starting template for a Corndel training project to create a React Web Application which will display recent data from Mars obtained by NASA using NASA's Open APIs.
- Visual Studio Code
- Node.js - latest stable version
- NPM should be bundled with this
- React Developer Tools
cdto the root directory of this repository.- Run
npm install. - Open the project in VSCode.
- Install the recommended extensions.
- You can see these by running "F1 -> Show Recommended Extensions" in VSCode.
We'll be keeping track of the project tasks using Trello.
- Sign up for a Trello account.
- Ask your trainer to add you to the Mars App Board.
The workflow should be as follows:
- Assign yourself to a ticket from the "To Do" column in discussion with your trainer and move it to "In Progress".
- Pull the latest version of
master. - Create a new branch with name of the form
${ticketNumber}_ShortDescription- e.g.
MARS-2_CreateRoverComponent
- e.g.
- Write some code!
- Push to a remote branch on GitHub.
- Create a GitHub pull request for your ticket and request a pull request review from your trainer.
- Move the ticket to "In Review" in Trello.
- Once your trainer has reviewed your code:
- If there any changes needed, carry them out and push to GitHub again.
- Repeat until both you and the reviewer are satisfied with the code.
- Once your branch has been completely signed off, merge it into
masterand push. - Move the ticket to "Completed" and repeat!
To debug our React App in VS Code we need to run a Chrome debugging configuration.
- Make sure you have the Debugger For Chrome extension installed in VS Code.
- Ensure the Mars App is running on localhost:3000 by executing the
npm startscript in your console. - You can now set breakpoints in your code and start a debugging session in VS Code as normal.
To execute code again simply refresh the browser window!
In the project directory, you can run:
Runs the Mars 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.
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.