2021-06-24 -从0开始新建一个react程序

通过create react app创建react程序

npx create-react-app my-app
cd my-app

新建一个远程仓库，本地工程关联到远程

git init
git remote add origin 仓库地址
git add .
git commit -m "xxx"

vscode 打开该工程，运行

npm start

如何使react的JSX转化成浏览器能够执行的JS，两种方法

1. 围绕node和构建工具设置开发环境（每次执行构建，所有JSX后自动转化为JS并放在磁盘中供引用，大型应用开发一般用这个）
2. 浏览器在运行时自动将JSX转化为JS（更方便，但是有性能问题），目前采取本方法，
   首先如何让react变成浏览器能够理解的东西

//引用react，在html中引入react库和Babel库
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

//在html的body中调用render方法，使我们的元素能够显示在页面上

ReactDOM.render(
  <h1>test</h1>     //JSX，写明要输出的类html元素
  document.body   //写明要渲染的位置
)

//设置此script指定为babel能够执行的脚本，

<script type="text/babel">
ReactDOM.render(
  <h1>test</h1>
  document.body
)
</script>

优化，不要直接使用JS将内容放在body元素中，比较好的方法是创建一个单独的元素，比如在html中加一个div

<div id="container"></div>

然后render() 改成document.querySelector("container")