黑马程序员技术交流社区

标题: 用create-react-app构建一个react项目 [打印本页]

---

作者: 梦缠绕的时候    时间: 2019-6-25 14:38
标题: 用create-react-app构建一个react项目
检测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
1
开发流程
创建项目 create-react-app app01
启动项目 npm run start/ yarn start
react项目内置了一个静态服务器
先启动了静态服务器
然后将前端代码构建后部署到静态服务器中
编写代码

---------------------
有任何问题欢迎在下方留言哟

---

作者: 梦缠绕的时候    时间: 2019-6-25 14:38
或者联系学姐DKA-2018

---

作者: 晨大喵    时间: 2019-7-17 11:50
感谢分享~~

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2