React基础技术点与JSX语法

1.核心技术点

create-react-app脚手架
组件化思维
JSX
开发调试工具
虚拟DOM
生命周期
React-transition-group
Redux等

2.基本知识

reactJS——网页

react native——原生app

react vr——开发vr全景应用

react 16版本之后的内容可以称之为React Fiber强调优先级

3.开发环境搭建

（1）引入.js文件使用React【性能低，维护性差】

（2）通过脚手架工具来编码

【脚手架：前端开发过程中的辅助工具，自动构建开发流程和目录，允许以一定的方式实现js的相互引用，使使用者更方便的对项目进行管理】

在脚手架中写的代码不能直接运行，需要脚手架工具进行代码的编译，编译出的代码才可以让浏览器直接运行

我们通常借助grunt、gulp、webpack帮助我们编写脚手架。

官方提供的脚手架工具：Create-react-app

（3）安装流程

npm install -g create-react-app //安装脚手架工具
create-react-app my-app//创建react项目
cd my-app
yarn start

（4）工程目录简介

cd my-add
npm run start //脚手架工具分析源代码，启动服务器运行源代码

这里写图片描述

yarn.lock : 项目依赖的安装包的版本号
README.md : 项目的说明文件【自行修改成自己项目的内容】
package.json : node的包文件，有项目介绍【之所以npm run start可以启动项目，是因为在此文件中的scripts下有: "start":"react-scripts start"】
.gitignore : 不想传到git仓库中，则将文件名写到此文件中
node_modules : 项目依赖的包
public
- favicon.ico 网站图标
- index.html 项目首页的html模板
- manifest.json 定义此网页如果当成app使用，就可以把它存储在桌面上【PWA理念】
- icons : 定义图标
- start_url : 定义网址
- theme_color : 主题颜色
- 等…
src : 项目的源代码
- index.js 整个程序运行的入口文件
  - react设计理念是:all in js 故:import ‘./index.css’引入css文件
  - import App from ‘./App’相当于引用App.js文件
  - import registerServiceWorker from ‘./registerServiceWorker’:registerServiceWorker也是一个文件
  前端流行说法PWA progressive web application理念：通过写网页的形式写手机的app应用
  
  引入registerServiceWorker就是用于写网页从而写手机应用的功能，作用：帮助把之前浏览的网页存储于浏览器之内，下一次即使没有网络也可以浏览该网页
- App.js 组件文件
- logo.svg 只是用于生成一个图片
- App.test.js 自动化测试文件

4.react中的组件[前端组件化]

定义组件
- import { Component } from ‘react’ 【es6解构赋值】
等价于

import React from ‘react’;

const Component = React.Component;

class App extends Component{…}
- 或class App extends React.Component{…}
返回组件渲染的内容[显示的内容]
- render(){return (…);}
导出组件
- export default App;
引入组件
- import App from ‘./App’
利用ReactDOM组件将组件挂载到页面DOM上
- ReactDOM.render(,document.getElementById(‘root’));
将App组件挂载到id为root的节点下

上述代码由于使用<App/>而不是App，故是JSX语法，使用JSX语法就必须引入React 即 import React from 'react'

5.JSX语法

在js中使用html标签或自己定义的标签

在JSX语法中，如果我们要使用我们自己创建的组件，直接使用组件名的标签名即可

注意：JSX的组件名第一个字母必须是大写

故如果看到大写字母开头的标签，通常是组件；小写字母开头的标签，通常是html标签

注意：在JSX语法中，要求一个组件render函数返回的内容，外层必须有一个包裹元素

eg.
import React ,{Component}from 'react';
class TodoList extends Component{
    render(){
        return(
            <div><!-- 外层有一个元素包裹 -->
                <input type="text"/><button>提交</button>
                <ul>
                    <li>学英语</li>
                    <li>Learning React</li>
                </ul>
            </div>
        )
    }
}
export default TodoList;