React学习第一步,认识React了解手脚架

Posted 黑马程序员官方

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React学习第一步,认识React了解手脚架相关的知识,希望对你有一定的参考价值。

目标

  • 能够说出React是什么
  • 能够说出React的特点
  • 能够掌握React的基本使用
  • 能够使用React脚手架

什么是React (⭐⭐⭐)

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

特点

  • 声明式:你只需要描述UI看起来是什么样式,就跟写html一样,React负责渲染UI
  • 基于组件:组件时React最重要的内容,组件表示页面中的部分内容
  • 学习一次,随处使用:使用React可以开发Web应用,使用React可以开发移动端,可以开发VR应用

React基本使用

React的安装

npm i react react-dom

  • react 包是核心,提供创建元素,组件等功能
  • react-dom 包提供DOM相关功能

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)

React手脚架(⭐⭐⭐)

React脚手架意义

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

使用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

脚手架中使用React

导入react和react-dom两个包

import React from 'react'
import ReactDOM from 'react-dom'
  • 创建元素
let h1 = React.createElement('h1',null,'我是标题')
  • 渲染到页面
ReactDOM.render(h1,document.getElementById('root'))

以上是关于React学习第一步,认识React了解手脚架的主要内容,如果未能解决你的问题,请参考以下文章

React劲爆新特性Hooks 重构去哪儿网火车票PWA

React构建单页应用方法与实例

初入react

1. 认识React

1. 认识React

1. 认识React