React 入门第一天（小案例和注意细节）

Posted 2022-03-10 岁月可贵

创建项目目录

• npx create-react-app demo
• cd demo
• npm start
  
  
  

删除src 目录下的所有文件，从头开始学

创建一个小案例

src 创建入口 index.js

import ReactDOM from "react-dom";
import App from './App'
// ReactDOM.render(组件名称，要注入的元素)
ReactDOM.render(
  <App/>,
  document.getElementById('root')
  );

src 创建组件 App.jsx

import React from 'react'
const title = "你好世界"
// 类组件
export default class App extends React.Component 
   render()
     return (
       <div>
         <h2>title</h2>
       </div>
     )
   

export default App

npm start 启动项目

注意细节

import React from 'react';
const msg = "你好世界"
const mystyle = backgroundColor: 'red'
let flag = true;
let arr  = ["刘备", "关羽", "张飞"]
export default class App extends React.Component 
  render() 
    return (
      <>
        <h2>msg</h2>
       
        /* 不能使用 for 改成 htmlFor */
        <label htmlFor="username"></label>
        <input type="text" id="username"/>

        /* 不能使用 class 改成 className */
        <div className="box"></div>
       
        /* 双括号 */
        <div style=backgroundColor: 'red'>内容</div>
        /* 单括号 */
        <div style=mystyle>内容</div>
        /* 三元运算符 */
        <div style=backgroundColor: flag? 'green':'red'>内容</div>
         /* 循环 */
        <ul>
          
            /* 只能使用 map 不能使用 forEach (forEach 没有返回值，而 map 有返回值) */
            arr.map((item, index) => <li key=index>item</li>)
          
        </ul>
      </>
    )