react初始化准备工作

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