React快速入门（1）之HelloReact

课程目标

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

最终效果

image

创建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应用程序将弹出一个新窗口。

image

项目目录结构

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

image

在目录/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>

保存文件后，您会注意到localhost:3000编译并刷新了新数据。

image

参考：
https://www.taniarascia.com/getting-started-with-react/