react课堂笔记一之react介绍与环境搭建

本文详细介绍了React开发环境的搭建过程,包括Node.js的安装、使用cnpm或yarn替代npm,以及通过create-react-app创建项目。同时,深入解析了npx命令的用途,如何简化React项目的创建流程。
摘要由CSDN通过智能技术生成

React的介绍:
        React来自于Facebook公司的开源项目

        React 可以开发单页面应用       spa(单页面应用)

        react 组件化模块化  开发模式

        React通过对DOM的模拟(虚拟dom),最大限度地减少与DOM的交互  (数据绑定)

        react灵活  React可以与已知的库或框架很好地配合。

        react 基于jsx的语法,JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,  html  js混写模式
搭建React开发环境之前的准备工作。
    1、必须安装nodejs      注意:安装nodejs稳定版本
    2、安装cnpm用cnpm替代npm

        地址:http://npm.taobao.org/
        安装cnpm:

            npm install -g cnpm --registry=https://registry.npm.taobao.org

    3、用yarn替代npm

        yarn的安装:

            第一种方法:参考官方文档https://yarn.bootcss.com/
            第二种方法:cnpm install -g yarn  或者 npm install -g yarn

搭建React开发环境的第一种方法(老-现在推荐):

    https://reactjs.org/docs/create-a-new-react-app.html

    1、必须要安装nodejs     注意:安装nodejs稳定版本      教程中的nodejs版本:v8.11.2            教程中的npm版本:v5.6.0

    2.安装脚手架工具   (单文件组件项目生成工具)   只需要安装一次

        npm install -g create-react-app   /  cnpm install -g create-react-app
    3.创建项目   (可能创建多次)

        找到项目要创建的目录:

        create-react-app reactdemo

    4.cd  到项目里面    
        cd  reactdemo
        npm start             yarn start运行项目
        npm run build         yarn build 生成项目
搭建React的开发环境的第二种方法(新-未来推荐):

    https://reactjs.org/docs/create-a-new-react-app.html

    1、必须要安装nodejs     注意:安装nodejs稳定版本      教程中的nodejs版本:v8.11.2            教程中的npm版本:v5.6.0

    2.安装脚手架工具并创建项目
        找到项目要创建的目录执行:

        npx create-react-app reactdemo

    4.cd  到项目里面    
        cd  reactdemo
        npm start  运行项目(调试)
        npm run build 生成项目(发布)

npx介绍:

    npm v5.2.0引入的一条命令(npx),引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。

详情:
    http://www.phonegap100.com/thread-4910-1-1.html

    npx create-react-app reactdemo这条命令会临时安装 create-react-app 包,命令完成后create-react-app 会删掉,不会出现在 global 中。下次再执行,还是会重新临时安装。
    npx 会帮你执行依赖包里的二进制文件。

    再比如 npx http-server 可以一句话帮你开启一个静态服务器

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值