如何创建一个React项目

创建React项目

想要创建React项目 首先要了解React
React是用于构建用户界面的JavaScript库， [1] 起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。

特点

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

React的使用

react的安装
npm i react react-dom

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

1.使用html文件的引入文件

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

2.使用脚手架创建项目

首先这里先了解下脚手架是什么？

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

初始化项目

推荐使用npx创建项目

• 初始化项目，命令： npx create-react-app my-pro
  • npx 目的：提升包内提供的命令行工具的使用体验
  • 原来：先安装脚手架包，再使用这个包中提供的命令
  • 现在：无需安装脚手架包，就可以直接使用这个包提供的命令
  • create-react-app 这个是脚手架名称 不能随意更改
  • my-pro 自己定义的项目名称
• 启动项目，在项目根目录执行命令： npm start

使用npm创建项目
执行命令下载脚手架： npm i -g create-react-app （-g全局下载react脚手架）
安装react项目：create-react-app my-pro （其中my-pro为项目文件夹名称）
等小黑屋下载完毕执行以下命令

• cd my-pro （进入项目）
• npm start （启动项目）

yarn简单介绍

• yarn 是Facebook发布的包管理器，可以看做是npm的替代品，功能与npm相同
• yarn具有快速，可靠和安全的特点
• 初始化新项目：yarn init
• 安装包： yarn add 包名称
• 安装项目依赖： yarn

接下来启动项目就可以开始操作运行自己的代码啦！！！