前言

今天我们使用脚手架来创建属于自己的第一个react项目，来看看创建出来的项目结构是什么样的？在react中又是怎么样的语法~

---

一、react脚手架的使用

1. 为什么使用脚手架？

• 脚手架是开发现代 Web 应用的必备
• 充分利用 Webpack、Babel 等工具辅助项目开发
• 关注业务、而不是工具配置
• Vue中的@vue/cli,React中的create-react-app都是脚手架

2. 使用脚手架初始化项目

• 初始化项目，命令：npx create-react-app demo
  • 如下图所示即为成功
• 启动项目，在项目的根目录执行命令：npm start或yarn start
  • 运行完上述命令后，脚手架创建的第一个react项目就已经在本地运行起来了
  • 下图是运行起来后的初始页面

3. npx命令介绍

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

二、react项目

1. 运行流程分析

• App.js具体组件，一般对应页面上的一个显示区域。样式定义在同名的App.css文件中，在App.js文件中导入使用
• index.js是项目入口，一般在这里导入根组件，并将根组件挂载（渲染）到public/index.html中定义的root节点

2. 在脚手架中使用react

• 导入react和react-dom两个包

代码如下（示例）：

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

• 使用React.createElement()方法创建react元素，使用ReactDOM.render()方法渲染react元素

const el = React.createElement('h1', null, 'Hello React 脚手架')
ReactDOM.render(el, document.getElementById('root'))

• 使用JSX语法创建react元素，使用ReactDOM.render()方法渲染react元素

const jsx = <h1>Hello React JSX 脚手架</h1>
ReactDOM.render(jsx, document.getElementById('root'))

3. 在单独js文件中使用jsx

• 创建一个名称为Hello.js的文件
• 在Hello.js中导入React
• 创建函数组件，函数返回一个JSX结构
• 在Hello.js文件中导出该组件
• 在index.js文件中导入Hello组件
• 在index.js文件中渲染组件，<标签包裹函数名/>

代码如下（示例）：

// Hello.js
import React from 'react'
function Hello () {
  return <h1>Hello React JSX 脚手架，这是文件导出的组件</h1>；
}
// 导出Hello组件
export default Hello

// index.js
import Hello from './Hello'
// 渲染导入的Hello组件
ReactDOM.render(<Hello/>,root)

---

总结

You never know till you have tried.