React -- 入门挖坑

一、创建项目

新建一个文件，然后创建一个index.html文件，唉，看了react的官网教程，才知道什么叫做操蛋，妈的，简直就是东拉西扯，东拼西凑啊，根本不知道他在扯什么犊子。
官网教程Hello World，跟着写，根本不知道写出个什么玩意儿，只能找资料看
引入
创建完成之后，就需要在html文件里面引入react.js文件，练习就用development，生成就用production
CDN链接

// react核心
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
// react的DOM操作
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

关键
关键
关键
在完成上面的操作后，还需要引入一个babel.js文件，这个文件用来解析jsx语法的，没有这个玩意儿，啥也弄不了，而且在页面写script标签的时候，type一定要写成type="text/babel"，否则啥也弄不了

// 生成环境中一定不要使用，这种方式效率很地下
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

1、jsx预处理器

将生产就绪（production-ready）的 JSX 配置环境添加到项目:
步骤 1： 执行 npm init -y （如果失败，这是修复办法)
步骤 2： 执行 npm install babel-cli@6 babel-preset-react-app@3

2、运行 JSX 预处理器

创建一个名为 src 的文件夹并执行这个终端命令：

npx babel --watch src --out-dir . --presets react-app/prod

二、Hello React

现在就可以在body里面创建一个id为root的容器，然后在script里面写入如下代码：

// 这个是jsx写法
const element = <h1>Hello React</h1>;
ReactDOM.render(element,document.getElementById('root'));

// 或者
ReactDOM.render(<h1>Hello React</h1>,document.getElementById('root'));

然后在浏览器打开html文件，就可以看见这个标题了