React一——起源、安装、jsx

reclay 发布于2019-08-21 17:54 / 2509人阅读

摘要：起源官网公司出品，因为对市场上所有框架，都不满意，就决定自己写一套，用来架设的网站。而来自的框架正是完全面向此问题的一个解决方案，按官网描述，其出发点为用于开发数据不断变化的大型应用程序。

React 起源

官网：https://doc.react-china.org/d...
Facebook公司出品，因为对市场上所有 JavaScript MVC 框架，都不满意，
就决定自己写一套，用来架设 Instagram 的网站。
做出来以后，发现这套东西很好用，然后13年面世，14年国内引入，
由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单，
同时github受到大量的关注，国内各大公司都会分出专门的人力物力去研究使用。

出发点

基于HTML的前端界面开发正变得越来越复杂，其本质问题基本都可以归结于：
如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。
而来自Facebook的React框架正是完全面向此问题的一个解决方案，按官网描述，其出发点为：
用于开发数据不断变化的大型应用程序（Building large applications with data that changes over time）。

相比传统型的前端开发，React开辟了一个相当另类的途径，实现了前端界面的高性能高效率开发。

安装

a. 脚手架 cnpm i create-react-app -g
b. 创建项目 create-react-app react-app
c. 装好之后src 里只留index.js入口文件
    react 与 react-dom
        react ： react代码的构建
        react-dom:将react代码渲染到页面上
    //渲染主键 挂载点
    ReactDom.render(test,document.getElementById("root"))
d. index.js

    import React from "react"
    import ReactDom from "react-dom"

React概念

React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；，因为MVC耦合度高，性能也不是很好

适用的项目：数据不断变化的大型应用程序？Why?
优点：高性能高效率
React是一个轻量级视图层前端JS框架

无状态组件和有状态组件(高阶组件)

1、无状态组件：例如

const test = function(){

    //情形一
    return test
    
    //显示js逻辑
    let x = "test"
    return {x}
    
    //显示js逻辑2
    let x = "test"
    return (
        
            {x}
            test
        
    )
}
 
ReactDom.render(test(),document.getElementById("root"))

可以看到无状态组件没有定义类 React.createClass 或者class Name extends React.Component 来创建自己的函数组件
直接简写成了一个render函数
省掉了将组建类实例化的过程
无法实现组建的生命周期方法
不支持“ref” ，因为在 React 调用到无状态组件的方法之前，是没有一个实例化的过程的，因此也就没有所谓的 "ref"

2、有状态组件(高阶组件)
我们正常写的组件都可称为有状态组件

React 特点和优势

JSX语法糖

全称为javascript xml，作用，帮助React构建虚拟dom结构，不使用JSX的话，需要使用React.createElement(tagName,options:(id,className),contents..)
例如：

var child1 = React.createElement("li", null, "First Text Content");
var child2 = React.createElement("li", null, "Second Text Content");
var root = React.createElement("ul", { className: "my-list" }, child1, child2);

使用jsx语法会使react开发更为简单，xml指的只是借鉴了一些XML的语法，标签必须闭合，最外层必须有节点包裹

常用语法：

1、定义属性及元素

 var node = (
  
    {
       person ? Welcome back, {person.firstName} {person.lastName}!
       : Please log in
    }
  
);

2、事件绑定

3、样式

Hello World.
或：
    var style = {
      color: "#ff0000",
      fontSize: "14px"
    };
    
    var node = HelloWorld.
;

4、class类名用className

5、遍历

      
        {  
            arr.map(function(name){  
                return {name}
 //必须要return出来否则在dom中不会显示  
            })  
        }     
    
,

6、用Babel进行jsx编译

npm install —save-dev babel-loader

    只需稍微改变一下webpack.config.js的配置，将原来的jsx-loader变为babel-loader：

module: {
  loaders: [
    { test: /.jsx?$/, loaders: ["babel-loader"]}
  ]
}

GPU云服务器云服务器 jsx 起源 jsx 条件 jsx cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90190.html

用eslint + prettier + pre-commit管理项目(React)

摘要：前言人是很懒惰的，你刚开始建立的一个规规整整的项目，可能一段时间过后，就回被你无数次的提交代码弄得凌乱不堪。前言人是很懒惰的，你刚开始建立的一个规规整整的项目，可能一段时间过后，就回被你无数次的提交代码弄得凌乱不堪。就算你能保证你的编码风格严谨统一，别人又该如何，每个人都有不一样的编码风格，要保持统一，就要对项目进行适当的管理正文接下来介绍个React项目简单管理的一个实践： ...

endiat 2019-08-23 10:38 评论0 收藏0
React VR 快速入门完全教程

摘要：快速入门什么是是一个开放源代码的库，为呈现的数据提供了视图渲染。最后，项目根组件应该通过来进行注册，以便能够进行打包和正常运行。基本思想是渲染一个立方体，并将观众置于中心，随后移动。表示从指定方向平均照亮所有物体的光源。 React VR 快速入门什么是React React是一个开放源代码的JavaScript库，为HTML呈现的数据提供了视图渲染。React视图通常使用指定的像H...

andot 2019-08-20 17:16 评论0 收藏0
Webpack 和 React 实战

摘要：首先安装然后在的里面加入和两个命令在建立一个服务器为你的代码创建源地址。更新使用语法编写修改加载器的配置方法将添加文件改为在中配置加载器的配置方法接下来需要配置，告诉我们使用了和插件。 TL;DR $ git clone https://github.com/nodejh/start-react-with-webpack react-sample $ cd react-sample &...

gxyz 2019-08-22 10:47 评论0 收藏0
使用webpack和babel搭建react开发环境

摘要：译文原文来自写在前面使用已经蛮长一段时间但是在新项目开始之际都是东拼西凑其他项目的配置来使用如果要自己从零开始写一个完整项目的配置估计得费死劲所以在发布版本之际正是时候来认真从零开始学习了是一个出自的库用于构建用户交互界面是一个非常厉害的有译文,原文来自https://scotch.io/tutorials/s...写在前面,使用webpack已经蛮长一段时间,但是在新项目开始之际,...

AZmake 2019-08-20 15:58 评论0 收藏0
Webpack系列——手把手教你使用Webpack搭建简易的React开发环境

摘要：在这篇文章中我们开始利用我们之前所学搭建一个简易的开发环境，用以巩固我们之前学习的知识。文章首发于我的github及个人博客，github请看https://github.com/huruji/blo...，转载请注明出处。在这篇文章中我们开始利用我们之前所学搭建一个简易的React开发环境，用以巩固我们之前学习的Webpack知识。首先我们需要明确这次开发环境需要达到的效果：1、...

cucumber 2019-08-22 11:06 评论0 收藏0