[Solo Project] React
In this project you will learn how to build a very simple React application. You will work in a real-world project for a fictional company that requires your help. The project has been split into multiple milestones, and each milestone has functional and technical requirements that you will need to implement.
The original version of this content can be found and edited here.
- Node.js
- React
- React-DOM
- React-Create-App
- npm
- CSS
- ES6
- Webpack
Math-magicians is a fictional company based in France. They have requested your help to build a simple product that would assist them with their calculations. An important thing to notice is that they have asked for a product that is not just fully-functional, but also beautiful and user-friendly.
Remember about descriptive README file. Inline comments: It’s better to delete commented code. If you need to review a previous version of your code, use git history. We identified 5 milestones for this project. Remember to create a separate feature branch for each milestone (see more in Code review >> Between milestones section below)
Milestone 1: Basic project structure Milestone 2: Components Milestone 3: Styling Milestone 4: Calculations Milestone 5: Event handlers
Clone file content into root directory (except for readme.md)
Install ESLint on Linux environment using the following commands
Install Node Version Manager to update NodeJS + NPM.
$curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
$export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
$[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
Run the following command to verify installation;
$ command -v
nvm
To download, compile, and install the latest release of node, do this.
nvm install node
Source here
Please do the following steps in this order:
- Install stickler-ci https://github.com/apps/stickler-ci
- Enable stickler in your repo. You can do it here.
- In first commit of your feature branch add a copy of .stickler.yml and .eslintrc.json to the root directory.
- Remember to use both files linked above
- Remember that
.stickler.yml
file name starts with a dot.
- Do not make any changes in config files - they represent style guidelines that you share with your tem - which is a group of all Microverse students.
- If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.
- When you open your first pull request you should see Stickler's report at
Checks
tab.
Go project folder using WSL environment and initiate NPM with following command
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (weather-app)
version: (1.0.0)
description: Weather Application
entry point: (webpack.config.js) src/index.js
test command:
git repository: (https://github.com/geraldgsh/weather-app.git)
keywords:
author: Gerald Goh
license: (ISC)
About to write to /mnt/d/Google_Drive/Microverse/5.Javascript/5.API/weather-app/package.json:
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/geraldgsh/react-calculator.git"
},
"author": "Gerald Goh",
"license": "ISC",
"bugs": {
"url": "https://github.com/geraldgsh/react-calculator/issues"
},
"homepage": "https://github.com/geraldgsh/react-calculator#readme"
}
Command above will generate a "package.json" file for ESlint work off from.
Install ESlint with following command
-
Run
npm install eslint eslint-config-airbnb --save-dev
(not sure how to use npm? Read this). -
Run
npx eslint --init
. -
Make sure you select the following options when prompted.
? How would you like to use ESLint?
To check syntax, find problems, and enforce code style? What type of modules does your project use?
JavaScript modules (import/export)? Which framework does your project use?
React? Does your project use Typescript
No? Where does your code run?
Browser? How would you like to define a style for your project?
Use a popular style guide? Which style guide do you want to follow?
Airbnb? What format do you want your config file to be in?
JSONThe config that you've selected requires the following dependencies: ? Would you like to install them now with npm?
Yes -
Copy the contents of .eslintrc.json to the newly generated
.eslintrc.json
overwritting the previous content. -
Do not make any changes in config files - they represent style guidelines that you share with your tem - which is a group of all Microverse students.
- If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.
-
Double check your
./src
folder for any extra unnecesary.eslint
config files that might have been generated as this might cause an issue with stickler when you create your Pull Request later on. -
Run
npx eslint .
. -
Fix linter errors.
-
IMPORTANT NOTE: feel free to research auto-correct options for ESlint if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!
-
All config files are in my repo but Stickler does not work.
- Make sure that Stickler app has permission to access your repository. Find Stickler here https://github.com/settings/installations and check its configuration.
- Try to add a new commit to your Pull Request. Stickler should detect changes in your repo and start checking your code.
-
while scanning for the next token found character '\t' that cannot start any token
error.- Please make sure that you used spaces not tabs for indentation.
-
Check if someone else has had similar problem before here. Please make sure that you used spaces not tabs for indentation.
-
Stickler does not work and nothing helps 💥 - run eslint in your local env and correct all errors. Remember to let your Code Reviewer know that you had problems with Stickler and you used linter in local env.
- Add scientific calculation feature
- Add "backspace" button feature
- Clone Repo
- 'npm install' to install dependencies
yarn start
or 'npm start' on terminal- Open http://localhost:3000 to view it in the browser.
Checkout our wikipage for more details.
Clone repo and open index.html with your favorite browser.
Web browser like Chrome, Mozilla or similar.
https://github.com/microverseinc/project-react-calculator/blob/master/README.md
https://github.com/geraldgsh/react-calculator
- Add delete button for individual weather card
- Get a google place local image on page background using API for local weather
👤 Author
Github: geraldgsh
Twitter: geraldgsh
Linkedin: Gerald Goh
Contributions, issues and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
- Hat tip to anyone whose code was used
- Inspiration
- etc
This project is MIT licensed.