react 引用本地js_「React 手册 」从创建第一个React组件开始学起

大家好，在本系列的前三篇文章里，我们一起学习了在 React 中经常会用到的 ES6 新特性，以及 REACT 16+ 版本的一些新特性 和 团队 成员在 Winwow 和 MAC 环境下混合开发时需要注意的一些问题，从本篇文章起，我们将正式开始从最基础的内容开始学习React，今天我们将从创建第一个 React 组件开始学起。

本篇文章主要介绍以下内容：

• 如何创建我们的第一个 React 组件
• 如何组织我们的项目文件结构
• 如何在组件里添加CSS样式

一、如何创建我们的第一个 React 组件

组件是React最基本的内容，通过组件我们可以实现交互和重用，依据组件的创建方式又可以分为三类：class components(类组件)、pure components(纯组件)、pure components(函数组件)，接下来，我们来开始动手实践第一个组件吧(这里我们先用类组件的方式进行创建，在后续的文章里将会介绍函数组件)。

1、准备脚手架运行环境

为了方便起见，快速上手 React 项目，我们使用 create-react-app 脚手架创建 React 项目。创建之前，你需要安装 create-react-app 脚手架，安装之前，确保你安装了 Node 运行环境(从 www.nodejs.org 官网下载),支持 Mac, Linux, 和 Windows 系统环境。

在控制台里，我们输入以下命令进行全局安装：

npm install -g create-react-app

或者用更简单命令：

npm i -g create-react-app

2、开始动手创建吧！

接下来，我们来按照以下几个步骤来创建我们的第一个 React 项目：

1、在控制台输入以下命令进行项目创建：

create-react-app my-first-react-app

2、将工作台环境切换至当前目录，并运行项目，你需要在控制台输入以下命令：

cd my-first-react-appnpm start

3、运行完以上的命令后，将会自动调用浏览器窗口，并打开以下网址：

http://localhost:3000

4、接下来，我们在 src 的目录下创建一个 Home.js 的新文件，示例代码如下：