React 学习之路-基础项目搭建与环境配置

  嗨，初次见面请多多指教，从React 的学习开始我的第一篇博客......

  首先，需要安装node.js,直接在官网下载,拿走不谢 => node.js官网: https://nodejs.org/en/（选择合适你的电脑的版本），打开并安装程序，如图 =>

  

   根据提示进行安装(npm管理工具会一起安装的)，安装完成以后，打开命令行，输入 node -v 和npm -v 来查看对应的版本号，若显示出恭喜你安装成功

   

  接下来用npm 创建新的项目=>

  首先利用npm 安装 create-react-app 工具，在命令行中输入： npm install -g create-react-app（安装全局的 create-react-app 脚手架工具）

  其次选中指定文件夹使用命令创建新的react 项目： create-react-app my-new-app  

  等待......成功以后看到创建好的文件夹里目录结构如下：

 

       1.node_modules  包含了react项目中会用到的一些组件
     
       2. public  包含了项目的启动页面,也就是react工程的入口页面(打开项目时的首页)

       3. src 包含了一些自己使用的css,js,img文件,index.js 是入口js,和index.html所对应

 

       然后，在命令行中“ cd ”该目录,输入如下命令,部署npm，以及导入react-dom依赖包.

            cmd中输入：

                npm init   （然后一路回车）

                npm install --save react react-dom  ( 在该目录下导入react和react-dom）

                npm install --save  react-router-dom   （react路由，以后会用到）

        npm 获取的时间有点长，建议使用淘宝镜像（淘宝 npm 地址： http://npm.taobao.org/）

        淘宝镜像的使用方法：

        1.临时使用  npm --registry https://registry.npm.taobao.org install express

        2.持久使用  npm config set registry https://registry.npm.taobao.org

        3.通过cnpm 使用 npm install -g cnpm --registry=https://registry.npm.taobao.org

       最后通过 npm start 启动项目，浏览器自动弹出localhost:3000的网页窗口，如图：

       

     好啦，开启React 的探索之路吧......