React快速入门（1）之HelloReact-阿里云开发者社区

React快速入门（1）之HelloReact

2023-05-17 50

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： React快速入门（1）之HelloReact

课程目标

了解最常用的React概念和相关术语，例如JSX，组件，属性（Props），状态（state）。
构建一个非常简单的React应用程序，以阐述上述概念。

最终效果

创建React应用

helloworld

（1）安装node.js 官网链接

（2）打开cmd 窗口输入

npm install --g create-react-app 
npm install --g yarn

（-g 代表全局安装）

如果安装失败或较慢。需要换源，可以使用淘宝NPM镜像，

得到原本的镜像地址

npm get registry

设成淘宝的

npm config set registry http://registry.npm.taobao.org/

换成原来的

npm config set registry https://registry.npmjs.org/

设置完成后，

重新执行

npm install --g create-react-app
npm install --g yarn

安装 creat-react-app 功能组件，该组件可以用来初始化一个项目，即按照一定的目录结构，生成一个新项目

（3）在你想创建项目的目录下例如 D:/project/ 打开cmd命令输入

create-react-app react-tutorial

去使用creat-react-app命令创建名字是react-tutorial的项目

安装完成后，移至新创建的目录并启动项目

cd react-tutorial
yarn start

一旦运行此命令，localhost:3000新的React应用程序将弹出一个新窗口。

项目目录结构

一个/public和/src目录，以及node_modules，.gitignore，README.md，和package.json。

在目录/public中，重要文件是index.html，其中一行代码最重要

<div id="root"></div>

该div做为我们整个应用的挂载点

/src目录将包含我们所有的React代码。

要查看环境如何自动编译和更新您的React代码，请找到文件/src/App.js：

将其中的

<a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>

修改为

<a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          和豆约翰 Learn React
        </a>