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.
-
webdecoded tutorial and Github repositories
-
Bootstrap 5
-
Bootstrap Icons
-
react-multi-carousel
-
MailChimp
-
Animate.css
-
Shields.io
-
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
-
-
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
-
-
-
-
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
-
- Create a new account
- Copy Signup form URL Audience/Signup forms/Form builder/Signup form URL
-
-
Add Animation.css
-
Install npm dependecies
npm install animate.css --save
-
React on Screen
npm install react-on-screen
-