React起步与JSX（一）

react开发环境准备

一.安装node

官网安装 （网址）

二.安装官方脚手架 create-react-app

1. npm install -g create-react-app
2. create-react-app my-app

将会为我们自动生成一个react项目

三.脚手架生成的项目结构讲解

1.项目结构

index.js 入口，引入app，并渲染到页面上
App.test.js 自动化测试文件
App.js 负责显示页面
附：
1）.PWA progressive web application
registerServiceWorker 帮助我们用网页的方式去写手机应用
网页具备的特性：第一次需要联网访问，后续断网下也可以访问，因为registerServiceWorker会帮我们把网页存储起来

2）.只要有JSX语法就要引入react包

2.React中的JSX基础语法

1）.在JSX中，可以使用html的标签，也可以使用自定义标签
2）.在JSX中，如果要使用自己创建的组件，直接通过标签形式使用即可

import App from './App';
import ReactDom from 'react-dom';

ReactDom.render(<App />, doucument.getElementById('root'))

3）.在JSX中，要求return的元素最外层只能有一个div，否则会报错
解决办法，可以在最外层包一个div，但有时候我们在布局时不希望出现最外层，div，那么在16版本中，可以包一个fragment元素进行占位

4）.在JSX中，如果不需要输入的input value进行转义，可以通过dangerouslySetInnerHTML={{__html: item}} =》 即不转义的html内容（其中里面的{}代表一个对象）

5）.在JSX中，需要注意的html标签Property
class 应该使用className
for 应该使用htmlFor