How do you React
1. CDN introduction (2 files)
- React.min.js:cdn.bootcss.com/react/16.10… Cdn.bootcss.com/react/16.10…
- The react – dom. Min. Js:
CJS (commonJS) and UMD (umD) are used in the same way as umD (umD). They are compatible with various modules (including browsers).
2. Webpack introduced
yarn add react react-dom
Copy the code
import React form "react"
Copy the code
import ReactDOM from "react-dom"
Copy the code
3. create-react-app
yarn global add create-react-app
Copy the code
Create a React app
create-react-app app-name
Copy the code
JSX optimizes React
JSX is similar to Vue’s VUe-loader, allowing the creation of an external component, but Webpack’s Babel-Loader has merged its functionality
How to create a React component seeReact learn notes (2)
1. CDN introduction (not recommended)
< script SRC = "https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js" > < / script >
Then write the script part to the tag
<script type="text/babel">
let n = 0;
const App = (a)= > (
<div>{n} // Insert variables with {}<button
onClick={()= >{ n += 1; render(); }} // Insert function with {} > +1</button>
</div>
);
const render = (a)= >
ReactDOM.render(<App />, document.querySelector("#app")); // Since we are using JSX syntax here, the render argument is used<App />Render ();</script>
Copy the code
2. webpack+babel-loader
3. Use create-react-app directly
4 Grammar precautions
1.className
<div className="name"></div>
// We cannot write class directly because this is JSX syntax, it will be translated into JS and class is the keyword
// Class ="name"
Copy the code
2. Insert variable must use {}
{n}/ / variable n
{jscode}/ / js code
{fn}/ / function
{obj}/ / object
Copy the code
3. Add () when return
fn(){
return (....)
}
Copy the code
React if and for
1. if
const testApp=(a)= >{
return (
<div>
{
n%2===0?<div>{n} is even</div>:<div>{n} is odd</div>
}
</div>)}Copy the code
React is more like native JS and more flexible than Vue, which can only be written in V-if
< the template > < div > < div v - if = "n % 2 = = = 0" > {{n}} is an even number < / div > < div v - else = > {{n}} is odd < / div > < / div > < / template >Copy the code
2. loop
const testApp=(props) = >{
return (
<div>
{
props.number.map((n,index)=>{
return <div>{n} is subscript {index}</div>})}</div>)}Copy the code
// Or so it goes
const testApp=(props) = >{
const arr=[]
for(let i=0; i<props.number.length; i++){ arr.push(<div>{props. Number [I]} is subscript {I}</div>)}}Copy the code
Compare Vue
< the template > < div > < div v - for = "(n, index) in Numbers" : the key = "index" > {{n}} the subscript is {{index}} < / div > < / div > < / template >Copy the code