react开发环境搭建与使用

react开发环境搭建教程

1. 第一步
首先，下载三个依赖包分别是
1.react核心包：npm i react -S
2.react-dom: npm i react-dom -S
3.babel包：npm i babel-standalone -S

可以综合下载一条命令解决 **cnpm i -S react react-dom babel-standalone**

**如图，下载成功后你会发现你的根文件夹里面多了一个node包，这就证明你下载好了**

2. 第二步

这一步我们创建一个html页面开始来引入文件，总共要引入三个文件，并且这三个文件的是有顺序的，切记不能乱！

  <script src="./node_modules/react/umd/react.development.js"></script>
  <script src="./node_modules/_react-dom@16.13.1@react-dom/umd/react-dom.development.js"></script>
  <script src="./node_modules/_babel-standalone@6.26.0@babel-standalone/babel.js"></script>

3. 第三步

 这一步我们开始使用，首先页面需要一个容器，我们创建一个div，这个容器叫做react的根dom节点（只能定义一个节点）

这里我们会用到jsx，本尊在这里总结个技巧遇到<>解析为html代码，遇到{}解析为js代码

4. 第四步

这一步我们来写逻辑代码，逻辑代码写在script当中，但是我们创建script标签是必须的添加**type=”text/babel“**不写这个会报错

5. 第五步

 我们来写代码，定义一个变量myreact，通过ReactDOM.render（变量名，获取容器）这是HTML

定义一个name的变量，用{}来渲染，这是js

定义一个函数，这是函数方法

 注：如果行换行写可以加个（），必须写在父元素里！

我们还可以进行计算

react里面布尔值不显示我们可以用三元运算符

渲染数组，这个遍历数组会用到

属性绑定，href里面去掉双引号，不然会报错

样式处理，属性必须加双引号

数组遍历，不要忘了key值

未完待续…