React 搭建项目

创建 react 项目
 create-react-app   name 
开启服务器
 npm start
文件引入
import React from ' react '
// 引入react中的 component ES6语法
import React , {Component} from 'react';
var obj ={ a:1,b:2 ,c:3}
var {c}=obj
 console.log(c)
// c = 3
jsx不是标准的JavaScript,但是在React 中会被 babel编译为JavaScript;
组件书写方式
可以在src/App.js文件中写组件
类方式
class App extends Component{
  constructor(props){ // 官方建议里面写 (props)
    super(props)//官方建议写 , 咱也不敢问。
    this.state = {
        title:' 这是标题' ,
        color' red'
    }
  }
  render(){
    return (
      <div className="App">
         <p style={color:this.state.red}>{this.state.title}</p> //
      </div>
    );
  }
}
函数方式
function App(){
var title = ' 这是标题 '
  return(
    <div>
        <p>{title}</p>
    </div>
  )    
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • React简介 (1)简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaSc...
    鱼鱼吃猫猫阅读 5,582评论 1 6
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 12,462评论 2 35
  • [toc] REACT react :1.用来构建用户界面的 JAVASCRIPT 库2.react 专注于视图层...
    拨开云雾0521阅读 5,331评论 0 1
  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 11,410评论 0 9
  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 12,683评论 1 33