zoukankan      html  css  js  c++  java
  • React教程(一) React介绍与搭建

    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 可以一句话帮你开启一个静态服务器

  • 相关阅读:
    被老板批评“公司离开谁都照转,谁的工作干不好谁走人”,你会立马辞职吗?
    开课啦 dubbo-go 微服务升级实战
    如何通过 Serverless 提高 Java 微服务治理效率?
    Alluxio 助力 Kubernetes,加速云端深度学习
    收藏!这些 IDE 使用技巧,你都知道吗
    基于 Wasm 和 ORAS 简化扩展服务网格功能
    基于 KubeVela 与 Kubernetes 打造“无限能力”的开放 PaaS
    Kubernetes 稳定性保障手册 -- 日志专题
    Kubernetes 稳定性保障手册 -- 极简版
    Serverless 如何在阿里巴巴实现规模化落地?
  • 原文地址:https://www.cnblogs.com/dididi/p/10774553.html
Copyright © 2011-2022 走看看