react基础_react基础语法 - CSDN
  • React 基础(一)

    2018-05-04 16:20:12
    一、简介React起源于Facebook的内部项目,该公司积极尝试引入...他们就自己开发了React框架。ReactJS官方地址:https://facebook.github.io/react/GitHub地址:https://github.com/facebook/reactreact特点:虚拟DO...

    一、简介

    React起源于Facebook的内部项目,该公司积极尝试引入HTML5技术用来架设Instagram网站,开发中发现HTML5的性能下降明显,达不到预期的效果。他们就自己开发了React框架。

    ReactJS官方地址:https://facebook.github.io/react/

    GitHub地址:https://github.com/facebook/react

    react特点:

    • 虚拟DOM: React也是以数据驱动的,每次数据变化React都会扫码整个虚拟DOM树,自动计算与上次虚拟DOM的差异变化,然后针对需要变化的部分进行实际的浏览器DOM更新。
    • 组件化: React可以从功能角度横向划分,将UI分解成不同组件,各组件都独立封装,整个UI是由一个个小组件构成的一个大组件,每个组件只关系自身的逻辑,彼此独立。
    • 单项数据流:React设计者认为数据双向绑定虽然便捷,但在复杂场景下副作用也是很明显,所以React更倾向于单向的数据流动-从父节点传递到子节点。(使用ReactLink也可以实现双向绑定,但不建议使用)

    二、HelloWord 程序搭建

    下载所需文件

    首先我们访问 https://facebook.github.io/react/,在页面中单击网页左上角的React版本(课程录制时是v15.6.1)。点击后下载两个文件。

    • react.js:实现React核心逻辑,且于具体的渲染引擎无关,从而可以跨平台公用。如果应用要迁移到React Native,这一部分逻辑是不需要改变的。
    • react-dom.js:包含了具体的DOM渲染更新逻辑,以及服务端渲染的逻辑,这部分就是与浏览器相关的部分了。

    展开全文
  • react基础教程

    2020-01-14 10:13:56
    react基础教程

    • 学习资源推荐:https://blog.csdn.net/qq_42813491/article/details/90213353

    官网

    • https://react.docschina.org/
      在这里插入图片描述

    • 官方教程:https://react.docschina.org/tutorial/tutorial.html

    • 介绍什么的就不说了,从代码开始

    安装

    • 在此之前,请确保已经安装了node.js.
    • cmd输入node -v 显示版本号表示已成功安装
    • node官网:https://nodejs.org/en/
      在这里插入图片描述
    • 快速开始
    npx create-react-app my-app
    cd my-app
    npm start
    
    • 注意,安装是外网安装,建议使用镜像,不然会很慢

    • 详情可参考:https://blog.csdn.net/qq_42813491/article/details/90311075

    • 以上三个命令执行完,显示以下界面表示脚手架安装成功
      在这里插入图片描述

    • 这是主界面,跑在3000端口
      在这里插入图片描述

    目录结构

    在这里插入图片描述

    • 都很常见,不多介绍了

    hello world

    • src下一些没用的可以删掉,如下:看起来对新手更友好

    在这里插入图片描述

    • index.js入口文件和下边的服务器相关配置文件不要动了,css什么的可以删掉
    • APP.js
    import React from 'react'
    
    class App extends React.Component{
    
      render(){
        return <h1>hello world</h1>
      }
    
    }
    
    export default App;
    
    • 也可以这样
    import React, {Component}from 'react'
    
    class App extends Component{
    
      render(){
        return <h1>hello world</h1>
      }
    
    }
    
    export default App;
    
    • 效果图
      在这里插入图片描述

    • 注意点

    • render里边是html+js混写的jsx语法,HTML标签不需要加引号

    • 最外层一定要有个根标签包裹,最好再加上一个圆括号

    • 单标签必须封闭
      *

    组件化

    虽然render函数里边就可以直接写模板,但是通常不会把一切东西都放进去.不利于维护,也不美观,常用的自然是组件化开发。

    • 修改目录结构,src下新建components文件夹,用来放各个组件
      注意,规范中组件名大写,且以js或jsx为后缀名,就像.vue 文件一样

    • 可能你的编辑器写完了是这样的
      在这里插入图片描述

    • 颜色怪是语法识别问题,把编译环境换成jsx就好了

    • 组件定义完记得暴露出去,APP界面用import导入,然后挂载使用

    在这里插入图片描述

    • 效果图
      在这里插入图片描述

    • 数据的定义和使用,类似vue的data

    在这里插入图片描述

    • 直接在render里边写会有警告,应该写在构造函数里边
      在这里插入图片描述

    图片和样式表的引入

    • 图片资源分为本地和远程,加载远程资源直接src引入图片地址就可以
    • 记得加alt属性,不然会有警告
     <img alt="logo"src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75"/>
    

    在这里插入图片描述

    • 本地图片加载和本地样式表加载是路径引入的方式

    *import logo from './logo.png'
    <img alt="logo" src={logo}/>

    • {}是react的jsx语法环境
    • import style from './style.css'
      在这里插入图片描述
    展开全文
  • React基础学习(一)

    2020-01-16 11:22:34
    文章目录一、什么是React1.1 特点1.2 React的使用1.3 实例二、 React脚手架2.1 React脚手架意义2.2 使用React脚手架初始化项目2.3 脚手架中使用React三、`JSX`的使用3.1 概述`JSX`产生的原因`JSX`的概述3.2 简单入门...

    一、什么是React

    React是一个用于构建用户界面的javaScript库,起源于facebook的内部项目,后续在13年开源了出来

    1.1 特点

    • 声明式

    你只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI

    • 基于组件

    组件时React最重要的内容,组件表示页面中的部分内容

    • 学习一次,随处使用

    使用React可以开发Web应用,使用React可以开发移动端,可以开发VR应用,可以结合react-native angular-ionic、vue-weex

    1.2 React的使用

    • 引入react和react-dom的两个js文件
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    
    • 创建React元素
    // 创建元素节点
    // 1. 元素名称
    // 2. 元素属性 传递的是个对象
    // 3. 元素内容
    let title = React.createElement('li', null, 'hellow react');
    
    • 渲染到页面
    // 渲染到页面
    ReactDOM.render(title, root)
    

    1.3 实例

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    
    <body>
      <div id="root"></div>
      <!-- 1、引入js文件 -->
      <script src="./node_modules/react/umd/react.development.js"></script>
      <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    
      <script>
    
        // 2、创建react元素 
        // 参数1:元素名称  
        // 参数2:元素属性   
        // 第3个及以后的参数:元素的子节点
        // const title = React.createElement('h1', { title:'标题', id:'1' }, 'hello world!')
        const title = React.createElement('h1', { title: '标题', id: '1' }, 'hello world!', React.createElement('span', null, '我是span里的文本'))
    
        // 3、渲染react元素 
        // 参数1:要渲染的react元素  
        // 参数2:挂载点
        ReactDOM.render(title, document.getElementById('root'))
    
      </script>
    </body>
    
    </html>
    

    二、 React脚手架

    2.1 React脚手架意义

    • 脚手架是开发现代Web应用的必备
    • 充分利用 Webpack,Babel,ESLint等工具辅助项目开发
    • 零配置,无需手动配置繁琐的工具即可使用
    • 关注业务,而不是工具配置

    2.2 使用React脚手架初始化项目

    • 初始化项目,命令: npx create-react-app my-pro

      • npx目的:提升包内提供的命令行工具的使用体验
      • 原来:先安装脚手架包,再使用这个包中提供的命令
      • 现在:无需安装脚手架包,就可以直接使用这个包提供的命令
      • create-react-app 这个是脚手架名称 不能随意更改
      • my-pro 自己定义的项目名称
    • 启动项目,在项目根目录执行命令:npm start

    • yarn命令简介

      • yarn 是Facebook发布的包管理器,可以看做是npm的替代品,功能与npm相同
      • yarn具有快速,可靠和安全的特点
      • 初始化新项目:yarn init
      • 安装包: yarn add 包名称
      • 安装项目依赖: yarn

    2.3 脚手架中使用React

    • 导入reactreact-dom两个包
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    • 创建元素
    const text = React.createElement('h1', null, 'hello react')
    
    • 渲染元素
    ReactDOM.render(text, document.getElementById('root'))
    
    • index.js中输入下面代码会自动显示在浏览器中
    //  1.导入模块
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 2.创建元素
    const text = React.createElement('h1', null, 'hello react')
    
    // 3.渲染到页面
    ReactDOM.render(text, document.getElementById('root'))
    
    

    三、JSX的使用

    3.1 概述

    JSX产生的原因

    由于通过createElement()方法创建的React元素有一些问题,代码比较繁琐,结构不直观,无法一眼看出描述的结构,不优雅,用户体验不爽

    JSX的概述

    JSXJavaScript XML 的简写,表示在JavaScript代码中写HTML格式的代码

    优势:声明式语法更加直观,与HTML结构相同,降低了学习成本,提升开发效率

    3.2 简单入门使用

    使用步骤

    • 使用JSX语法创建react元素
    let text = <h1>我是通过JSX创建的元素</h1>
    
    • 使用ReactDOM来渲染元素
    ReactDOM.render(text,document.getElementById('root'))
    

    为什么在脚手架中可以使用JSX语法

    • JSX 不是标准的ECMAScript语法,它是ECMAScript的语法拓展
    • 需要使用babel编译处理后,才能在浏览器环境中使用
    • create-react-app脚手架中已经默认有该配置,无需手动配置
    • 编译JSX语法的包: @bable/preset-react

    注意点

    • React元素的属性名使用驼峰命名法
    • 特殊属性名:class -> classNamefor -> htmlFortabindex -> tabIndex
    • 如果没有子节点的React元素可以用 /> 来结束
    • 推荐:使用小括号包裹JSX,从而避免JS中自动插入分号报错

    3.3 JSX语法

    JSX是来描述页面的结构,我们一般在编写业务逻辑渲染页面的时候,需要涉及到传递值,调用函数,判断条件,循环等,这一些在JSX中都能得到支持

    3.3.1 嵌入JS表达式

    语法:{JavaScritp表达式}

    例子:

    let content = '插入的内容'
    let h1 = <h1>我是通过JSX创建的元素+ {content}</h1>
    

    注意点

    • 只要是合法的js表达式都可以进行嵌入
    • JSX自身也是js表达式,也可以被嵌入
    • 注意:js中的对象是一个例外,一般只会出现在style属性中,用于设置行内样式
    • 注意:在{}中不能出现语句(if / for)

    3.3.2 条件渲染

    根据不同的条件来渲染不同的JSX结构

    let isLoading = true
    let loading = ()=>{
        if(isLoading){
            return <div>Loading...</div>
        }
        return <div>加载完成</div>
    }
    

    可以发现,写JSX的条件渲染与我们之前编写代码的逻辑是差不多的,根据不同的判断逻辑,返回不同的 JSX结构,然后渲染到页面中

    3.3.3 列表渲染

    • 如果需要渲染一组数据,我们应该使用数组的 map () 方法
    • 注意:渲染列表的时候需要添加key属性,key属性的值要保证唯一
    • 原则:map()遍历谁,就给谁添加key属性
    • 注意:尽量避免使用索引号作为key
    let arr = [{
        id:1,
        name:'三国演义'
    },{
        id:2,
        name:'水浒传'
    },{
        id:3,
        name:'西游记'
    },{
        id:4,
        name:'红楼梦'
    }]
    let ul = (<ul>
        {arr.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>)
    ReactDOM.render(ul,document.getElementById('root'))
    

    3.3.4 样式处理

    行内样式 -style

    在style里面我们通过对象的方式传递数据

    // 双大括号与vue的不同,第一个是jsx语法,第二个是里面是对象
    <li key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}
    </li>
    

    这种方式比较的麻烦,不方便进行阅读,而且还会导致代码比较的繁琐

    类名 -className

    创建CSS文件编写样式代码

    .container {
        text-align: center
    }
    

    在js中进行引入,然后设置类名即可

    import './css/index.css'
    
    <li className='container' key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>
    

    小结

    • JSXReact的核心内容
    • JSX表示在JS代码中写HTML结构,是React声明式的体现
    • 使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构
    • 推荐使用className的方式给JSX添加样式
    • React完全利用JS语言自身的能力来编写UI,而不是造轮子增强HTML功能
    展开全文
  • React基础知识

    2020-06-12 13:59:17
    React.Fragment 在不额外创建DOM元素的情况下,让render()方法返回多个元素 render() { return ( <React.Fragment> <p>Hello World</p> </React.Fragment> ); } 也可以使用简写语法 ...

    React.Fragment

    在不额外创建DOM元素的情况下,让render()方法返回多个元素
    根节点可以用<React.Fragment> </React.Fragment>或简写方式 <> < />表示

    render() {
      return (
        <React.Fragment>
          <p>Hello World</p>
        </React.Fragment>
      );
    }
    

    也可以使用简写语法

    render() {
      return (
        <>
          <p>Hello World</p>
       < />
      );
    }
    

    Refs

    勿过度使用Refs

    创建Refs

    Refs 是使用 React.createRef() 创建的,并通过 ref 属性附加到 React 元素。

    • 当 ref 属性用于 HTML 元素时,构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
    • 在componentDidMount函数中通过访问dom让文本框处于激活状态
    class Demp extends React.Component {
      constructor(props) {
        super(props);
        //  创建一个 ref 来存储 textInput 的 DOM 元素
        this.inputRef = React.createRef();
      }
    
      render() {
        return <input type="text" ref={this.inputRef} />;
      }
    
      componentDidMount() {
         // 直接使用原生 API 使 输入框获得焦点
        // 注意:我们通过 "current" 来访问 DOM 节点
        this.inputRef.current.focus();
      }
    }
    

    回调Refs

    React 也支持另一种设置 refs 的方式,称为“回调 refs”。

    function CustomTextInput(props) {
      return (
        <div>
          <input ref={props.inputRef} />
        </div>
      );
    }
    class Parent extends React.Component {
      render() {
        return (
          <CustomTextInput
            inputRef={el => this.inputElement = el}
          />
        );
      }
    }
    
    展开全文
  • react 之零基础入门

    2019-07-11 10:13:20
    付出,不一定会有收获;不付出,却一定不会有收获,...import React from "react" import {Component) from 'react' class Comp1 extends Component{ constructor(..args){ super(..args) } render(){ ...

    付出,不一定会有收获;不付出,却一定不会有收获,不要奢望出现奇迹

    react 组件写法非常简单

    import React from "react"
    import {Component) from 'react'
    
    class Comp1 extends Component{
    	
    		constructor(..args){
    			super(..args)
    		}
    
    		render(){
    			return(
    				<div></div>
    			);
    		}
    }
    
    export default Comp1;
    

     以上就是jsx 写法,顾名思义就是js + xml ,

    其中render 方法返回值,就是jsx 写法,我的理解就是写html 无非, class 变成className for 变成htmlFor 本质没啥不通

    感觉就是在写js ,写多了,也就会了!

    ————————————————————————————————

    组件的引用也非常简单,

    引入使用,就行了

     

    比我们的vue 少了一部,就是注册,vue中还要在component 中注册!

     

    ————————————————————————————————————————————

     

     

    以上都不重要,都是细节小知识点,随便找个教程都能很轻松的学会,这也是现在社会的好处,资源到处都有,就像我一样

    基本上啥都有,所以各位看客,需要任何虚拟资料都可以加我qq 1981389505 去免费获取所要的资料,

    因为我有一套爬虫系统支撑,不扯了,我们继续

    ————————————————————————————————————————————

    下面是 ,两个重点,就是  redux (全局 的状态管理) ---

    react于VUE类比
    功能 react vue
    状态管理  redux vuex
    路由 react-router-dom vue-router

     

    我们无论去使用那个组件技术,上面的 状态管理和路由都必须拿下,要不然,你基础都不会也跑不起来嘛

    所以不要着急,我们一点点前行!

     

    下面就是redux使用!

    我们先画一个整体的流程图:

     

    上面是我用画图软件画的,是有点Low,凑合看吧!

     

    
    
    import {createStore} from 'redux';
    
    
    // 处理请求的回调方法,我感觉很开心,因为一次性就把redux 的写法写正确了,可见我的js 水平很高
    function reducer1(state,action){
    	if(!state){
    		state = {
    			name:'xiaoming',
    			age:28
    		}
    	}
    
    	const type = action.type;
    	switch(type){
    		case "show":
    		return {
    			...state,
    			name:action.param
    		}
    		break;
    	}
    	return state;
    }
    
    const store = createStore(reducer1);
    
    export default store;

     

     

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    import App from './App';
    
    import store from './store'
    import {Provider} from "react-redux"
    
    ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
    

     

    以上两文件,第一个文件,定义的就是全局的状态管理器

    第一个文件包含了,全局的状态管理函数!

     

    全局数据放state 中, 对数据的操作,都交给 上面的switch 中去处理!

    第二个文件主要时<Provider/> 谁被它包裹,谁就拥有了连接全局资源的权利,谁就用于了数据,和对数据处理函数!

     

    App.js

    导出的时候,这么写就行

    数据都在state 中了,

    对数据的处理函数,你可以自己写,上面的show 方法就是一个action

    调用

    最终会到了reducer 函数中

    根据action 的类型处理对应的逻辑!

    好,大概就是组件连接全局状态器

     

    发送action ,一个大JSON就是一个action ,然后reducer 函数,根据action。类型去处理对应的数据!

     

    redux 就略讲到这里,没基础的肯定看不懂这篇,只有看视频了!

    建议去看:

    http://www.itjiaocheng.com/youzhi/25805.html

    看第六期就行了,里面讲的很清楚!(标注不是做广告)

    因为我所学的都是从石川那里学的,很清晰!

    这篇先写到这里,下一个就是react 的路由,我觉得有必要去搞清楚

    基本写法, 嵌套写法,接受参数??

    我们放到下一篇

    再次一个格言: 

    每个人都会累,没人能为你承担所有悲伤,人总有一段时间要学会自己长大

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • react 基础

    2020-07-29 14:34:01
    ,类似模板语法,应用于react跨年中 --> <!-- (): js中编写jsx语法时,遇到标签结构要换行的时候,用 () 包裹起来 --> <!-- 组件 1. class类的形式创建组件 2. Hook的形式创建组件 组件可以是js 也可以...
  • React基础

    2019-01-15 16:08:38
    React的注意点 一般采用import的方式引入ReactReact首字母规定大些,因为jsx会继承大写的React 会根据尖括号(&amp;amp;amp;amp;amp;lt;)来判断是一个html,根据花括号({)来判断是一个js js中的保留字 ...
  • React基础入门详解

    2019-05-27 23:01:06
    React项目的创建 1、 运行 cnpm i react react-dom -S 安装包 2、 在项目中导入两个相关的包: // 1. 在 React 学习中,需要安装 两个包 react react-dom // 1.1 react 这个包,是专门用来创建React组件、组件生命...
  • 今天给朋友们带来笔者的react基础知识的一个小整理,内容可能有点乱。。。请勿喷。。。如果想搜索您想搜索的东西可以ctrl键+F键快速查找。 Fragment,一个特殊的包裹,如果你不想让你的组件最外层有标签包裹的话...
  • react基础知识资源文档,es6基础知识文档、react知识点总结归纳
  • 一、react基础介绍 1、参考网址: 英文官网:https://reactjs.org/ 中文官网: https://doc.react-china.org/ 2.介绍描述 用于构建用户界面的 JavaScript 库(只关注于View) ReactJS是由Face...
  • React基础知识点汇总

    2019-01-21 10:12:51
    核心:组件系统,all in js,自动更新dom,三个阶段,十一个钩子函数,更新状态,react中的事件,可控和不可控组件 1.React概述  React是facebook于2013年6月推出的一个库  其要解决的问题是构建数据不断变化的...
  • react基础知识点整理

    2018-07-20 13:11:20
    react的优点: 1、React速度很快:它并不直接对DOM进行操作,引入了一个叫做虚拟DOM的概念,安插在 javascript逻辑和实际的DOM之间,性能好。 2、跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了...
  • 使用react的网页源码结构: !DOCTYPE html> html> head> script src="../build/react.js">/script> script src="../build/react-dom.js">/script> script src="../build/browser.min.js">/script>
  • React基础语法学习

    2016-06-23 13:26:48
    React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 数据流(Date Flow)单向数据流 学习React需要掌握...
  • React基础(未完结)

    2017-08-17 09:52:54
    观看ReactJS中文基础视频教程中关于react的教程,做了如下笔记。React是由工作在Facebook的优秀程序员开发出来的用于开发用户交互界面的JS库,React带来了很多新的东西如组件化、JSX、虚拟DOM等。其提供的虚拟DOM...
  • 由于 RN 环境过于麻烦,所以这里先尝试 React,有不对的还望不吝赐教 React 安装请查看官网 渲染 JSX React 的模板语法是 JSX,看起来很像是 JS+HTML 的混血儿。具体的语法这里就不再赘述,想了解的话,...
  • react基础--面试题

    2019-06-11 20:26:02
    React中的 keys 是什么?为什么他们很重要 shouldComponentUpdate 应该做什么,为什么他很重要 可以选择性的传递 setState的第二个参数是什么,它的作用是什么 写一下对 redux 的工作原理的理解,以及 redux 中间件...
  • React-Router Axios AntD 暴露webpack配置 less-loader 修改less-loader React-Router yarn add react-router-dom less文件的配置 首先暴露webpack的配置 yarn eject 配置less-loader 文件: webpack.config.dev....
  • React基础语法 1.什么是React 2.React组件 3 State和Props 4 React组件生命周期 1、React React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)...
1 2 3 4 5 ... 20
收藏数 47,183
精华内容 18,873
关键字:

react基础