使用 React 脚手架初始化项目

初始化项目，命令：npx create-react-app my-app

    注意：1.my-app 可以随意起名（项目名称）
         2.npx 调用最新的 create-react-app 直接创建 React 项目
         3.使用npx , 不需要先安装create-react-app脚手架 , 它内部会帮你安装
         **4.如果想使用npx , 需要安装版本比较高的node**
         5.但是此时创建的项目中的react与react-dom依赖包版本比较高 , 为18.2.0

启动项目在项目根目录执行 yarn start

图片.png

在脚手架中使用 React

1.导入 react 和react-dom 两个包。

import React from 'react'

import ReactDOM from 'react-dom'

2.调用React.createElement() 方法创建react 元素。

3.调用ReactDOM.render() 方法渲染react 元素到页面中.



//1.导入react

import React from 'react';

//2.导入react-dom

import ReactDOM from 'react-dom';

//3.创建react元素

//3.1 定义一个变量来接收创建的元素

const title = React.createElement('h1',null,'hello world')

//4.渲染react内容

ReactDOM.render(title,document.getElementById('root'))

图片.png

总结：

初始化项目命令： npx create-react-app my-app

启动项目命令：yarn start 或者 npm start

React.createElement() 方法用于创建react 元素

ReactDOM.render（）方法负责渲染react元素到页面中

React脚手架基本使用

使用 React 脚手架初始化项目

在脚手架中使用 React