从上一个文章结束以后，相信大家已经能够对于react的一些历史有一定的了解了，现在我们进入一个我们创建好的react项目之中来看看项目结构。

一个创建好的项目通常分为包所在的node_modules，public文件夹，主要存放代码的src文件夹还有.gitignore文件、package-lock.json文件、package.json文件、README.md文件。前半部分我们经常一看就能了解，所以不叙述它们，哈士奇先为大家简单介绍一下后半部分的几个文件。

常用的一些文件

.gitignore

.gitignore 文件是用来指定需要被 Git 忽略的文件和目录的配置文件。当你在项目中创建了 .gitignore 文件并列出了需要忽略的文件或目录时，Git 就会在执行版本控制操作时自动忽略这些文件或目录，不会将它们纳入版本控制中。

.gitignore 文件通常可以用于以下几个场景：

过滤不必要的文件和目录：在项目开发过程中，通常会有一些临时文件、编译生成的文件、日志文件等不需要纳入版本控制的内容，这些文件可以通过 .gitignore 文件来过滤掉，以保持代码仓库的干净和精简。
防止包含敏感信息的文件被提交： .gitignore 文件可以用来排除包含敏感信息的配置文件、凭证文件等，以防止它们被意外提交到代码仓库中，保护项目的安全性。
提高代码库的性能：将不需要纳入版本控制的大型二进制文件、缓存文件等排除在外可以减少代码库的体积，提高 Git 操作的性能和效率。

比方说，我们常常用.gitignore文件忽略我们下载的依赖包，这样不会导致我们在仓库上传和下载文件的时候花费时间过长
保持团队一致性：通过在 .gitignore 文件中定义统一的忽略规则，可以确保团队成员在开发过程中遵循相同的文件管理和版本控制规范，提高协作效率和代码质量。

我们需要忽略相关文件的时候，只需要和示例代码的写法一样使用/标识我们需要忽略的文件路径或者文件名。

package-lock.json

package-lock.json 文件是 npm 5.x 以上版本引入的一种锁定依赖版本的机制，用于确保在不同的环境中安装的依赖包的版本是一致的。它主要包含了以下几个方面的内容：

依赖树：package-lock.json 文件会列出项目中所有直接和间接依赖的详细信息，包括依赖的名称、版本、依赖关系等。这样的话，可以确保每次安装依赖时都会得到相同版本的依赖包。
版本信息：package-lock.json 文件中会记录每个依赖包的具体版本号，以及该版本下依赖包的完整依赖树。这样的话，当其他开发者或者部署环境需要安装依赖时，可以根据锁定的版本信息来精确地安装相同版本的依赖包。同样的，当我们发现自己的依赖出现问题需要安装其他依赖包的时候，可以卸载依赖包以后在package-lock.json文件里面修改我们的依赖包的版本，再重新npm i进行安装。
缓存信息：package-lock.json 文件中会记录每个依赖包的下载地址和校验和等信息，以及依赖包在本地缓存的路径。这样的话，当需要重新安装依赖包时，npm 可以直接从本地缓存中获取依赖包，而不需要重新下载。

package-lock.json 文件的主要作用是确保项目中依赖包的版本是一致的，以及记录依赖包的详细信息，以便在不同的环境中进行准确和可重复的依赖安装。

package.json

package.json 是一个用于描述 Node.js 项目的元数据文件，它通常位于项目的根目录下。在 package.json 文件中，你可以定义项目的名称、版本、依赖项、脚本等信息，以便 npm 或者 yarn 等工具能够正确地管理和构建项目。

一个典型的 package.json 文件包含以下几个重要的字段：

name：项目的名称，必须是唯一的，通常采用小写字母、连字符或下划线。
version：项目的版本号，遵循语义化版本规范（SemVer）。
description：项目的简要描述。
main：指定了项目的入口文件，即主要的 JavaScript 文件。
scripts：定义了一系列的脚本命令，用于执行各种任务，例如启动开发服务器、构建项目、运行测试等。
dependencies：列出了项目运行时所依赖的第三方包。
devDependencies：列出了项目开发过程中所依赖的第三方包，例如构建工具、测试库等。
keywords：关键字数组，用于描述项目的特点、功能等，方便其他开发者搜索和识别。
author：项目的作者信息。
license：项目的许可证信息。
repository：项目的代码仓库信息。
engines：指定了项目运行所需的 Node.js 版本范围。
其他自定义字段：你还可以在 package.json 文件中定义其他自定义字段，用于描述项目的其他信息。

