A helloworld
npm create vite
npm create is a shorter way to use a tool (vite or cra or else) that sets up a new project's quickly. e.g: npm create vite creates a new project using the vite framework for building web applications. It saves time by generating a basic project structure and installing any necessary dependencies.
D:\folder>npm create vite
Need to install the following packages:
create-vite@4.4.1
Ok to proceed? (y) y
√ Project name: ... react-app
√ Select a framework: » React50
√ Select a variant: » TypeScript
Scaffolding project in D:\folder\react-app...
Done. Now run:
cd react-app
npm install
npm run dev
After the create, a web app skeleton is created as in below. Mainly some config fie, package dependencies, the src has an example web.
public #static image or media files
src #the source codes. there is an example code here, but will be rewritten later
.eslintrc.cjs
.gitignore
index.html #the home page entry point. it defines the root div object and references to the main.tsx typescript
package.json #this dependencies for Prod and Dev separately
README.md
tsconfig.json #the typescript configure file
tsconfig.node.json
vite.config.ts
npm install
Now change directory to 'react-app' and run "npm install" to install all the third party libraries. When this is done, a massive modules folder is populated.
node_modules #the libraries, no need to tough it
npm run dev
Run the web server . Can visit the web app from the localhost:5173
> react-app@0.0.0 dev
> vite
VITE v4.4.11 ready in 695 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
Can run the web server in dev / prod mode
dev: Used for running the specific commands for serving the project, to any server, to live development. In the case of a web page, you'll see your web page in the browser, and any change you make to the HTML code, for example, will be reflected immediately in the page you see in your browser.
prod: Compiles all the necessary files for production. Final product. In the case of a web page, for example, the HTML, CSS, and JS files you'll handle to the client. The result of running this command, it is expected to be one single folder with all the afore mentioned content.
Create Helloworld
Now lets update the web site to display helloworld.
Firstly create a React component for the helloworld message. Just create a Message.tsx file under the src folder. Note .ts is for plain typescript, .tsx is for typescript with react.
//PascalCasing
function Message() {
return <h1>hello world</h1>; //JSX: javascript XML
}
export default Message;
Note the function here uses PascalCasing (upper case for 1st letter of each word). The function returns the HTML element, but in fact it will be compiled into react code, which is about "react.CreateElement(h1, ....)". So the function defines the HTML, which is compile into react script to create the HTML ...
ALso need to export the function as the default component. I guess the tsx file can specify multiple functions, which may call others, but only one can be export as the default.
update the App.tsx file in the src folder.
Remove all the existing generated code, and write a brand new App function.
import Message from './Message'; //import the Message component
function App() {
return <div><Message/></div>; //use the Message component like a html element
}
export default App;
ALl done, refreshing the page and it will show 'helloworld'.
How the react compoents are used in the web app?
as mentioned, the entry point of the app is index.html, which references to the main.tsx and defines the ROOT div element.
<html lang="en">
<head>
...
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
The main.tsx references to the App.tsx component, and alters the ROOT element by rendering the App component (using ReactDom). So the main tsx replace the ROOT in the index.html with the App component. In the mean time, it imports the css file and the react modules.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
A little more complex helloworld. To pass variable into the html elements, simply use the braces {} to inject any typescript code.
function Message() {
let msg = 'good day';
return <h1>hello world {msg}</h1>;
}
export default Message;
A bit more explaination.
The react components Message and App are built into an in-memory virtual DOM tree structure, so this can be rendered later in the browser.
App --- Message ===> div --- h1
This is done by the react-dom library not the native react.
ReactDOM.createRoot(document.getElementById('root')!).render( ...
There are different react renders for pc / mobile.