react

作者: Yaoxue9 | 来源:发表于2018-06-19 21:55 被阅读9次

React初步
一、React是什么:
即:facebook公司开发出的基于用户界面的javaScript框架
相关文档:

React官网:https://reactjs.org/
react-router:https://reacttraining.com/react-router/web/guides/philosophy
redux:https://redux.js.org/
react官方中文文档:https://doc.react-china.org/
redux中文文档:http://www.redux.org.cn/
https://www.cnblogs.com/ye-hcj/p/7191153.html
运行一个react程序
安装react脚手架

npm install -g create-react-app 相当于vue 脚本架安装 npm install vue-cli -g

创建一个项目

create-react-app 项目名 //注意有大写字母

create-react-app my-app

3.运行项目

cd 进入项目目录 例如:cd my-app
运行:npm start

  注:默认监听端口号:3000

解压react脚本架配置:

npm run eject   

react入口js: index.js

jsx: 相当于html

      <div class="box">
              <h2>我是标题</h2>
              <ul>
                    <li>列表1</li>
                     <li>列表2</li>
             </ul>
    </div>

JS对象:


tag:"div" ,
attrs:{class:"box},
children:[
{
tag:"h2",
attrs:"",
children:["我是标题"]
},
{
tag:"ul",
attrs:"",
children:[
{}

          ]
           }
   ]


虚拟DOM:直接操作JS 对象,将最后差异结果(diff算法)最终再更新到DOM元素

react样式处理:

css写法:import './header.css';

js对象写法:

js对象样式文件:

                let styles={
                
                      w100:{
                          width:'100px'
                      },
                      fl:{
                          float:'left'
                      },
                      bgRed:{
                          background:"#f00",
                          height:"100px",
                          display:"flex",
                          justifyContent:"center",
                          alignItems:"center"
                      }
                };
        
export default styles;

引入js对象样式文件:

import styles from './style';

相关文章

  • React基础

    react 教程 react 组件介绍 react state 介绍 react Props 介绍 React:组...

  • 学习react no.1

    学习react no.1 react 定义 react 特点 react

  • React Native 学习之路

    React 相关资料 React Components React Properties React State ...

  • React基础

    React包含react元素和react组件 react元素 react组件 react组件分为函数组件和类组件 ...

  • React面试题 整理脑图

    react基础 React生命周期 react-router react进阶 react Hooks redux 其他

  • react 导入中的 as

    import React from 'react'只导入 是 React。 而import * as React ...

  • ES5与ES6小结部分

    1var React=require('react'); 等价 import React from ' react...

  • React DnD基础概念和整体架构

    React DnD 的英文是 Drag and Drop for React。React DnD 是 React ...

  • React

    React 《React 官网文档》 React简介 React概念 React官网学习实践 - jSX简介 Re...

  • React学习笔记_01

    React 基础组件 react概述 npm i react react-dom react包 是核心,提供创建元...

网友评论

      本文标题:react

      本文链接:https://www.haomeiwen.com/subject/cwvzeftx.html