Hello React

知识点

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效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 方式一(快速入手) 1.创建文件夹hello_react创建项目文件夹后将我们之前下载的react build的文...
    者薄阅读 591评论 0 0
  • 开始React 在建立好我们的服务器后,我们就可以开始我们的React学习了, 我们先把Hello-Node文件...
    VoyagerOne阅读 495评论 3 0
  • 这个东西最近比较火,我也忍不住拿来研究一番 安装Nodebrew install node设置镜像npm conf...
    巴依老爷的锅阅读 493评论 0 0
  • 现在我们需要创建一个React-Native的项目,因此可以按照下面的步骤: 打开终端,开始React-Nativ...
    星空梦想阅读 322评论 0 0
  • 早上,出差的队友给我发消息,一大段的品牌,说是他要去的商场,问我有没有什么想要的。我认真的看完了,发现没有一个想买...
    小米腻儿阅读 70评论 0 0