我的react之路 -1 基础使用-CSDN博客

本文链接：https://blog.csdn.net/q13203856230_q/article/details/104458002

关于react的引用

1、npm config set registry https://registry.npm.taobao.org 切换到国内环境
默认是国外安装但是慢
脚手架 npm i creat-react-app 先执行这个来让你的电脑可以安装react的脚手架
然后是 create-react-app 你要创建的组件名字例如
create-react-app my-first-react 回车静静等待安装好一般安装的很慢
2、可以使用以下来直接使用react

 <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

也可npm i react 和 npm install babel-cli 去里面寻找对应的文件 这里的babel是必须的他不仅可以将es6转为es5 还可以解析jsx语法

react 的使用

<div id="example"></div>
<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

最基础的使用可以利用函数来进行进一步的多写

var Aspp = () => {
      return (
        <div>
          <h1>
            hello, world!
          </h1>
          <div> 你好哇</div>
        </div>
      );
    };
    function render() {
      ReactDOM.render(<Aspp></Aspp>, document.querySelector("#app"));
    }
    render();

这里通过reactDOM.render来渲染 Aspp这个函数其中返回的数据只能有一个根节点所以在return这里最外面包裹一个div
react也可以通过循环来进行多组件创建
react 是通过{}在里面写js代码但是里面不能写判断代码不然，会报这个错
SyntaxError: Inline Babel script: Unexpected token
不能写判断是因为jsx不允许写if
react使用了一种名叫jsx的语法 JSX就是Javascript和XML结合的一种格式
那么什么是jsx呢

JSX 即 JavaScript XML——一种在 React 组件内部构建标签的类 xml 语法。React 在不使用 JSX 的情况下一样可以工作，然而使用 JSX 可以提高组件的可读性，因此推荐你使用 jsx。

同时li里面的key值必须写不写会报这个react.development.js:255 Warning: Each child in a list should have a unique “key” prop.

let arr = [1, 23, "23"];
var Aspp = () => {
      return (
        <div>
          <ul> 
          {arr.map((item,index)=>{ return <li key="i"> {item} </li> })}
</ul>
        </div>
      );
    };
    function render() {
      ReactDOM.render(<Aspp></Aspp>, document.querySelector("#app"));
    }
    render();