安装

使用create-react-app脚手架搭建

全局安装
npm i create-react-app -g

查看版本
create-react-app -V

查看命令
create-react-app --help

创建项目
create-react-app 项目名称

进入项目
cd 项目名称

启动项目
npm start

jsx

jsx是什么

jsx全称是JavaScript XML，在js中写XML标签，是JavaScript的一种扩展语法
jsx标签既不是字符串也不是HTML，编译后是一个对象，描述要显示UI信息
说明：XML是可扩展标记语言

• 可以写入的标签：
  1.w3c规定的标签，浏览器端能解析
  2.自定义标签，首字母大学，封装的组件
  3.任意标签，不被浏览器解析

代码的话一般是放在src目录下
入口：index.js

import React from 'react'; //导入react
import ReactDOM from 'react-dom'; //导入reactDOM

//通过render函数，随便写点东西在我们的页面上
let h = <h2>
            <span>hello React!</span>
        </h2>;

console.log(h);//这是创建的h是一个react对象，用来描述UI的信息，经过render生成一个真实的DOM

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

React.createElement

let span = React.createElement('span',null,'hello,react1')
let h = React.createElement('h2',{className:'red'},span)

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

两者相比jsx的语法更清晰明了,所以建议使用jsx的方法;

jsx编译过程

• 使用jsx语法的优点：
  • 符合写模板的习惯
  • 程序结构更容易被直观化
  • 抽象了ReactElement的创建过程
  • 书写的依然是js，不需要学习心得模板语法
    jsx语法只是为了React.createElement提供的语法糖

jsx标签结构->经过babel编译 -> 形成js对象结构（虚拟DOM） ->经过ReactDOM.render生成真实的DOM元素 -> 然后插入页面制定元素中

jsx语法规范

• jsx被编译成对象
  • 可以当做值赋值给变量
  • 可以当做函数的返回值
  • 可以存在数组中
• 写任意表达式，使用一堆花括号{表达式}
• 订的组件必须首字母大写，否则会当成普通标签解析
• 定义在行间的props，如果不赋值，默认为true
• Boolean，Null和Undefined作为子元素会被忽略，需转成字符串

let h = <h2>
            <span>hello,react!</span>
        </h2>
        <ul></ul>;
这样写会报错，需要包裹一个父级元素
let h = <>
            <h2>
                <span>hello,react!</span>
            </h2>
            <ul></ul>;
        </>

建议使用这种方式React.Fragment
let h = <React.Framgent>
            <h2>
                <span>hello,react!</span>
            </h2>
            <ul></ul>;
        </React.Framgent>

函数返回值的写法

function create(){
    return <React.Fragment>
            <h2>
                <span>hello,react!</span>
            </h2>
            <ul></ul>;
        </React.Fragment>
}
ReactDOM.render(
    create(),
    document.getElementById('root');
)

数组的方式
如果是数组需要手动提供一个key值,主要是代码优化，可以提高利用率

let arr = [
                <h2 key="123">
                    <span>hello,react!</span>
                </h2>,
                <ul key="456"></ul>
            ];
ReactDOM.render(
    h,
    document.getElementById('root');
)

{}可以写任意表达式

let value = 'hello,react';
let data = [1,2,3,4,5,6,7];
let lis = data.map(item => {
    return <li key={item}>{item}</li>
})
let h = <React.Framgent>
            <h2 title={value}>
                <span>{value}</span><br/>>
                <span>{1+21}</span>
                <span>{true ? 1 : 100}</span>
                <span>{[1,2,3].map(item => item*2)}</span>
                <span>{1>2}</span>
            </h2>
            <ul>{lis}</ul>;
        </React.Framgent>

写jsx的注意事项

返回的结构只能有一个顶层标签

• 解决方式：
  1.外层包裹一个元素
  2.返回数组形式，每个元素需要添加不重复的key值
  3.使用<></>或者<React.fragment></React.fragment>对结构进行包裹

组件

组件 components 让你可以将用户UI界面分成独立的，可复用的小部件，并可以对每个部件进行单独的设计

• 编写组件的好处：
  • 提高可复用性，可维护性
  • 组件结合构成UI界面，更方便删除和替换
  • 方便对单独组件功能进行测试

组件的分类

• 函数式组件
• 类组件

函数式组件
输入：传入组件的参数 props定制组件的数据
输出：返回值，我们描述的UI信息

function CreateH(props){
   return <h2>
              <span>{props.title}</span>
          </h2>
}
ReactDOM.render(
   <div>
       {h}
       {CreateH({title:'hello,world!'})}
       {CreateH({title:'hello,react!'})}
       <CreateH title="123"/>
   </div>,
   document.getElementById('root')
)

类式组件

 class Test extends React.Component{
     render(){
         console.log(this);//this指向实例,有一个props，存储了属性
         return <h2>
                    <span>{this.props.title}</span>
                </h2>
     }
 }

函数组件 vs 类式组件
函数组件 轻 输入数据输出显示UI信息， 用来做展示 没有生命周期
类式组件 重 有自己的状态 有生命周期

组件的特点

高内聚资源---组件资源内部高内聚，组件资源由自身加载控制

作用域独立---内部结构密封，不与全局或者其他组件产生影响

自定义标签---定义组件的使用方式

可相互组合---正是组件强大的地方，组件间组装整合

规范化接口---组件接口有统一规范，或者是生命周期的管理

组件模块化

将一个组件划分在一个文件中，需要时引入组件，将各个组件组合在一起，
各个组件之间是相互独立的，开始互不干扰

• 模块化的好处
  1.提高开发效率，有利多人协同开发
  2.避免命名冲突（减少命名空间污染）
  3.方便代码的复用和后期维护
  4.降低耦合度

写一个title组建

src 目录下创建一个components文件夹 ->title.js

import React from 'react'
class HTitle extends React.Components{
    render(){
        return <div>
                    <h2>这是H创建的title！</h2>
               </div>
    }
}
export default HTitle;

然后在index.js

import Htitle from '../src/components/title'

ReactDOM.render(
    <div>
        <Htitle/>
    </div>,
    document.getElementById('root')
)