react1.使用vs code创建第一个react项目

Posted 2022-05-17 阿拉的梦想

【react】1. 使用vs code创建第一个react项目

• 环境准备
• 1. 安装脚手架
• 2. 初始化一个新项目
• 3. 启动项目
• 4.实现自己的hello world

环境准备

安装node.js
设置淘宝镜像仓库

$ npm config set registry https://registry.npm.taobao.org
$ node -v
v16.13.2
$ npm -v
8.1.2
$ npm config get registry
https://registry.npm.taobao.org/

1. 安装脚手架

一个react项目的结构和文件非常多，我们手动创建非常麻烦，因此，我们需要使用一个脚手架工具帮我们一键创建，它就是create-react-app；

脚手架是官方提供，零配置，无需手动配置繁琐的工具即可使用

下面是安装脚手架：

sudo npm install -g create-react-app

过程或许有点慢，它在安装下面三个东西：

• react: react的顶级库
• react-dom: react在web段的运行环境
• react-scripts: 包含运行和打包react应用程序的所有脚本及配置

2. 初始化一个新项目

使用脚手架创建一个demo项目

create-react-app demo1

使用vs code打开文件夹demo1，创建后的项目结构如下

3. 启动项目

cd demo1
npm start

Compiled successfully!

You can now view react-demo1 in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.100:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

访问：http://localhost:3000
效果如下，表示成功

4.实现自己的hello world

找到index.js,替换内容为：

// 从 react 的包当中引入了 React。
/*只要你要写 React.js 组件就必须引入React, 
因为react里有一种语法叫JSX，要写JSX，就必须引入React*/
import React from 'react'

/*
ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。
它是从 react-dom 中引入的，而不是从 react 引入。
*/ 
import ReactDOM from 'react-dom'

// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
ReactDOM.render(
/* 
这里就比较奇怪了，它并不是一个字符串，
看起来像是纯 html 代码写在 javascript 代码里面。
语法错误吗？这并不是合法的 JavaScript 代码,
 “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。
 */

  <h1>欢迎进入React的世界</h1>,
  document.getElementById('root')	// 渲染到哪里
)

保存刷新效果如下：