React 开发环境搭建
React脚手架的上手，虽然简单，但总让人感觉不明就里，本文立足于演变，以代码的方式说明演进的过程。
忙中偷闲--珠海东澳消夏2018-08-04.JPG
1. CDN 无JSX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<style>
.hi{
color: red;
}
</style>
</head>
<body>
<!-- 真实DOM，做为虚DOM的挂载点 -->
<div id="app"></div>
<script type="text/javascript">
//let h1=document.createElement('h1')
//React的Element
let h1=React.createElement('h1',{name:"react",className:'hi'},"Hello React");
let btn=React.createElement('button',{onClick:()=>alert('hello')},"点我")
let div=React.createElement('div',{},[h1,btn])
//将虚拟的DOM挂载到真实DOM上
ReactDOM.render(div,document.querySelector('#app'))
</script>
</body>
</html>
问题： 没有使用JSX语法，导致代码写的象DOM
2. CDN 有JSX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!--运行时，把jsx转译成React.createElement-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<style>
.hi{
color: red;
}
</style>
</head>
<body>
<!-- 真实DOM，做为虚DOM的挂载点 -->
<div id="app"></div>
<script type="text/babel">
//let h1=document.createElement('h1')
//React的Element
//使用JSX创造虚拟DOM（JavaScript eXtenstion）
//在{}中，可以使用任意的js表达式，包括jsx
let div=<div><h1>Hello React with JSX</h1><button onClick={()=>alert("hello with react")}>点击我</button></div>
//将虚拟的DOM挂载到真实DOM上
ReactDOM.render(div,document.querySelector('#app'))
</script>
</body>
</html>
有如下问题：
-
无法通过引入的方式，引入自己的js文件
-
运行时效率太低
3. CDN+预处理
md cdn_pre
cd cdn_pre
md src
./src/app.js
let div=<div><h1>Hello React with JSX</h1><button onClick={()=>alert("hello with react")}>点击我</button></div>
//将虚拟的DOM挂载到真实DOM上
ReactDOM.render(div,document.querySelector('#app'))
npm init -y #初始化一个npm项目
npm install -D babel-cli@6 babel-preset-react-app@3
## 把app.js文件copy到src中
npx babel src --out-dir . --presets react-app/prod ## 把jsx预转义成为React.crearteElement
./index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<style>
.hi{
color: red;
}
</style>
</head>
<body>
<!-- 真实DOM，做为虚DOM的挂载点 -->
<div id="app"></div>
<script type="text/javascript" src="./app.js"></script>
</body>
</html>
改进虚拟Dom的生成方式，同jsx变成组件化定义
./src/App.js 的代码变为以下形式：
//自定义组件+声明式
function App(){
return <div><h1>Hello React with JSX</h1><button onClick={()=>alert("hello with react")}>点击我</button></div>
}
//将虚拟的DOM挂载到真实DOM上
ReactDOM.render(<App/>,document.querySelector('#app'))
将组件化代码变为ES6的Class 语法：
./src/App.js 的代码变为以下形式：
class App extends React.Component{
render(){
return <div><h1>Hello React with JSX and class</h1><button onClick={()=>alert("hello with react and class ")}>点击我</button></div>
}
}
//将虚拟的DOM挂载到真实DOM上
ReactDOM.render(<App/>,document.querySelector('#app'))
将以上的代码再进行重构：
function App1(){
function clickHandler(){
alert("hello with react and function")
}
return (<div>
<h1>Hello React with JSX and function</h1>
<button onClick={clickHandler}>点击我</button>
</div>)
}
class App extends React.Component{
clickHandler(){
alert("hello with react and class")
}
render(){
return (<div>
<h1>Hello React with JSX and class</h1>
<button onClick={this.clickHandler}>点击我</button>
</div>)
}
}
//将虚拟的DOM挂载到真实DOM上
ReactDOM.render(<App1/>,document.querySelector('#app'))
4. *使用creat-react-app 以SPA构建的方案，创建项目：
- 确保家目录中的
.npmrc的内容如下：
registry=https://registry.npm.taobao.org
-
安装使用
npx create-react-app my-app ## waiting.... cd my-app npm start -
更改代码：
修改App.js
function App(){
function clickHandler(){
alert('hello!!!')
}
return (
<div>
<h1>Hello React with SPA</h1>
<button onClick={clickHandler}>click me</button>
</div>
)
}
export default App
5. 老师定义的脚手架SPA（Scaffold）
https://github.com/johnyu666/webpack-react-scaffold
6. SSR脚手架：（Server Side Rendering）
SPA不能进SEO优化，解决这个问题需要使用SSR
使用nextjs(https://nextjs.org/learn/basics/create-nextjs-app/setup)
网友评论