安装react的脚手架

1==>行 npx create-react-app myreactdemo01】
解释一下： npx create-react-app 你的项目名称
npx create-react-app 是固定不变的
2==>然后执行回车
3==>cd myreactdemo01
4==>npm start

简单介绍一下npx

npm 从5.2版开始，增加了 npx 命令.
npx 想要解决的主要问题，就是调用项目内部安装的模块。
也就是说安装了node就有npx。

学习jsx

在学习jsx的时候，需要注意的点哈
React元素的属性名使用驼峰命名法(小驼峰)
特殊的属性名 class==>className; for==>Htmlfor
使用小括号()包裹jsx是为了避免js中自动插入分号的陷阱。

jsx的简单使用-使用变量

//index.js 文件 这个文件是src下的文件。
//我使用这个文件是为了方便练习React

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
// jsx的书写
const name='我是变量'
const contHtml = (
  

    
开始学习React--class变成className 
    
开始使用变量 {name} 
  
)

// root在index.html中可以找到这个变量哈
ReactDOM.render(contHtml, document.getElementById('root'))

jsx中也可以去调用函数哈

//index.js 文件

import ReactDOM from 'react-dom'; //这个是react的虚拟dom
const isLoadFlag = true
const locadData = () => { 
  if (isLoadFlag) {
    return 
加载中loading...
  } else { 
    return 
数据已经加载完了哈
  }
}
// jsx中也可以去调用函数哈
const contHtml = (
  

    我在jsx去调用函数哈 {locadData() }
    
这里面是jsx,因为可以返回jsx
  
)
ReactDOM.render(contHtml, document.getElementById('root'))

优化上面的哈-jsx中三元运算的使用

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
const isLoadFlag = true

const locadData = () => { 
  return isLoadFlag ? ( 
加载中loading...
 ) :  
数据已经加载完了哈
}
// jsx中也可以去调用函数哈
const contHtml = (
  

    我在jsx去调用函数哈 {locadData() }
    
这里面是jsx,因为可以返回jsx
  
)
ReactDOM.render(contHtml, document.getElementById('root'))

jsx的列表渲染类似 v-for

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
const listArr = [
  { id: 1, name: '张三2' },
  { id: 2, name: '张三3' },
  { id: 3, name: '张三4' },
]
// jsx中也可以去调用函数哈
const contHtml = (
  

    {/* 给遍历的那个元素添加上key值。key最好是唯一值哈 跟vue是一样的哈 */}
    { 
      listArr.map(item => 
 姓名 {item.name}
 )
    }
  
)
ReactDOM.render(contHtml, document.getElementById('root'))

需要注意的是：要避免使用索引值(index)作为key

jsx中样式的处理-使用行间样式

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
// 使用行间样式
const contHtml = (
  

    我是内容
  
  // 第一个大括号表示的是jxs,第二个表示的是一个对象，以键值对的形式处理
)
ReactDOM.render(contHtml, document.getElementById('root'))

jsx中样式的处理【推荐使用 className 】

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
// 引入这个文件对应的css，css中有myh1css样似的描述。推荐使用这一种
import './index.css'
// 使用行间样式
const contHtml = (
  

    我是内容
  
  // 第一个大括号表示的是jxs,第二个表示的是一个对象，以键值对的形式处理
)
ReactDOM.render(contHtml, document.getElementById('root'))

动态新增新增class

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
const listArr = [
  { type: 1, name: 'react',id:1 },
  {type:2,name:'vue',id:3},
]
const contHtml = (
  

    {listArr.map(item =>
      

        {item.name}
      
    )}
  
)
ReactDOM.render(contHtml, document.getElementById('root'))