React起手式
2020-07-26 本文已影响0人
fanison
引入React
- CDN引入React
bootcdn
// 引入 React
<script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
// 引入 ReactDOM
<script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>
cjs 和 umd 的区别
-
cjs全称是Common JS，是Node.js 支持的模块规范 -
umd是统一模块定义，兼容各种模块规范(含浏览器) - 理论上优先使用 umd，同时支持
Node.js和浏览器 - 最新的模块规范是使用
import和export关键字
- 通过webpack引入React
yarn add react react-dom
import React from 'react'
import ReactDOM from 'react-dom'
React元素和函数组件
- React 元素
App1 = React.createElement('div',null,n)
createElement的返回值element可以代表一个div，element为虚拟DOM对象
- React 函数组件
App2 = ()=> React.createElement('div',null,n)
函数组件可以多次执行，返回element的函数，每次得到最新的虚拟div
使用 React实现 +1
// html
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>
</body>
//js
console.log(window.React);
console.log(window.React.createElement);
console.log(window.ReactDOM);
console.log(window.ReactDOM.render);
const React = window.React;
const ReactDOM = window.ReactDOM;
let n = 0;
// const App = React.createElement("div",null,[n,
const App =()=> React.createElement("div",null,[n,
React.createElement("button",{
onClick:()=>{
n += 1;
console.log(n);
//ReactDOM.render(App,document.querySelector("#app"));
ReactDOM.render(App(),document.querySelector("#app"));
}
},"+1"
)
])
//ReactDOM.render(App, document.querySelector("#app"));
ReactDOM.render(App(), document.querySelector("#app"));
点击 +1 按钮，n值未变，只需将App变为函数，每次render重新读取n的值
jsx语法
- 使用CDN
引入babel.min.js，把<script> 改成 <script type="text/babel">，babel会自动进行转译 - 使用 webpack + babel-loader
- 使用 create-react-app
注意事项
注意 className
<div className="red"> n </div>
React.createElement('div',{className:'red'},"n")
插入变量:标签里面的js代码要用 {} 包起来(变量、对象都要用 {}包起来)
习惯return后面加()
const App = ()=>{
return (
<div>App</div>
)
}
条件判断
const Component = () => {
return n%2 === 0 ? <div>n是偶数</div> : <span>n是奇数</span>
}
const Component = () => {
return (
<div>
{ n%2 === 0 ? <div>n是偶数</div> : <span>n是奇数</span> }
</div>
)
}
const Component = () => {
const content = (
<div>
{ n%2 === 0 ? <div>n是偶数</div>:<span>n是奇数</span> }
</div>
)
return content
}
const Component = () => {
const inner = n%2 === 0 ? <div>n是偶数</div>:<span>n是奇数</span>
const content = (
<div>
{ inner }
</div>
)
return content
}
const Component = () => {
let inner
if( n%2 ===0 ){
inner = <div>n是偶数</div>
}else{
inner = <span>n是奇数</span>
}
const content = (
<div> { inner } </div>
)
return content
}
循环控制
const Component = (props) => {
return props.numbers.map((n,index)=>{
return <div>下标{index}值为{n}</div>
})
}
const Component = (props) => {
return ( <div>
{ props.numbers.map((n,index)=>{
return <div>下标{index}值为{n}</div>
})}
</div>)
}
const Component = (props) => {
const array = []
for(let i=0;i<props.numbers.length;i++){
array.push(<div>下标{i}值为{props.numbers[i]}</div>)
}
return <div>{ array }</div>
}
