安裝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 = (
  <h2>
    <p className='p-header'>開始學習React--class變成className </p>
    <p className='p-cont'>開始使用變數 {name} </p>
  </h2>
)

// 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 <div>載入中loading...</div>
  } else { 
    return <div>資料已經載入完了哈</div>
  }
}
// jsx中也可以去呼叫函式哈
const contHtml = (
  <div>
    我在jsx去呼叫函式哈 {locadData() }
    <p>這裡面是jsx,因為可以返回jsx</p>
  </div>
)
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 ? ( <div>載入中loading...</div> ) :  <div>資料已經載入完了哈</div>
}
// jsx中也可以去呼叫函式哈
const contHtml = (
  <div>
    我在jsx去呼叫函式哈 {locadData() }
    <p>這裡面是jsx,因為可以返回jsx</p>
  </div>
)
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 = (
  <ul>
    {/* 給遍歷的那個元素新增上key值。key最好是唯一值哈 跟vue是一樣的哈 */}
    { 
      listArr.map(item => <li key={item.id}> 姓名 {item.name}</li> )
    }
  </ul>
)
ReactDOM.render(contHtml, document.getElementById('root'))

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

jsx中樣式的處理-使用行間樣式

import React from 'react'; //這個是react這個包，我們是需要的
import ReactDOM from 'react-dom'; //這個是react的虛擬dom
// 使用行間樣式
const contHtml = (
  <h1 style={{ color:'red', background:'pink', height:'100px'}}>
    我是內容
  </h1>
  // 第一個大括號表示的是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 = (
  <h1 className='myh1css' id='h1Id'>
    我是內容
  </h1>
  // 第一個大括號表示的是jxs,第二個表示的是一個物件，以鍵值對的形式處理
)
ReactDOM.render(contHtml, document.getElementById('root'))

動態新增新增class

<!-- 需求描述如果type==1，類名時css1;否者是css2 -->
<!-- 功能實現如下 -->

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 = (
  <ul>
    {listArr.map(item =>
      <li
        key={item.id}
        className={item.type==1 ? 'css1' : 'css2'}
      >
        {item.name}
      </li>
    )}
  </ul>
)
ReactDOM.render(contHtml, document.getElementById('root'))