- 检测node版本(需要>=6)
node -v
- 检测npm版本(需要>=5.2)
npm -v
- 检测yarn是否安装
yarn -v
-
node?npm?yarn
- Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境
- npm全称是 Node Package Manager,就是node的包管理工具
- yarn 和npm类似,是为了弥补 npm 的一些缺陷而出现的
-
安装create-react-app脚手架
npm install -g create-react-app
- 检测 create-react-app版本
create-react-app --version
- 打开vscode,创建项目文件夹,使用脚手架创建工程
create-react-app app01
- 进入到工程目录
cd app05
- 启动工程
yarn start
- 默认效果
- 下面尝试实现自己的页面
- 在/src下新建文件Hello.js
import React from 'react';
function Hello(){
return(<div>
<h1>hello,world!</h1>
</div>);
}
export default Hello;
- 在/src下新建文件Hello.css
h1 {
color: blue ;
}
- 打开inde.js,将工程默认渲染的页面改为Hello.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import Hello from './Hello';
import * as serviceWorker from './serviceWorker';
// ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<Hello />, document.getElementById('root'));
serviceWorker.unregister();
- 最终效果
- 介绍目录结构
- node_modules 第三方依赖也就是构建这个React项目可能会用到的工具
- public文件夹中是 index.html存放目录,也就是React根页面的所在地
- src 存放源代码,是项目开发中的主要区域
- package.json 模块项目的核心配置文件
- 快速添加依赖,在本地 node_modules 目录安装 package.json 里列出的所有依赖
yarn install
- 开发流程
- 创建项目 create-react-app app01
- 启动项目 npm run start/ yarn start
- react项目内置了一个静态服务器
- 先启动了静态服务器
- 然后将前端代码构建后部署到静态服务器中
- 编写代码
- 如果代码发生了变化,会自动更新与部署