react 入门教程

---

前言

react 学习总结

---

一、创建一个react项目

创建一个react项目，首先先安装好node.js

npm install -g create-react-app  /*搭建一个全局的脚手架*/
create-react-app my-demo        /*创建项目 my-demo是项目名字*/
cd my-demo                      /*进入目录 然后启动*/
npm start

二、搭建React工作环境

• React的核心库：react.development.js
• React进行Dom操作的库：react-dom.development.js
• 将JSX语言转换为JavaScript语言：babel.min.js

== 如果我们将所有的React代码都书写在HTML文档中，则页面的启动不需要服务器。
如果我们将所有的React代码都书写在独立的js文件中，则页面的启动需要服务器。==

平时自己练习demo可以这样写：

 <script type="text/javascript" src="js/react.development.js"></script>
 <script type="text/javascript" src="js/react-dom.development.js"></script>
 <script type="text/javascript" src="js/babel.min.js"></script>
 <script type="text/babel" src="js/index.js"></script>

二、第一个React程序：Hello，React！

1.hello react

1. React的核心方法：

  ReactDOM.render(JSX代码,DOM Node)
  功能：将JSX代码生成的HTML节点放入指定的DOM节点中。

 ReactDOM.render(
	    <h1>Hello,React!</h1>,
	document.getElementById(“app”)
	    )

2. JSX代码必须具备一个根据节点。
3. JSX是HTML和JavaScript语言的混合
（1）HTML代码必须用 < > 扩住。
（2）JavaScript代码必须用 { } 扩住。
在HTML代码中嵌入的JavaScript代码必须是一个数组。

2.利用react实现一个无序列表（demo）

例：做一个数组，在页面中利用React技术将数组元素渲染为一个无序列表

 let list=[‘张三’,‘李四’,……];
    ReactDOM.render(