在一个实际的项目中，package.json 文件会根据项目的需要而有所不同，你可以根据项目的具体情况来自定义和修改 package.json 文件中的各个字段。

为什么哈士奇想要在聊JSX之前先和大家聊聊这些，主要是因为在公司实习的过程中，monitor会丢给你一个公司项目让你自己上手熟悉，通过这些文件熟悉项目是最快了解项目的方式。

接下来是聊聊我们这篇文章的重中之重——JSX

JSX

是什么？

JSX的全称叫做Java Script XML 它是一门拥有javascript和xml优点的语法糖，我们可以将它与React结合起来编写代码，它的优点就是能够同时编写html和js代码，同时它的写法更加贴近原生js的写法因此我们能更加容易上手学习它。

为什么说JSX是一个语法糖呢？其实最根本的原因在于它可以在编译器js中的html语句转化为js语句。

我们举个例子！！

<header className="App-header">
  <h1>hello world</h1>
</header>

当我们在jsx里面写以上代码的时候编译工具是怎么处理这段代码的？

React.createElement("header", {className: "App-header"},
  React.createElement("h1", null, "hello world")
);

如果再复杂一些使用原生js来写呢？

const myHeader = document.createElement('header');
myHeader.className = 'App-header';

const h = document.createElement('h');
h.textContent = 'Hello, world!';

myHeader.appendChild(h);

插入
document.body.appendChild(myHeader);

我们可以看到它直接使用了react里面的createElement方法，这也是我们不使用jsx的时候的替代方法，但是谁会这么想不开用这么麻烦的写法去进行代码编写呢？某个不知名的（）错误就能让大家崩溃。这是createElement文档。大家感兴趣的话可以阅读一下。

基本使用

在聊完jsx的概念以后，我们来聊聊jsx的基本使用，我们在用的时候要注意什么

一个根元素包括所有元素

借用官方例子

<h1>Hedy Lamarr's Todos</h1>  
<img  
src="https://i.imgur.com/yXOvdOSs.jpg"  
alt="Hedy Lamarr"  
class="photo"  
>  
<ul>  
...  
</ul>

当我们有很多元素需要返回的时候不能直接使用return将它返回而是应该用一个根元素包裹起来返回。以下就是用div包裹起来返回。

return(
    <div>  
    <h1>Hedy Lamarr's Todos</h1>  
    <img  
    src="https://i.imgur.com/yXOvdOSs.jpg"  
    alt="Hedy Lamarr"  
    class="photo"  
    >  
    <ul>  
    ...  
    </ul>  
    </div>
)

使用驼峰命名法

这个略过

关闭你的标签

在这里你需要注意你的所有的标签都是关闭的，比如< img >是否写为了< img / >

大括号{}的使用

单{}（用于专门写js代码）

1.作为直接在 JSX 标记内的文本<h1>{name}'s To Do List</h1>：有效，但<{tag}>Gregorio Y. Zara's To Do List</{tag}> 不会。

2.作为紧跟在符号后面的属性=：src={avatar}将读取avatar变量，但src="{avatar}"将传递字符串"{avatar}"。

就是我们需要动态传值的时候有效，如果大家有学过vue应该可以有所感觉。

双{}

这种写法主要是在我们传递对象的时候经常用到。

return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
    </ul>
  );
}

总结

这篇文章主要带大家看了看react的项目结构，并且开始和大家讲解基本的一些jsx相关的东西，例如是什么，原理怎样，还有一些jsx写的过程中需要注意的东西，包括根元素包裹所有元素、驼峰命名、{}的使用等等。

这一篇先写到这里，后面有关组件传值等等内容哈士奇在下里面给大家分享。（今天摸鱼先到这里，剩下的哈士奇再慢慢给大家讲，继续看公司项目去了^_^）

哈士奇的react入门（二）：react项目的重要组成部分——JSX（上）