基本使用
npm i react react-dom
react包核心 提供创建元素、组件等功能
react-dom包提供dom相关功能
脚手架安装
初始化项目命令 npx create-react-app 项目名
npx create-react-app object
创建React元素
const vdom = React.createElement('p',null,'脚手架');
渲染元素
ReactDOM.render(vdom,document.querySelector('#root'));
运行到浏览器
npm start
JSX
JavaScript XML 用js写html
jsx不是标准的es语法，浏览器不能直接识别，可以借助babel这样的工具编译处理
语法
1 不能用引号
2 属性名用驼峰命名法 class->className tabindex->tabIndex for->htmlFor
3 没有子节点的React元素可与使用/>结束
4 jsx语法结构推荐使用小括号包裹起来
函数组件的写法：
function Hello(){ return (<h1>Hello 函数组件</h1>) } ReactDOM.render(<Hello />,document.querySelector('#root'))
1、函数名一定要大写，否则
2、函数必须要有返回值，否则
3、返回值为null表示不渲染任何内容
箭头函数写法：
const Hello = ()=>{ return (<h1>Hello 函数组件</h1>) } ReactDOM.render(<Hello />,document.querySelector('#root'))
效果如下
遍历li标签
import React from "react"; import ReactDOM from "react-dom"; const data = [ { id:1, name: 'zs' }, { id: 2, name: 'lisi' }, { id: 3, name: 'wangwu' } ]; let ul = ( <ul> {data.map(item=> <li className="demo" key={item.id} style={ {color: 'red',backgroundColor: '#00f'} }>{item.name}</li>)} </ul> ) ReactDOM.render(ul,document.querySelector('#root'));
类组件
1、类名称必须首字母大写
2、类组件继承Reaact.Component
3、类组件必须提供render()
4、必须要有返回值
/* 类组件 */ class Hello extends React.Component{ render(){ return (<h1>Hello 函数组件!!</h1>) } } ReactDOM.render(<Hello />,document.querySelector('#root')) //ReactDOM.render(<Hello></Hello>,document.querySelector('#root'))
组件化写法：
// 创建Hi组件 import React from "react"; class Hi extends React.Component{ render(){ return(<h1>Hi,everyone</h1>) } } // 导出 export default Hi
在index.js中引入
import Hi from "./Hi"; ReactDOM.render(<Hi />,document.querySelector('#root'))
渲染点击事件
第一种写法 ：
import React from "react"; import ReactDOM from "react-dom"; // 事件绑定 class App extends React.Component{ render(){ return (<input type="button" onClick={()=>{ console.log('已经被点击！'); }} value="按钮"/>) } } ReactDOM.render(<App></App>,document.querySelector('#root'))
第二种写法：放在原型的实例化上面
import React from "react"; import ReactDOM from "react-dom"; // 事件绑定 class App extends React.Component{ handleClick() { console.log('已经被点击！'); } render(){ return (<input type="button" onClick={this.handleClick} value="按钮"/>) } } ReactDOM.render(<App></App>,document.querySelector('#root'))
第三种写法
function App() { function handleClick() { console.log('我被点击了'); } return (<input type="button" onClick={this.handleClick} value="按钮"/>) } ReactDOM.render(<App></App>,document.querySelector('#root')) import React from "react"; import ReactDOM from "react-dom"; /* class App extends React.Component{ constructor() { super() // 初始化状态 this.state = { num: 0 } } render(){ return (<div>有状态组件</div>) } } */ class App extends React.Component{ state = { num: 100, } render(){ return (<div>有状态组件 <button onClick={()=>{ // 只能通过setState来修改数据 this.setState({ num: this.state.num +1 }) }}>+1</button>{this.state.num}<button onClick={()=>{ // 只能通过setState来修改数据 this.setState({ num: this.state.num -1 }) }}>-1</button></div>) } } ReactDOM.render(<App/>,document.querySelector('#root'))
