React-course notes
I) installation:
https://www.freecodecamp.org/news/react-for-beginners-handbook/
run msdos
in C;//
run the command: - This creates the working folder
npm create vite@5.1.0 my-alorya-app -- --template react
II) to start vite.js
run in msdos:
- cd my-alorya-app
- change folder with cd my-app - in msdos
This installs the app in the folder:
- npm install
Run Vite.js:
- npm run dev
With vite all is ready! -
Watch out :
- There should be no errors in the installation (red text).
- If there are any, you should correct them.
creating project (without vite.js)
I recommend you just use vite.js and not the following, I found them too comples, and I had many errors to correct.
Run the code -
Run them if you do not use vite.js - if you use vite.js you don`t need them
- npm init -y
install react librariesnpm install react@^17.0.0 react-dom@^17.0.0 --saveinstall babelnpm install @babel/preset-env @babel/preset-react @babel/core @babel/plugin-proposal-class-properties -D
resolving many things:
forum answerIII) deploying to website
- edit package.json
- insert :
- "homepage": "http://art.alorya.com/",
- close
- npm run build
- Open your file explorer
- click the `dist` folder to open it
- copy what is inside
- paste to your website
- Done!!!
source: https://www.youtube.com/watch?v=10DjQrT-QyUIV)Practice notes:
1) Import Export more than two entities:
11) in CarNs.jsx
export function Garage....export class CarN
12) in App.jsx
import { CarNs, Garage } from './components/CarNs.jsx';2) Render multiple entities : class and function together
in App.jsx :
root.render(
<>
<CarNs color="red"/>
<Garage />
</>
);
tutorial- keep it for: in case of
https://scrimba.com/learn/learnreact/introduction-to-react-coa99496098ff5fb511f5235fhttps://www.theodinproject.combest maybe?:
mozilla react tutorial -- seems to be really working!
dont know?
https://learn.codevolution.dev/
does vite have any useful thing-> no!
https://vitejs.dev/guide/#trying-vite-online
tester thing- not too bad but it is paid -
https://stackblitz.com/edit/vitejs-vite-9ievt2?file=index.html&terminal=dev
applications to test:
from freecodecamp - youtube
https://www.youtube.com/watch?v=5ZdHfJVAY-s&t=19s
the source: https://www.freecodecamp.org/news/master-react-by-building-25-projects
Accordion -
https://www.tutorialspoint.com/how-to-create-accordion-in-reactjs
maybe read after the app works you do:
javascript and algorithm
c sharp
out of subject
my datalink profile
learn pytorch
vikas kumar with good tutorials
Lexiq
<> or <Fragment> The empty tag is a React feature called a Fragment. By using a Fragment, your component won't render an extra element to the screen.
1/embed JavaScript expressions
Because of JSX, you can also embed JavaScript expressions inside an element by using curly brackets {}:
const lowercaseClass = 'text-lowercase';
const text = 'Hello World!';
const App = <h1 className={lowercaseClass}>{text}</h1>;
This is what makes React elements different from HTML elements. You can't embed JavaScript directly by using curly braces in HTML.
2/
Comments
Post a Comment