首页手记初结 react（当 React 版本是...

初结 react（当 React 版本是 ^16.2.0，当前时间 2018-01-12）

标签：

JavaScript React.JS

最近一段时间在零零碎碎地看 react 。在此，向所有自学 react 的朋友点个赞。多说一句，在自学道路上一定要戒骄戒躁，坚持下来。-----因为自学过程真的是心累啊（不同版本的博客不同的说法）。。。

下面，开始创建 React 项目。我使用的是 VS Code 编译器。

1、创建项目

我这里使用 React 官网给出的 Create React App 方式创建项目。

npm install -g create-react-app //第一步：全局安装reactcreate-react-app my-app //第二步：创建 项目 （my-app是项目名）cd my-app //第三步：切换到 项目中npm start //第四步：运行项目

首先，若果之前没有全局安装过 create-react-app ，这里需要全局安装一下（安装过就不需要）；

然后，使用 create-react-app my-app 命令创建项目。其中，my-app是项目名，注意这里项目名勿使用驼峰命名方式，可以使用 ‘-’ 连接。(实测，有时候大写也没报错，有时候报错了)

错误提示：
create-react-app myDemo 使用这条命令创建 myDemo 项目报错，如下：
Could not create a project called "myDemo" because of npm
naming restrictions:
* name can no longer contain capital letters （所有的名字不可以包含大写字母）。

使用 create-react-app 方式创建项目后结构如下图所示：

接着，切换到项目中，使用 npm start 命令运行项目。

我当时学习的时候，到这，开始去看官网基础知识，开始学习 react 相关的基础语法知识去了。等我稍微了解一点后准备去看别人的 demo ，发现别人的目录结构和我的差距比较大。而且发现，我不太好更改配置文件。然后一脸懵逼，怎么办？看别人的 Demo （各种配置没法改）我不好跟着后面做，自己写 Demo 有点太早。过后也翻阅了各种资料，原来。。。。

2、优化项目目录结构

运行 npm run eject 命令，完成后，项目结构下出现变化：config 配置文件文件夹，里面包含各种配置文件；scripts 文件夹包含了 json 文件中 script 包含的命令 js 文件。具体如下图所示：

好了，现在需要改什么配置文件可以找到相应的配置文件进行更改。

3、Hello World

程序员一直有个梗“Hello world !”，那我们就先用 React 打印出 “Hello world !”。

我们打开 \my-demo\src\App.js文件，在 <div className="App"></div>能添加子元素<h1>Hellow world !</h1>，保存后更新页面（自动更新），如下图所示：

下面我们开始简单了解一下 React 的基础语法知识。

4、React 基础语法

React 的基础语法知识建议多看看 React 官网，这里给出个传送门。静下新来慢慢看，一点一滴地积累。没有什么是看文档看不懂的，如果真没看懂，那就再多看几遍。。。

这节我也不具体介绍这些基础知识，只是提出需要注意哪些内容。具体的，还是参考相关文档。

4.1 JSX介绍

我这里也就不做太多介绍，也可以参考我的《02. react 初次见面---JSX简介》，这里我做了我看的时候的一些标注。作为初学者，先能看懂 JSX代码、能写一点简单的 JSX语句还是不难的，注意 “{ }”、“( )”的使用。应该没什么太大问题。

4.2 元素渲染

具体见 React 官网文档，或者我的《03. react 初次见面---元素渲染》。这里主要需要知道ReactDom.render( ) 是做页面渲染的。在 /src/index.js 中有一段代码 ReactDOM.render(<App />, document.getElementById('root'))，它的作用是将组件名为 App的组件渲染到 id为 root 的 HTML 元素中。