Web全栈开发学习（1）

一． 实验目的

1. 掌握react的基本使用
2. 掌握JSX基本语法
3. 掌握组件的基本概念

二．实验环境

VScode

三．实验内容

react基本使用

1、react脚手架的使用

  实验内容：

用react脚手架编写程序输出自己的姓名学号。

代码：

import React from 'react';
import ReactDOM from 'react-dom';

const title=<h1>姓名 学号</h1>
ReactDOM.render(title,document.getElementById('root'))

2、

1. 在JSX中使用javascript语法输出自己的姓名和学号

        代码：

import React from "react";
import ReactDOM from 'react-dom';

const name='姓名'
const title=(
    <h1>
        Hello {name} 学号
    </h1>
)
ReactDOM.render(title,document.getElementById('root'))

        2.用JSX语法进行条件渲染，内容自拟

        代码：

import React from "react";
import  ReactDOM from "react-dom";


const isloding=true
const loadData=()=>{
    return isloding ?(<div>loading……</div>):(<div>数据加载完成</div>)
}

const title = (
    <h1>
      {loadData()}
    </h1>
  )
ReactDOM.render(title,document.getElementById('root'))

5、用JSX语法进行样式渲染，输出自己的姓名和学号居中显示，姓名颜色和学号颜色为rgb(212, 94, 119)，背景颜色aqua

代码：

import React from "react";
import ReactDOM from 'react-dom';
import './index.css'

const style={
    color:'rgb(212, 94, 119)',
    backgroundColor:'aqua',
}
const list=(
       <div className="Hello">
            <span style={style}>姓名 学号</span>
        </div>
)
ReactDOM.render(list,document.getElementById('root'))

6.用JSX语法进行列表渲染，内容自拟

代码：

import React from 'react';
import ReactDOM from 'react-dom';

const  happy=[
    {id:1,title :'周六'},
    {id :2,title:'周日'},
    {id:3,title:'放假啦'},
]

const list=(
    <ul>
        {happy.map(item=><li key={item.id}>{item.title}</li>)}
    </ul>
)

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

7.用函数组件输出姓名和学号

代码：

import React from 'react';
import ReactDOM from 'react-dom';

/* 函数组件 */
function First(){

    return <div>姓名学号</div>
}
ReactDOM.render(<First/>,document.getElementById('root'))

8.用类组件输出姓名和学号

代码：

import React from 'react';
import ReactDOM from 'react-dom';


class First extends React.Component{
    render(){
        return <div>姓名学号</div>
    }
}
ReactDOM.render(<First/>,document.getElementById('root'))