React学习之路

React.js是一个用于构建用户界面的JavaScript库

开发环境的搭建

• 使用脚手架工具搭建开发环境，脚手架是前端开发过程中的一个辅助工具，它会自动帮我们构建一个大型项目的开发流程和目录，允许我们以一定的方式实现JS文件的相互引用，让我们更方便的进行项目管理。但是在脚手架里面写的代码并不能直接运行，需要脚手架工具编译，编译出来的代码才能被浏览器识别运行。一般使用grunt webpack gulp等工具进行打包。
• 推荐官方脚手架工具Creact-react-app

具体步骤：

1. 安装node.js
2. 安装脚手架 npm install -g creact-react-app
3. 通过命令创建react项目 creact-react-app myproject

工程目录文件简介

• yarn.lock 项目依赖的安装包，一些版本号，会做一些限制
• README文件，项目的一些说明，可以加入自己的说明文案
• package.json文件,任何一个脚手架工具里面都会有这个文件，代表这个脚手架工具实际上是一个node的包文件
• node_modules文件夹里面放的是一些第三方依赖的包，是脚手架工具要想实现它自己的功能就要依赖的一些外部的node的包文件
• public
  –/favicon.ico 网页小标识
  –/index.html 首页模板
• src
  –/index.js 整个项目的入口文件
  –/App.js 组件
  注意 ： 以上没有提到的部分文件是暂不会用到的，或者是一些页面的样式文件，我们将它进行删除，注意在删除的时候，也要将对应页面的引用代码删掉，不然会报编译错误。

入口文件和引入的组件App.js

将项目简洁化以后，主要介绍入口文件和引入的组件App.js

	//ReactDOM是一个第三方模块，它的render方法可以将组件挂在到某一个dom节点上
    ReactDOM.render(<App />, document.getElementById('root'));      

（1）介绍JSX语法
以前我们写标签的时候，都是在html文件里面，但是现在将标签这种语法，写在了js文件里，它既不是字符串也不是html，被称为JSX。JSX是一个JavaScript的语法扩展。在React中使用JSX，它会很好的描述UI应该呈现出它应有的交互的本质形式；
（2）JSX语法中。可以在大括号内放置任何有效的JavaScript表达式；
（3）如果我们要使用自己创建的组件，通过标签的形式引用，注意组件名开头必须以大写字母开头。

• 下一篇文章就是通过一个小demo来着手正式学习react。理解并且应用React中的响应式思想和事件绑定基础。