npm init -y
npm i react react-dom
2.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script src="./node_modules/react/umd/react.development.js">script>
<script src="./node_modules/react-dom/umd/react-dom.development.js">script>
head>
<body>
<div id="root">div>
<script>
// 2.创建react元素
let myh1 = React.createElement("h1", null, "我是h1")
// 3.渲染到页面
ReactDOM.render(myh1, document.getElementById("root"))
script>
body>
html>
npx create-react-app my-pro
npx 目的:提升包内提供的命令行工具的使用体验 (my-pro 自己定义的项目名称)
原来:先安装脚手架包,再使用这个包中提供的命令,现在:无需安装脚手架包,就可以直接使用这个包提供的命令
2.启动项目,在项目根目录执行命令:
cd my-pro
npm start
打开项目后只留下index.js即可(入口文件,相当于vue的main.js,App.js相当于vue的App.vue根基组件)
// 1 引入 react react-dom import React from 'react' import ReactDOM from 'react-dom' // 2 创建react元素 let mydiv=React.createElement("div",{className:"box"},'我是div') // 3 渲染到页面 ReactDOM.render(mydiv,document.getElementById("root"))
由于通过createElement()方法创建的React元素有一些问题,代码比较繁琐,结构不直观,无法一眼看出描述的结构,不优雅,用户体验不爽
JSX的概述:jsx 在js中可以写 html
import React from 'react' import ReactDom from 'react-dom' let mydiv = < h1 > 我是通过JSX创建的元素11 ReactDom.render(mydiv, document.getElementById("root"))nt.getElementById("root"))
JSX 不是标准的ECMAScript语法,它是ECMAScript的语法拓展,需要使用babel编译处理后,才能在浏览器环境中使用 ,编译JSX语法的包: @bable/preset-react
特殊属性名:class -> className,for -> htmlFor,tabindex -> tabIndex
语法:{JavaScritp表达式}
let content = '插入的内容' let h1 =我是通过JSX创建的元素+ {content}
注意:只能写简单的三元表达式、变量、+-*/%四则运算
在 react中 没有 v-if v-for类似的 指令 react写法类似 原生js
import React from 'react' import ReactDom from 'react-dom' // 条件渲染 let isLoading = false let mydiv = '' if (isLoading) { mydiv = < div > Loading... div> } else { mydiv = < div > 加载完成 div> } ReactDom.render(mydiv, document.getElementById("root"))
map()方法循环数组,把return后面的值组成一个新数组返回,尽量减少使用索引代表key
数组.map(function(item,index,arr){})
import React from 'react' import ReactDom from 'react-dom' // 循环渲染 let arr = [ { id: 1, name: '三国演义' }, { id: 2, name: '水浒传' }, { id: 3, name: '红楼梦' }, { id: 4, name: '西游记' }, ] // let mydiv = <ul > { // arr.map(function(item, index, arr) { // return <li key = { item.id } > 名字: { item.name } li> // }) // } ul> let mydiv = <ul > { arr.map(item => { return <li key = { item.id } > 名字: { item.name } li> }) } ul> ReactDom.render(mydiv, document.getElementById("root"))
.box { color: red; background-color: pink }
import React from 'react' import ReactDom from 'react-dom' import './index.css' // let mydiv=<div> // <p style={ {'color':'red',"backgroundColor":"pink"} }>123p> // div> let mydiv = <div > <p className = "box" > 123 p> div> ReactDom.render(mydiv, document.getElementById("root"))
5. React组件(函数组件+class类组件)
函数组件 1.首字母大写 2.必须有返回值 return return null
import React from 'react' import ReacrDOM from 'react-dom' // 函数组件 function Header() { return <div > 我是div div> } ReacrDOM.render( < Header > Header>,document.getElementById('root'))
class类组件
import React from 'react' import ReacrDOM from 'react-dom' // class类组件 class Header extends React.Component { render() { return <div > 我是div1 div> } } ReacrDOM.render( < Header > Header>,document.getElementById('root'))
ES6中的class类
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<script>
// function Person() {
// this.name = '建林',
// this.money = '壹佰亿'
// }
// let p1 = new Person()
// console.log(p1.money) //壹佰亿
class Person {
name = '建林'
money = '壹佰亿'
}
let p2 = new Person()
console.log(p2.name) //建林
// class Son extends Person {
// name = '思聪'
// }
class Son extends Person {
constructor() {
super() //超级也就是class Person
this.name = '思聪'
}
}
let p3 = new Son()
console.log(p3.name) //思聪
script>
body>
html>
独立组件
components/Footer.js
import React from 'react' export default class Footer extends React.Component { render() { return ( < div > 我是Footer组件
// 3 导出组件也可
//export default Footer