React基础案例02＋03 使用React构建HTML元素

案例02：使用npx创建

创建项目

npx create-react-app my-react-app

cd my-react-app

npm start

浏览器访问：http://localhost:3000/

App.js 分析

import logo from './logo.svg';

import './App.css';

function App() {

return (

Edit src/App.js and save to reload.

className="App-link"

href="https://reactjs.org"

target="_blank"

rel="noopener noreferrer"

>

Learn React

);

}

export default App;

导入svg：

import logo from './logo.svg';

// 导入后可以直接通过src引用

导入css：

import './App.css';

App.js 修改

function App() {

return (

Hello World!

);

}

export default App;

浏览器访问：http://localhost:3000/

案例03：使用React构建HTML元素

示例01：无序列表

React Elements

// 使用react构建无序列表

const languages = React.createElement(

"ul",

null,

React.createElement("li", null, "Python"),

React.createElement("li", null, "Golang"),

React.createElement("li", null, "Java"),

React.createElement("li", null, "Rust"),

)

// 渲染React元素

ReactDOM.render(

languages, // 元素

document.getElementById('app'), // 渲染位置

)

示例02：多层嵌套的元素

React Elements

// 使用react构建无序列表

const dom = React.createElement(

"div",

null,

// 标题

React.createElement("h1", null, "标题元素"),

// 无序列表

React.createElement(

"ul",

null,

React.createElement("li", null, "Python"),

React.createElement("li", null, "Golang"),

React.createElement("li", null, "Java"),

React.createElement("li", null, "Rust"),

),

// 嵌套div

React.createElement(

"div",

null,

"这是一个嵌套的div"

)

)

// 渲染React元素

ReactDOM.render(

dom, // 元素

document.getElementById('app'), // 渲染位置

)

示例03：基于数据构建无序列表

React Elements

let languageData = ["Python", "Golang", "Java", "Rust"];

// 使用react构建无序列表

const dom = React.createElement(

"ul",

,

languageData.map((languageText, index) =>

React.createElement("li", , languageText)),

)

// 渲染React元素

ReactDOM.render(

dom, // 元素

document.getElementById('app'), // 渲染位置

)