如何创建自己的第一个React 页面

目录
  • Rract是啥？
  • 背景
  • React脚手架
    • JSX是什么

Rract是啥？

React 是用于构建用户界面的 JavaScript 库

构建用户界面. User Interface，对咱们前端来说，简单理解为：HTML 页面

javscrtipt库。不是框架，是库， react 全家桶才是框架

react 全家桶：

react: 核心库react-dom: dom操作react-router：路由,redux：集中状态管理

背景

Rract最牛逼！全球使用最多

特点

声明式
用类似于html的语法来定义页面。react中通过数据驱动视图的变化，当数据发生改变react能够高效地更新并渲染DOM。

const list = [
  { id: 1, name: '前端', salary: 100000 },
  { id: 2, name: '后端', salary: 50 }
]

const title = (
  <ul>
    {list.map((item) => (
      <li key={item.id}>
        <h3>班级{item.name}</h3>
        <p>工资{item.salary}</p>
      </li>
    ))}
  </ul>
)

组件化（虽然每个框架都有）
组件是react中最重要的内容
组件用于表示页面中的部分内容
组合、复用多个组件，就可以实现完整的页面功能

学习一次，随处使用
使用react/rect-dom可以开发Web应用
使用react/react-native可以开发移动端原生应用（react-native）
使用react可以开发VR（虚拟现实）应用

React脚手架

从零开始 创建一个React项目

先全局安装脚手架工具包

命令：npm i -g create-react-app

用脚手架工具来创建项目

命令：create-react-app 项目名

执行完毕后，我们会得到这样一个文件夹

和Vue框架一样
1.src目录是我们写代码进行项目开发的目录
2.index.js是入口文件

在package.json中 有这么个命令

可以输入

mpn run start
yarn start

运行项目

接下来我们删除src下的所有文件 新建一个 index.js
里面引入react 和 react-dom

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

中间写我们的结构

// 创建元素
const title = React.createElement('h1', {}, 'hello react（createElement写的）')

但是createElement的效率太低了，我们可以使用jsx

JSX是什么

JSX：是 JavaScript XML的缩写。

  • 在 JS 代码中书写 XML 结构
  • 注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法。
  • React用它来创建 UI（HTML）结构

理解：我们之前用html写页面，现在是用jsx来写页面

const title= <h1>HELLO REACT(jsx写的)</h1>

最终我们的代码会在public/index.html 中渲染， 所以我们在底部添加这么一行代码，渲染到页面上 ，webpack会实时自动打包，并把代码嵌入到public/index.html文件中，并执行。

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

通过上面的代码 最终我们的页面都在 public/index.html里的 id=root 的div中渲染

这样我们就写出了自己的第一个React页面

