引入

yarn global add create-react-app

创建项目

create-react-app react-demo01

在目录中，您可以运行以下命令：

  yarn start
  // 启动开发服务器。  
  yarn build
 // 打包
  yarn test
 // 测试
  yarn eject
 // 删除此工具，并将构建依赖项，配置文件和脚本复制到app目录中。如果这样做，您将无法返回！

在 src 目录里面只保留index.js 其他的都可以删掉。

这样就引入了react。

回顾 JS 的 6个6

let i 
for(i=0;i<6;i++){
    setTimeout(()=>console.log(i),1000)
}
// 执行出来是 6个6 不信你可以去执行以下？

为什么会执行出6个6 呢。原因是 for 是一个同步任务，setTimeout是一个异步任务，里面的函数要等 setTimeout 执行时才会调用，当for 循环到 i=6 是结束循环，这时候才会去执行 setTimeout 所以会打出6个6。

如何解决这个问题呢我们可以执行下面的代码

方法一：

let i 
for(i=0;i<6;i++){
    let j = i
    setTimeout(()=>console.log(j),1000)
}
// 执行 0 1 2 3 4 5

这里面 let 声明的变量的作用域在 for()｛这里｝。for的每次循环都会让let j 新开一个作用域。这样就保留了 0-5的值。这里就有一个语法糖。

for( let i=0;i<6;i++){
    setTimeout(()=>console.log(i),1000)
}

方法二运用立即执行函数

for( var i=0;i<6;i++){
    setTimeout(
        !function(j){ // 这里的j是形参
            console.log(j);
        }(i)
    )
}

创建完项目后，整个项目只留下以下目录

35 React起手式 - 图1

使用小贴士：