React学习笔记（一）- 环境搭建

  • Z时代
  • 2024-01-10
  • 分类：综合

react

官网的教程：https://facebook.github.io/react/docs/hello-world.html

1.安装node。

去官网（https://nodejs.org/en/download/）下载最新的稳定版本，我安装的版本是6.11.2。（ps：尽量下载稳定版的，因为我刚弄的时候下载的是最新的版本，然后又一次跑一个命令一直卡在那里不动，后来重新安装了以后才好）。下载安装完以后在cmd界面输入 node -v 可以直接查看版本。

安装node时会自带一个npm的包管理工具，我们可以在命令行通过 npm -v 查看：

国内使用npm很慢，我们可以使用淘宝的镜像来代替原有的，在命令行输入： npm config set registry https://registry.npm.taobao.org  即可设置。

当我们安装好node以后，会自动将node设置系统的环境变量，将npm设置为系统的用户变量，可以在系统环境变量中查看。

      

我们通过npm install -g 安装的模块，都在用户变量（上左图）对应的路径中，比如这里示例下载一个 yarn 工具。

可以在日志信息中看到，刚刚安装的yarn在 {User}/AppData/Roaming/npm 文件夹中（ps：AppData是隐藏的文件夹）：

2.安装create-react-app

安装create-react-app有利于我们快速创建一个react应用，安装命令： npm install -g create-react-app 。安装过程可能会比较慢，因为要下载很多模块及相应的依赖，如果一直卡的话建议检查一下网络设置或者改成淘宝的镜像。

3.创建并运行项目

在cmd中切换至工作空间，输入 create-react-app demo01 创建一个react项目，创建过程比较慢，理由同上。

这里是因为我上一步安装了yarn，所以成功的提示可能与你有所不同。这里我根据提示使用  yarn start 命令启动项目，没有安装yarn的可以输入  npm start

 or  

都可以看到成功的启动了项目：

下载我们根据页面的提示修改一下src/App.js里面的文件并保存，看效果。修改的部分如下：

 <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
         Welcome Tangliuyi Learn React
        </a>

保存后可以看到浏览器实时的改变了：

到目前为止react工程就创建成功了。

以上是 React学习笔记（一）- 环境搭建 的全部内容， 来源链接： utcz.com/z/381264.html

回到顶部