022_wd_react_lp_000

Table of contents
Project Description
Technologies used
References
Steps
- List of Steps
  - Install and Setup Vite React and Bootstrap 5
  - Add Animation.css

Project Description

022_wd_react_lp_000 is a practice to build a Responsive Portfolio Website with Advanced Animations (2022) React, HTLM, CSS, bootstrap 5 following Youtube webdecoded's tutorial React Project Tutorial: Build a Responsive Portfolio Website w/ Advanced Animations (2022) and the other help that you can find into Reference section.

⏪(Back to top)

Technologies used

⏪(Back to top)

References

webdecoded tutorial and Github repositories
- React Project Tutorial: Build a Responsive Portfolio Website w/ Advanced Animations (2022)
- judygab_web-dev-projects_personal-portfolio
Bootstrap 5
- Install & Setup Vite + React + Typescript + Bootstrap 5
- React Bootstrap
Bootstrap Icons
- Bootstrap Icons
react-multi-carousel
- react-multi-carousel
MailChimp
- MailChimp
Animate.css
- Animate.css
Shields.io

⏪(Back to top)

Steps

Install and Setup Vite React Bootstrap 5 and Bootstrap Icons

Create Vite Project For React
```
  npm create vite@latest
```
Define a Project name
```
  ? Project name: » vite-project
```

Select react.

  ? Select a framework: » - Use arrow-keys. Return to submit.
      Vanilla
      Vue
  >   React
      Preact
      Lit
      Svelte
      Others

Select react js with typescript.

  ? Select a variant: » - Use arrow-keys. Return to submit.
  >   JavaScript
      TypeScript
      JavaScript + SWC
      TypeScript + SWC

Move to project directory and install dependencies.
```
  cd react-project
  npm install
  npm run dev
```
Install Bootstrap 5 in react
```
  npm install react-bootstrap bootstrap
```

After install add a bootstrap 5 element in app.jsx.

Add a new file components/NavBar.jsx
Copy NavBar example
Add NavBar component to app.jsx

import "bootstrap/dist/css/bootstrap.min.css";
import BasicExample from "./components/NavBar";

function App() {
  return (
    <div className="App">
      <BasicExample />
    </div>
  );
}

export default App;

Add a new file components/Pills.jsx
Copy Pills example
Add Pills component to app.jsx

import "bootstrap/dist/css/bootstrap.min.css";
import PillsExample from "./components/Pills";

function App() {
  return (
    <div className="App">
      <PillsExample />
    </div>
  );
}

export default App;

Install React Bootstrap Icons
```
  npm i react-bootstrap-icons
```
Install react-multi-carousel
```
  npm i react-multi-carousel
```

⏪(Back to top)

Adding Custom Environment Variables

Create React App
- Available with [email protected] and higher.
- By default you will have NODEENV defined for you, and any other environment variables starting with REACT_APP.
- Do not store any secrets (such as private API keys) in your React app!. Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

Vite

Note that Vite doesn't load .env files by default as the files to load can only be determined after evaluating the Vite config Using Environment Variables in Config

Using Environment Variables in Config

Modify file vite.config.js

import "bootstrap/dist/css/bootstrap.min.css";
import BasicExample from "./components/NavBar";

function App() {
  return (
    <div className="App">
      <BasicExample />
    </div>
  );
}

export default App;

Add these variables to a new .env or .env.local file

REACT_APP_MAILCHIMP_URL = "https://gmail.xxxx.com/subscribe/post";
REACT_APP_MAILCHIMP_U = "xxxxxxxxxxxxxxxxx";
REACT_APP_MAILCHIMP_ID = "YYYYYYYYYYYY";

Add a new component component/Test.js file

export const Test = () => {
  console.log(import.meta.env.VITE_SOME_KEY); // 123
  console.log(process.env.REACT_APP_MAILCHIMP_URL);

  const a_var = `${process.env.REACT_APP_MAILCHIMP_URL}`;
  console.log(a_var);

  return (
    <div>
      <small><b>{process.env.NODE_ENV}</b></small>
      <br>
      <small><b>{process.env.REACT_APP_MAILCHIMP_URL}</b></small>
    </div>
  );
};

Add Test component to App.jsx

⏪(Back to top)

For contact form.
- Create a Contact.jsx file component
  - Add a new file components/Contact.jsx
- Install npm dependecies
```
  npm i express cors nodemailer
```
- Create a Server.js file to send servers
  - Add a new file /server.js
  - Configure gmail user and password
    - In google apps' icon select acconts
    - Select security
    - Less secure app access
    - d
- Install npm react-mailchimp-subscribe
```
  npm i react-mailchimp-subscribe
```
- MailChimp
  - Create a new account
  - Copy Signup form URL Audience/Signup forms/Form builder/Signup form URL
⏪(Back to top)
Add Animation.css
- Install npm dependecies
```
  npm install animate.css --save
```
- React on Screen
```
  npm install react-on-screen
```
⏪(Back to top)

byron2016 / 022_wd_react_lp_000 Goto Github PK