React初识

1.React介绍

1.React介绍

React：用于构建用户界面的 JavaScript 库。React中文官网

React优点：

• 生态强大：现在没有哪个框架比React的生态体系好的，几乎所有开发需求都有成熟的解决方案。
• 上手简单: 你甚至可以在几个小时内就可以上手React技术，但是他的知识很广，你可能需要更多的时间来完全驾驭它。
• 社区强大：你可以很容易的找到志同道合的人一起学习，因为使用它的人真的是太多了。

2.React三大体系

2.开发环境搭建

1.安装node.js以及npm

使用React.js是可以用最原始的<Script>标签进行引入的，但是这实在是太low了，工作中也不会有这种形式进行引入。所以在学习的时候，我们就采用脚手架形式的安装。这就需要我们安装Node.js，用里边的npm来进行安装。
Node.js安装好以后，Win+R打开运行，然后输入cmd，打开终端命令行工具，输入：node -v以及npm -v。
如果正确出现版本号，说明Node.js安装成功了。

2.创建项目

Node安装好之后，你就可以使用npm命令来安装脚手架工具了，方法很简单，只要打开终端，然后输入npm install -g create-react-app(-g表示全局安装)。
create-react-app是React官方出的脚手架工具，其实有很多第三方的脚手架工具，也有很多优秀的。但是作为初学者为了减少踩坑，所以我们使用官方的脚手架。
接着就是创建项目了，步骤如下：
D:：进入D盘
mkdir ReactDemo：创建ReactDemo文件夹。
create-react-app demo01：用脚手架创建React项目。
cd demo01：等创建完成后，进入项目目录。
npm start：预览项目，如果能正常打开，说明项目创建成功。

3.项目目录文件介绍

• README.md：项目的说明文件，使用Markdown语法。
• package.json：第三方包的管理工具和配置文件。
• package-lock.json：锁定安装时的版本号。
• .gitignore：git的管理文件。
• node_modules：第三方包存储位置。
• public：公用文件。
• src：主要代码编写文件。

在public文件夹下还有一些文件：
favicon.ico: 浏览器标签页的左上角显示的图标文件。
index.html: 首页的模板文件。
mainifest.json：移动端配置文件。

在src文件夹下还有一些文件：
index.js: 项目的入口文件。
index.css：这个是index.js里的CSS文件。
app.js: 这个文件相当于一个方法模块，也是一个简单的模块化编程。
serviceWorker.js: 这个是用于写移动端开发的，PWA必须用到这个文件，有了这个文件，就相当于有了离线浏览的功能。

3.HelloWorld实现

在src目录下的index.js(入口文件)下写入以下代码：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App' //引入App组件

ReactDOM.rendershi(<App />,document.getElementById('root')) //将组件挂载到index.html页面上的id为root的div中

接着就是新建出App组件App.js：

import React,{Component} from 'react'
//上面是ES6的写法，等同于下面两句
//import React from 'react'
//const Component = React.Component

class App extends Component {
    render() {
        return (
            <div>
               Hello JSPang
            </div>
            //JSX语法，能够在React和Javascri里面写html
        )
    }
}

//ES6的语法，能把组件暴露在外面让其他引用
export default App

4.JSX语法

在index.js中的渲染语句：

ReactDOM.render(<App />,document.getElementById('root'))

就用到了JSX。

<App />是自定义的组件，首字母需要大写。

JSX：JavaScript和 xml的结合，当遇到<>就当做HTML来解析，当遇到{}当做js来解析。

另外，在App.js中：

class App extends Component {
    render() {
        return (
            <ul className="my-list">
                <li>JSpang.com</li>
                // 当然还可以写成Javascript
                // <li>{true?'JSpang.com':'技术胖'}</li> 
                <li>I Love React</li>
            </ul>
        //上面4行jsx等同于下面的js代码
        // var child1 = React.createElement('li',null,'JSpang.com')
        // var child2 = React.createElement('li',null,'I Love React')
        // var root = React.createElement('ul',{className:'my-list'},child1,child2)
        )
    }
}

总结：JSX语法能够在React和Javascri里面写html