react笔记二元素渲染 jsx 组件

上一篇安装react的两种方式，此处用第二种方式做案例

打开上一篇笔记中创建的项目（笔者用的是vs code，根据个人情况sublime hbuilder webstrom都可以）

npm使用react创建的项目目录结构如上图，首先说一下manifest.json基本配置

然后就只需要修改src/app.js就可以进行我们之后的代码编写了（至于服务启动原理笔者没有深究，有兴趣的朋友可以去研究，此处笔者主要是针对react学习笔录）。

元素渲染 jsx 组件

要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上。

react元素其实就是react使用的jsx语法形式---jsx就是javascript，只是JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

React元素可以是代码串/变量/组件

        //1 代码串
        ReactDOM.render(
        <h1>Hello, world!</h1>, document.getElementById('example') );

        //2 变量
        var element = <h1>Hello, world!</h1>;
        ReactDOM.render(
        element, document.getElementById('example') );

        //3 组建
        class Mod2 extends Component {
          render() {
            return (<h1>Hello, world!</h1>);
          }
        }
        ReactDOM.render(
        <Mod2 />, document.getElementById('example') );

使用jsx的好处

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

本案例项目入口js文件是以组件形式渲染到DOM根节点的

现在做一点小改动试一试渲染结果，打开app.js用下面的代码覆盖原app.js中的代码

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">我的第一个react应用</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

运行结果：标题变为修改的文字

下面自定义一个组件，说明都在代码里面

ok，关于元素渲染，jsx和组建要点和案列都在这里啦有什么漏掉的欢迎各路大神补充。