(Creating is not easy. Thank you for your support. Your support is my biggest motivation to move forward. If reading this is helpful to you, please leave your footprints)
Table of contents
Use create-react-app to quickly build a development environment
JSX Basics - Concepts and Essence
JSX basics-high-frequency scenarios
Implementing list rendering in JSX
Implement conditional rendering in JSX
Introduction to React
What is React
React, developed by Meta Company, is a library for building web and native interactive interfaces
Advantages of React
Advantages compared to traditional DOM-based development
Advantages compared to other front-end frameworks
Market situation of React
The most popular in the world, a must-have for big manufacturers
Development environment setup
Use create-react-app to quickly build a development environment
create-react-app is a tool for quickly creating a React development environment. The bottom layer is built by Webpack, which encapsulates the configuration details and can be used out of the box.
Excuting an order:
npx create-react-app react-basic
1. npx Node.js tool command, find and execute subsequent package commands
2. create-react-app core package (fixed writing method), used to create React projects
3. react-basic React project name (can be customized)
Try running the program
The running interface is as follows:
react basic framework
index.js
//项目的入口 从这里开始运行
//react必要的两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
//导入项目的根组件
import App from './App';
import reportWebVitals from './reportWebVitals';
//将App根组件渲染到id为root的dom节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);App.js
//项目根组件
function App() {
return (
<div className="app">
this is app
</div>
);
}
export default App;JSX Basics - Concepts and Essence
What is JSX
Concept: JSX is the abbreviation of JavaScript and XML (HTML), which means writing HTML template structure in JS code. It is the way to write UI templates in React.
Advantage:
1. HTML’s declarative template writing method 2. JS’s programmability
The essence of JSX
JSX is not a standard JS syntax. It is a syntax extension of JS that cannot be recognized by the browser itself. It needs to be parsed by a parsing tool before it can be run in the browser.
JSX basics-high-frequency scenarios
Using JS expressions in JSX
In JSX, expressions in JavaScript can be identified through the brace syntax {}, such as common variables, function calls, method calls, etc.
1. Pass strings using quotes
2. Using JavaScript variables
3. Function calls and method calls
4. Using JavaScript objects
Note: if statements, switch statements, and variable declarations are statements, not expressions, and cannot appear in {}
// 项目的根组件
// App -> index.js -> public/index.html(root)
const count = 100
function getName () {
return 'jack'
}
function App () {
return (
<div className="App">
this is App
{/* 使用引号传递字符串 */}
{'this is message'}
{/* 识别js变量 */}
{count}
{/* 函数调用 */}
{getName()}
{/* 方法调用 */}
{new Date().getDate()}
{/* 使用js对象 */}
<div style={
{ color: 'red' }}>this is div</div>
</div>
)
}
export default App
The web page appears as:
Implementing list rendering in JSX
Syntax: In JSX, you can use the map method in native JS to traverse the rendering list
const list = [
{ id: 1001, name: 'Vue' },
{ id: 1002, name: 'React' },
{ id: 1003, name: 'Angular' }
]
function App () {
return (
<div className="App">
this is App
{/* 渲染列表 */}
{/* map 循环哪个结构 return结构 */}
{/* 注意事项：加上一个独一无二的key 字符串或者number id */}
{/* key的作用：React框架内部使用 提升更新性能的 */}
<ul>
{list.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
</div>
)
}
export default App
The webpage is displayed as:
Implement conditional rendering in JSX
Syntax: In React, basic conditional rendering can be achieved through logical AND operators && and ternary expressions (?:)
const isLogin = true
function App () {
return (
<div className="App">
{/* 逻辑与 && */}
{isLogin && <span>this is span</span>}
{/* 三元运算 */}
{isLogin ? <span>jack</span> : <span>loading...</span>}
</div>
)
}
export default App
The webpage is displayed as:
