React教程(-一 ) -- 快速构建React开发环境
2018-08-20 本文已影响0人
miner敏儿
React 初接触
一. react的安装
1). 使用方法
可以直接下载使用 <a href="http://facebook.github.io/react/ ">http://facebook.github.io/react/ </a>下载最新
2). 直接使用BootCDN的React CDN库.
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
在.html 文件中直接引用
- react.min.js - React 的核心库
- react-dom.min.js - 提供与 DOM 相关的功能
- babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,
这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。
如果我们需要使用 JSX,则 script标签的 type 属性需要设置为 text/babel。
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')//将一个 h1 标题,插入 id="example" 节点中
);
</script>
二. 使用npm来安装React
系统要支持node.js和npm
先验证有没有安装
node -v
npm -v
国内使用npm速度很慢,可以使用淘宝镜像cnpm命令代替npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用cnpm来安装模块了
cnpm install [name]
使用create-react-app快速构建React 开发环境
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
执行以下命令创建项目:
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
你可以在 <code>src/App.js</code> 文件中修改。
如果我在文件中需要使用react-routes-dom
使用yarn add react-router-dom添加依赖 会在package.json 的dependencies 显示 在node_module中也会有此文件夹
这些东西官网上面都有 , 但是不要只是看,要动手写 ,自己算是刚接触react 做个笔记吧