1.脚手架react 和 JSX 以及事件

全局安装 react 脚手架  :  npm i  create-react-app  -g

安装项目  create-react-app  项目名 

 

JSX语法 : 

　　1.JSX可以看做是JS语言的扩展,它既不是一个字符串也不是一个HTML

　　2.它具备了JS所有的功能,同时还可以转为HTML在界面上进行展示

 

一.JSX的语法使用 : 

// JSX只能有一个父元素 , 使用单标签的时候必须正确关闭

// 1.动态显示数据
const name = '吴宇腾'

// 2.调用方法 + 内置
function hello() {
  return '大家好'
}

// 3.表达式 : 支持三元表达式 , 不能写if  else 
const trueB = false

// 4.模板字符串
const muban = '你好'

// 5.添加属性
const shuxing = 'hello'

// 5.添加属性  字符串属性,直接用双引号包括

// 6.注释内容

function App() {
  return (
    <div >
      <p>1.动态显示数据 :  {name} </p>
      <p>2.调用方法 : {hello()}</p>
      <p>2.调用内置方法 : {console.log('111')}{Math.random()}</p>
      <p>3.表达式 : {trueB  ? '真的' : '假的'}</p>
      <p>4.模板字符串 : {`hello , ${muban}`}</p>
      <p title="123">5.普通添加属性 : 直接用双引号包括 </p>
      <p title={shuxing}>5.动态添加属性</p>
      <p>6.注释内容 : {/*注释内容*/}</p>
    </div>
  );
}

export default App;

 

二 . 事件

// 1.事件绑定
const onclick = ()=>{
  console.log('事件绑定');
}
// 2.事件监听传参
const onclick2 = (a,b)=>{
  console.log(a,b)
}
const onclickBind = (a,b)=>{
  console.log(a,b)
}
// 3.获取事件对象
const onclickev = (a,b,ev)=>{
  console.log(a,b,ev)
}

const onclickBind2 = (a,b,ev)=>{
  console.log(a,b,ev)
}


function App() {
  return (
    <div >
      <button onClick={onclick}>1.事件绑定</button> 
        <hr></hr>
      <button onClick={()=>{onclick2(111,222)}}>2.事件监听传参:箭头函数</button>
      <button onClick={(ev)=>{onclickev(333,444,ev)}}>3.事件监听传参:箭头函数+事件对象</button>
        <hr></hr>
      <button onClick={onclickBind.bind(null,555,666)}>2.事件监听传参:bind函数</button>
      <button onClick={onclickBind2.bind(null,555,666)}>3.事件监听传参:bind函数+事件对象</button>
    </div>
  );
}

export default App;