React 脚手架初始化项目

一.React 脚手架初始化项目

1 初始化项目，命令：

npx create-react-app my-app

2 启动项目，在根目录执行命令：

npm start

3 npx 命令介绍

• npm v5.2.0引入的一条命令
• 目的：提升包内提供的命令工具的使用体验
• 原来：先安装脚手架包，再使用这个包中提供的命令
• 现在：无需安装脚手架包，就可以直接使用这个包提供的命令

补充说明

1. 推荐使用：

npx create-react-app(固定格式) my-app(项目名称)

2. 可以使用

npm init react-app my-app

yarn create react-app my-app

二. 在脚手架中使用React

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

import React from 'react'
import ReactDOM from 'react-dom'

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

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

在src/index.js中编写代码：

// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'

// 2 创建react元素
const title = React.createElement('h1', null, 'hello React !!!')

// 3 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

三. JSX的基本使用

1 createElement()的问题

1. 繁琐不简洁
2. 不直观，无法一眼看出所描述的结构
3. 不优雅，用户体验不爽

2 JSX简介

JSX是JavaScript XML的简写，表示在JavaScript代码中写XML（HTML）格式的代码

优势：声明式语法更加直观，与HTML结构相同，降低了学习成本、提升开发效率

3 使用步骤

1. 使用JSX语法创建react元素

// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'

// 2 创建react元素
const title = (<h1>Hello JSX</h1>)

// 3 渲染react元素
ReactDOM.render(title, document.getElementById('root'))