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 libraries
    • npm install react@^17.0.0 react-dom@^17.0.0 --save
  • install babel
    • npm install @babel/preset-env @babel/preset-react @babel/core @babel/plugin-proposal-class-properties -D

resolving many things:

forum answer

III) 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-QyU

IV)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-coa99496098ff5fb511f5235f
https://www.theodinproject.com

best 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/

Free/paid React project publisher


https://web.dev/explore/react -subscribed with google
https://codefinity.com - -subscribed with email  // yahoo.com
https://stackblitz.com - subscribe with github
https://codesandbox.io/-subscribed with google
Location: Ankara, Türkiye

Comments

Post a Comment

Popular posts from this blog

PHP MYSQL notes

PHP Beginner PHP Array Loop Function Pre-Def variable Session Read Write File CRUD Advanced PHP PHP MySQL PHP MyAdmin PHP MySQL Notes Other course Python Beginner Intermediate Advanced Pro python-hosting React Links General JS PHP Programming Python C++ Stuff TR: Create DB Collation Supported language: gözönünde bulundur Most common: UTF-general-cı Türkçe: ISO 8859-9 (latin5) windows 1254 utf-8 çok daha iyi ama dezavantaj daha çok byte Data Type Int - collation boş - size boş String - bu field her zaman  Char olmalı-çünkü =255...
Read more

Programming- AI, machine learning

< JS C C++ Python >< coding Robotics CNC > < Robotics CNC Links > < CNC >< CNC tutorial > < 3d printing >< Azure MongoDB Spark > < AI Pytorch > < Ship building > < GIT >      Data science R For statistical computing Stat modeling data analysis clustering time series forecasting OOP Python, it has a graph and stat packagees Matpotlib Numpy ScipPy Deep Learning packages TensorFlow PyTorch Keras SQL relational db NoSQL; non relational, distributed db MongoDB, Radis, Cassandra Hadoop: Big data; management and storage of huge data It is a storage of Big Data Open source software It uses distributed storage system called Map Reduce PAckages in Hadoop: Pig, Hive, HBase Tableau Data visualization software Specialized in graphical analysis if data Interactive visualisation and dashboards: treemaps, histograms, Box Plots It connects with spreadsheets, DB and cloud Weko For getting familiar with ML in action Open source it ...
Read more

Programming -- JS, C, C++, Python

Image
 < JS C C++ Python >< coding Robotics CNC > < Robotics CNC Links > < CNC >< CNC tutorial > < 3d printing >< Azure MongoDB Spark > < AI Pytorch > < Ship building > < GIT >   programming language history  This is taken from somewhere that I have not taken a note. It is a real good work. It describes the root for the languages. I have found this schema on the internet around 2000. And at this time visual basic did not evolved to something new. but got mixed with C# and all other possible language forming .NET which was really good (under c# this is written).  Second note for this schema, although internet was there (since 70`s?) the sofware related to internet did not really show up, and were not really strong enough in the market. The revolutionising of the internet ability changed this schema radically. While there was few programming language at the 90`s, on 2010 there were I guess more than 100 in the marke...
Read more