欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react初始化准备工作

程序员文章站 2022-06-16 08:32:33
react笔记1.react简介:简介:React 构建用户界面的javascript库,主要用于构建按ui界面。 instagram,2013年开源。特点:声明式的设计高效,采用虚拟DOM来实现DOM的渲染,最大限度的减少DOM的操作灵活,跟其他库灵活搭配使用jsx, 俗称给你JS 里面写HTML, JavaSxript 语法的扩展。组件化,模块化。代码容易复用,大型项目非常喜欢react.(2016年前,vue还没有火之前)单项数据流/没有实现数据的双向绑定。 数据 -->...

react笔记

1.react简介:

简介:React 构建用户界面的javascript库,主要用于构建按ui界面。 instagram,2013年开源。

特点:

  • 声明式的设计
  • 高效,采用虚拟DOM来实现DOM的渲染,最大限度的减少DOM的操作
  • 灵活,跟其他库灵活搭配使用
  • jsx, 俗称给你JS 里面写HTML, JavaSxript 语法的扩展。
  • 组件化,模块化。代码容易复用,大型项目非常喜欢react.(2016年前,vue还没有火之前)
  • 单项数据流/没有实现数据的双向绑定。 数据 --> 视图 --> 事件 --> 数据

2 使用 引入react

2.1 CDN:

只用于本地的学习和使用。 线上形目不能这样啊

可以通过 CDN 获得 React 和 ReactDOM 的 UMD 版本。

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

2.2 脚手架

cnpm install -g create-React-app


# 全局安装"create-react-app"架构
$ npm install -g create-react-app
 
# 创建脚手架项目
$ create-react-app my-app
 
# 进入项目目录
$ cd my-app
 
# 启动项目
$ npm start

http://localhost:3000/

react文档结构

myreact 

 
 |--node_modules   项目依赖包
 |-- public       公共开放资源  静态资源
 |     |--favicon.ico 
 |     | --index.html      相当于vue的 id ='app',等待放置编译好的dom
 |     | --logo.png         react图表
 |     | --mainifest.json  chrome扩展文件
 |     | --robots.txt       告诉爬虫,不要爬我的网页。一般没用。
 |
 |-- src
 |     |--App.css
 |     | --APP.js
 |     | --App.test.js
 |     | --index.css
 |     | --index.js
 |     | --logo.svg
 |     | --servceWorker.js
 |     | --setupTests.js
 |
 | --.gittignore    git 忽略配置文件
 | --package.json    包配置信息
 | --package-lock.json  包配置信息版本固定
 | --README.md         文档说明    


本文地址:https://blog.csdn.net/lyxkgc/article/details/107351286

相关标签: react.js reactjs