React portfolio
Back to clean Web version, click here
Technical requirements
- Personal GitHub account
- Responsive React web frontend
- Typescript template
- Functional React components
- SASS (syntactically awesome style sheets)
- CI/CD pipeline for GitHub pages
Workflow :
Initialize project
- Create new GitHub Repository. Click to create new repository
- Name the repo to e.g. portfolio.
- Set repo to Public.
- Do not use a hyphen (-) in the repository name. (hyphen in the url breaks the gh-pages)
- Use only lowercase letters in the repository name.
- Clone your new repository to local
- Open cmd or terminal in the file path of your choice
- Run command
git clone [link to your git-repo]
- Open the project folder in terminal
- Create a new React project with
npx
command.npx create-react-app@latest . --template typescript
- Warning! If there comes a warning about vulnerabilities, DON’T try to fix them using any - Audit fix - commands, since those errors will not affect to your final React app, but fixing breaks the current React version.
- Once the React is initialized, test it by running command
npm run start
- If everything works as expected, the browser will open and you will see the react logo in it.
- Initialize the CI/CD pipeline
- See docs/cicd
- Commit your filechanges, then push.
git status
show list of your project statusgit add .
add any new or modified files to the index.git commit -m "commit message"
make changes locally. Add a comment describing the changesgit push
push your saved changes to the server
Start creation with TypeScript
- The first step is to open the project in Visual Studio Code and delete unnecessary files from the project. Delete the following files
- src/App.css
- src/index.css
- src/logo.svg
- Open index.tsx file and remove imports from deleted files.
- Open App.tsx file
- Replace all contents in App.tsx with
// App.tsx
import React from 'react'
import MyFirstComponent from './components/myFirstComponent';
const App: React.FC = () => {
return (
<div>
<MyFirstComponent />
</div>
)
}
export default App
- Now the error
Cannot find module './components/myFirstComponent' or its corresponding type declarations.
appear- To fix it, create a folder at the
./src
and name it tocomponents
- Create new file
myFirstComponent.tsx
in./src/components
- To fix it, create a folder at the
- In the
./src/components/myFirstComponent.tsx
paste next code in it and save.
import React from 'react'
type MyFirstComponentProps = {
}
const MyFirstComponent: React.FC<MyFirstComponentProps> = () => {
return (
<div>
<h1>Hello, React!</h1>
<p>This is my first component 😎</p>
</div>
)
}
export default MyFirstComponent
-
Run command
npm run start
again to see the changes. - Visual Studio Code Snippets
- Snippets help you write code faster.
- See docs/snippets
- Remember to commit & push your code changes to github!
git status
show list of your project statusgit add .
add any new or modified files to the index.git commit -a -m "commit message"
make changes locally. Add a comment describing the changesgit push
push your saved changes to the server