初识React

2018-10-09  本文已影响0人  追逐_e6cf

一、插件或框架的好处

       从久远的时代到现在，我们的网页更加动态化与强大，大家在学习的过程中，发现或了解过很多很多的插件或框架，用过的都知道，方便、快速、简单上手快、重用性高、维护成本低、兼容性好、稳定性强
       这些插件或框架的出现，是因为JavaScript的越来越强大，都成为服务端语言了。在之前我们开发大型的项目，由于业务逻辑非常复杂，html结构累赘，css样式庞大，造成了资源的浪费，性能低下，速度慢体验差，开发维护迭代成本大，没有正规的项目组织形式，所以大佬们为了解决传统开发项目导致的一系列问题，我们所熟知的这些框架就应运而生了，例如前端三大框架 angularJS，vueJS，reactJS等

二、React版本

1.angularJS

2.reactJS和VueJS

有很多的相似之处：

VueJS：

安卓开发 IOS开发 原生APP (动画流畅)

软件打包APP

react-native开的APP 接近于原生APP

ReactJS：

vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。 单向数据绑定是使用状态管理工具（如redux）的前提。如果我们使用vuex，那么数据流也是单向的
两者并不互斥， 在全局性数据流使用单向，方便跟踪
局部性数据流使用双向，简单易操作。处理表单，vue的双向数据绑定用起来就特别舒服了

四、ReactJS学习

React基础

2015年6月， ES2015（即 ECMAScript 6、ES6） 正式发布。虽然 ES6 提出了许多激动人心的新特性，但那时许多浏览器不支持或者支持不好，没有普遍地推广起来。
而 Babel 的出现，让我们可以现在就使用最新的 JavaScript 语法，而不用等待浏览器提供支持。
Babel 是一个转换编译器，它能将 ES6 转换成可以在浏览器中运行的代码。Babel 可以处理 ES6 的所有新语法，并且内置了 React JSX 扩展及 Flow 类型注解支持。
在线语法转换

由于 Babel 本身的设计是基于 node.js 环境下运行使用的，而这个名为 babel-standalone 的开源项目，则支持非 node.js 环境下使用 Babel。
babel-standalone 已经包含了 Babel 所有的插件，其体积还是很大的（目前版本 6.26.0，未压缩的 js 文件 1.78MB，压缩了则为 772kb）。
使用这个类库，可以让我们实时在线转换 es6 为 js，同时支持 babel 提供的各种插件，而且最关键的是全特性支持，包括 amd 包裹，将 import 转换为 amd 的 require 等等。

1.安装nodeJS
       去官网下载
       node -v
       npm -v 包管理工具 国外的，下载极其慢
2.全局安装cnpm，并设置淘宝镜像
       国内的包管理工具，很快
       npm install -g cnpm --registry=https://registry.npm.taobao.org
3.卸载模块
       npm uninstall Name
       cnpm uninstall Name
4.安装react依赖模块（测试环境，快速上手）
       cnpm init -y 定义项目所需要的各种模块及配置信息
       cnpm i react react-dom babel-standalone -S
       -S => --save 表示生产环境也需要使用的模块
       -D => --save-dev 表示只在开发环境用到的模块

<script src="./node_modules/babel-standalone/babel.js"></script>
<script>
    //手动使用babel转换
    // let es6 = 'const fn = () => "Hello World"';
    // let es5 = Babel.transform(es6, {presets:['es2015']}).code;
    // console.log(es5);

    // let es6 = `let {name, age} = {
    //     name : '张三',
    //     age : 18
    // }`;
    // let es5 = Babel.transform(es6, {presets:['es2015']}).code;
    // console.log(es5);
</script>

<script type="text/babel">
    //浏览器能够识别react语法是要在基于babel
    let {name, age} = {
        name:'张三',
        age:18
    }
    console.log(name, age)
</script>

    <!-- 入口-->
    <div id="app"></div>
    <script src="./node_modules/babel-standalone/babel.js"></script>
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        
        //console.log( ReactDOM )
        // 利用 babel 把h1标签 渲染到 #app标签里面
        // 在讲react脚手架前 都是利用此种方法 学习 react基本语法
        ReactDOM.render(<h1>hello world</h1>,document.querySelector('#app'));
    </script>
上一篇 下一篇

猜你喜欢

热点阅读