react脚手架的安装和简单测试

1.安装

1.win+R 输入cmd打开黑窗口

2.安装到全局

npm i -g create-react-app

3.创建 react项目

create-react-app 项目名

3.进入创建目录

cd 项目名

4.启动

npm start

5.在浏览器中打开 http://localhost:3000/ ，结果如下图所示：   

即为成功

2.使用

1.用 vs code开发软件找到创建的项目并打开

vs code 需要安装以下插件

react

live server

eslint 等等

2.打开项目文件后，进入App.js

  用函数组件的形式编译

import './App.css';//这里是导入css 
function App(){
  var arr=[
    <h4>jquery Dom\Ajax</h4>,
    <h4>react</h4>,
    <p>vue</p>
  ]
  var styles= {
    fontSize:"48px",
    color:"#f70"
  }
  return (
    <div>
      {/* 你好呼呼 */}
      <p className='active'>你好react</p>
      <p>{2+3}</p>
      {arr}
      <p style={styles}>幸运</p>
    </div>
   
  )
}
export default App;

这里是App.css的内容

.active{
  color: rgb(130, 169, 201);
}

3.查看页面前，很关键的一步

4.打开浏览器，查看效果

 5.类组件的编译形式

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>
        
      </div>
    )
  }
}

@H_404[email protected]的语法特点

react是JavaScript混合xml（html）语法格式

jxs语法特点：

①只有一个根节点；

②类名  className

③数组里面可以直接写html标签；

④{ }  写JavaScript

⑤对象样式自动展开

⑥采用{/*内容*/}注释

其他react使用方法见下篇。