美文网首页
Hello React

Hello React

作者: 多彩的鱼 | 来源:发表于2017-03-31 13:49 被阅读0次

知识点

1、JSX语法
     2、React基本语法
     3、bower的基本使用
     4、babel的基本使用

开启react之旅

一、你好react

1、准备工作:创建一个项目文件夹,目录结构如下显示。

目录结构
        注意:lib文件是使用bower安装插件文件时候自动生成的,不需要手动进行创建。
        2、bower工具的使用
          a、安装nodejs环境
          b、安装cnpm,使用cnpm或者npm命令安装bower插件。具体命令:cnpm/npm install bower -g
          c、在项目中使用bower,首先创建bower的配置文件,打开dos窗口(win+r ---> cmd),window下使用命令, echo {"directory":"lib"} > .bowerrc 进行创建,然后使用命令bower init 进行初始化,一路默认即可,详细 配置请看bower官网( http://www.bower.io )。最后安装需要使用的插件,例如jquery,bower install jquery --save
          说明:{"directory":"lib"} 指定bower安装插件的位置,bower安装插件的时候会自动将插件下载到lib目录下,当你不确定bower中是否存在某一插件的时候,使用bower info 插件名 命令能够在bower中调出插件的信息(版本和git地址),bower安装命令的--save指令,表示将安装的插件信息保存到bower.json文件中,作为以后使用bower升级插件的版本依据。
        3、开启react之旅
          a、使用bower 安装react,babel。安装以后的目录结构如下:
bower安装依赖目录结构
          b、在index中依次引入react核心包react.js和react-dom.js,babel转换包bowser.js。
详细代码段
建立一个div,id为main,建立一个javascript代码段,类型为text/babel调用方ReactDOM的render方法,如上图。使用react将h1标签渲染到main div中并显示。打开浏览器进行浏览,效果如下: 第一个React效果

相关文章

  • Hello - RN

    Hello React-Native 导入 引入react 的 Component 抽象组件 引入react-n...

  • React网址

    React文档: https://react.docschina.org/docs/hello-world.html

  • Hello React

    知识点 1、JSX语法     2、React基本语法     3、bower的基本使用     4、babel的...

  • Hello React

    一、 开发环境配置(Mac) 1. node.js 安装 (node + npm) 2. 官方脚手架工具 crea...

  • Hello React!

    项目创建成功之后,会生成一个文件夹,文件夹里有很多文件,对文件进行简要介绍。 启动上次创建好的项目,在项目目录执行...

  • Hello React!

    React教程 React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI,很多...

  • Hello React

    一、原生js操作dom 二、react实现hello world 第一步:按顺序引入依赖 第二步:将type类型写...

  • 最强React精讲教程+源码,资源地址⬇️

    React_模块化,组件化介绍.avi React_hello React.avi React_虚拟DOM对象, ...

  • CDN React

    目录CDN 3 个React CDN Hello WorldReact CDN 卡片组件 CDN React 与其...

  • React-Native入门指南 - 完整版

    React-Native入门指南 [Lession1: Hello React-Native](http://vc...

网友评论

      本文标题:Hello React

      本文链接:https://www.haomeiwen.com/subject/vjfvottx.html