到此这篇关于如何创建自己的第一个React 页面的文章就介绍到这了,更多相关React 创建第一个页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 简谈创建React Component的几种方式

    前言 当我们谈起React的时候,多半会将注意力集中在组件之上,思考如何将页面划分成一个个组件,以及如何编写可复用的组件.但对于接触React不久,还没有真正用它做一个完整项目的人来说,理解如何创建一个组件也并不那么简单. 在最开始的时候我以为创建组件只需要调用createClass这个api就可以了:但学习了ES6的语法后,又知道了可以利用继承,通过extends React.component来创建组件:后来在阅读别人代码的时候又发现了PureComponent以及完全没有继承,仅仅通过返回

  • react 创建单例组件的方法

    需求背景 最近有个需求,需要在项目中添加一个消息通知弹窗,告知用户一些信息. 用户看过消息后,就不再弹窗了. 问题 很明显,这个需要后端的介入,提供相应的接口(这样可扩展性更好). 在开发过程中,遇到个问题:由于我们的系统是多页面的,所以每次切换页面,都会去请求后端的消息接口..有一定的性能损耗. 因为是多页面系统,使用单例组件貌似也没啥意义(不过是个机会学习学习单例组件是怎么写的). 于是,想到使用浏览器缓存来记录是否弹过窗了(当然,得设定过期时间). 如何写单例组件 1.工具函数: impo

  • React如何创建组件

    前言 这节我们将介绍 React 中组件的类别,以及如何创建和使用组件. 本文会向你介绍以下内容: 创建类组件 创建函数组件 渲染组件 合成组件 提取组件 Props 是只读的 组件介绍 组件(Components) 让你可以将用户界面分成独立的,可复用的小部件,并可以对每个部件进行单独的设计. 从定义上来说, 组件就像JavaScript的函数.组件可以接收任意输入(称为"props"), 并返回 React 元素,用以描述屏幕显示内容. Props , 即属性(Property),

  • React创建组件的三种方式及其区别

    React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的extends React.Component定义的组件 虽然有三种方式可以定义react的组件,那么这三种定义组件方式有什么不同呢?或者说为什么会出现对应的定义方式呢?下面就简单介绍一下. 无状态函数式组件 创建无状态函数式组件形式是从React 0.14版本开始出现的.它是为了创建纯展示组件,这种组件

  • React.js入门实例教程之创建hello world 的5种方式

    React.js入门实例教程之创建hello world 的5种方式

    一.ReactJS简介 React 是近期非常热门的一个前端开发框架.React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. ReactJS官网地址:http:

  • React创建组件的的方式汇总

    目录 1. 使用函数创建组件 2. 使用类创建组件 3. 抽离为独立JS文件 1. 使用函数创建组件 函数组件:使用JS的函数(或箭头函数)创建的组件 约定1:函数名称必须以大写字母开头 约定2:函数组件必须有返回值,表示该组件的结构 如果返回值为null,表示不渲染任何内容 function Hello() { return ( <div>这是我的第一个函数组件!</div> ) } const Hello = () => <div>这是我的第一个函数组件!&l

  • 如何创建自己的第一个React 页面

    目录 Rract是啥? 背景 React脚手架 JSX是什么 Rract是啥? React 是用于构建用户界面的 JavaScript 库 构建用户界面. User Interface,对咱们前端来说,简单理解为:HTML 页面 javscrtipt库.不是框架,是库, react 全家桶才是框架 react 全家桶: react: 核心库react-dom: dom操作react-router:路由,redux:集中状态管理 背景 Rract最牛逼!全球使用最多 特点 声明式 用类似于html

  • 从零开始搭建一个react项目开发

    本文介绍了从零开始搭建一个react项目开发,分享给大家,具体如下: 1.npm init 生成 package.json 文件. 2.安装各种需要的依赖: npm install  --save react - 安装React. npm install  --save react-dom 安装React Dom,这个包是用来处理virtual DOM.这里提一下用React Native的话,这里就是安装react-native. npm install  --save-dev webpack

  • 使用webpack5从0到1搭建一个react项目的实现步骤

    使用webpack5从0到1搭建一个react项目的实现步骤

    前言 在这之前,每开始一个新项目我都是使用现有的脚手架,这非常便于快速地启动一个新项目,而且通用的脚手架通常考虑地更加全面,也有利于项目的稳定开发:不过对于一个小项目,根据需求自己搭建可能会更好,一方面小项目不需要脚手架那么丰富的功能,另一方面可以提高对项目的掌控度以方便后期的扩展. 这篇文章是在实践中总结的,具有实操性,读者可跟着一步步进行搭建,中间我会穿插一些原理,当然因为笔者的能力有限,不会特别深入. 预备知识 熟悉Javascript && HTML && CSS

  • 教你如何从 html 实现一个 react

    教你如何从 html 实现一个 react

    什么是 React React是一个简单的javascript UI库,用于构建高效.快速的用户界面.它是一个轻量级库,因此很受欢迎.它遵循组件设计模式.声明式编程范式和函数式编程概念,以使前端应用程序更高效.它使用虚拟DOM来有效地操作DOM.它遵循从高阶组件到低阶组件的单向数据流. 前言

  • 使用 Rails API 构建一个 React 应用程序的详细步骤

    使用 Rails API 构建一个 React 应用程序的详细步骤

    目录 后端:Rails API部分 前端:React部分 React组件 使用 axios 获取 API 数据 [51CTO.com快译]使用React创建项目时,动态数据无法保存的问题要怎么办呢?为此,我开始寻找一个充当备份的API来解决这一问题. 在本文中,我将介绍如何设置和构建一个以React作为前端的Rails API的一些要点,以帮助那些和我遇到一样问题的人. 本文计划使用Rails API作为后端,React作为前端,所以需要学习本文的人遵循同样的路径和步骤. 后端:Rails AP

  • vue-cli3.0实现一个多页面应用的历奇经历记录总结

    本文实例讲述了vue-cli3.0实现一个多页面应用的历奇经历.分享给大家供大家参考,具体如下: 故事背景 这是在刚请完假回来,一切都在计划之中,早上一来,就接到项目经历的新的需求(这个是烂摊子,已经好几个人接手,离职),我内心是拒绝的,可最后办法,没有其他人去做,最后就落在了我头上. 接到需求,先看了需求,跟以前的比起来,改动挺大,数据结构全改了,如果在原来的基础上改,成本有点大,所以,就想着重启项目来实现.于是就使用vue的最新脚手架工具vue-cli3.0来初始化项目,但突然,一个会议又来

  • 记一个React.memo引起的bug

    记一个React.memo引起的bug

    目录 一般memo用法: 问题描述 解决方法 方案一.使用useRef+forceUpdate方案 方案2.使用useCallback 总结 与PureComponent不同的是PureComponent只是进行浅对比props来决定是否跳过更新数据这个步骤,memo可以自己决定是否更新,但它是一个函数组件而非一个类,但请不要依赖它来“阻止”渲染,因为这会产生 bug. 一般memo用法: import React from "react"; function MyComponent(

  • 一个JSP页面导致的tomcat内存溢出的解决方法

    今天新能测试组的同事找我看一个奇怪的现象.一个tomcat应用,里面只有一个单纯的jsp页面,而且这个jsp页面没有任何java代码(想用这个jsp页面测试在她的服务器上的一个tomcat的最大QPS).但是用loadrunner压测了几分钟之后,分配了1024M堆内存的tomcat居然包heap space outofmemory!这个页面的代码如下: 复制代码 代码如下: <%@ page language="java" contentType="text/html

  • Flutter 开发一个登录页面

    Flutter 开发一个登录页面

    业务逻辑 为了演示登录跳转,在分类浏览先做了一个简单的按钮,点击跳转到登录页面.实际的 App 中,通常会是触发某些需要登录才能查看的操作后再跳转到登录界面. 布局分析 界面如上图所示,从界面上看,整体内容区域是居中的,内容的布局是一个简单的列式布局,包括了顶部的一个 Logo(通常是 App图标),再往下是两个文本输入框,最后是登录按钮.整体布局比较简单,使用 Center 下嵌一个Column 进行列布局即可. 图片圆形裁剪 在 Flutter 中实行图片圆形裁剪有两个方式,一是使用外层的容

  • 创建你的第一个AngularJS应用的方法

    创建你的第一个AngularJS应用的方法

     按以下步骤来创建AngularJS应用 第1步:加载框架 作为一个纯粹的JavaScript框架,它可以使用<script>标签来添加. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> 第2步:使用ng-app指令定义AngularJS应用 <div ng-app=""> ...

随机推荐