React入门（1）——我的第一个React.js项目

创建日期: 2020年2月22日
官网
中文官方文档
React入门系列 目录导引

一.使用create-react-app命令创建

React 官方提供了一个脚手架用于初始化React项目，使用 create-react-app 可以简化手动设置流程。 官方网站的 Tutorial 也是以此为例。
注意：项目命名时，不支持大写字母。

STEP 1:

$ npm install -g create-react-app
$ create-react-app my-app

或者，npm版本在5.2.0+ 可以使用 npx 命令，简洁

$ npx create-react-app my-app

运行成功后，最后一句是“Happy hacking！”。
使用 create-react-app ，你只需要执行命令之后等待安装完依赖，就可以创建一个已经配置好的 React 应用程序，并可以基于此开始你的项目开发。创建成功后，项目文件夹如下：

项目文件夹

STEP 2:

进入项目目录，启动项目

$ cd my-app
$ npm start

我使用的$ yarn start启动项目。关于npm和yarn的区别
这里说一下，笔者在启动现存代码的时候，发现居然所有步骤都正确，画面是空白的。然后笔者刷新了一下画面，就可以了。
<br >

二.使用webStorm创建React项目

打开webStorm，File → New → Project... → React App
选好路径，填上项目名，点击Create，创建新项目。
如下图：

webstorm

项目刚创建时，先出现package.json, yarn.lock，然后node_modules文件夹。继续自动运行之后，出现了初始项目的完整文件夹。

运行时，直接点击run按钮即可。

以上，部分参考https://zhuanlan.zhihu.com/p/36137966 该链接里面提到项目初始化，其中npm init会对package.json进行修改，如果没有package.json这个文件，会自动生成，但是在生成过程中，entry point必须填写，否则会出现Aborted的错误提示，文件不会被生成。链接的作者，最后一次编辑是在2018年5月份，不知道是否这期间react的版本更新原因，笔者创建的新项目，已经自动拥有package.json这个文件，并不需要通过npm init对项目初始化。之后的开发过程中，是否需要，待定。。。

三.已有工程中，导入react

如果你希望在老项目中引入 React，或着探究 React 到底是怎么运行起来的。那就需要自己动手来配置了。我们使用 Babel 和 Webpack 来解决这个问题。

笔者没有老项目，这部分，之后再补吧。。。参考

下面这个链接，涉及到Babel和Webpack这两个概念，说的比较细致，可以参考。https://segmentfault.com/a/1190000016661311

四.扩展——显示Hello world！

我们找到项目的启动文件src/index.js，将文件所有内容替换成下面代码：

import React from 'react'

import ReactDOMfrom 'react-dom'

ReactDOM.render(

<h1>Hello, world!</h1>,

    document.getElementById('root')
);

运行，之后会看见界面显示Hello world。

我们观察下上述语法，待你多写几个demo的时候，你会发现，最后要先启动哪个界面，是由

ReactDOM.render(parameter，document.getElementById('root'));

的parameter决定的。

'root'是根DOM节点，想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()。详细

下一篇：React入门（2）–––React中使用css / less文件

======================== 分割线 ==========================
http://huziketang.mangojuice.top/books/react/lesson7
看阮一峰的教程：http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html
创建第一个components：https://www.jianshu.com/p/324fd1c124ad