React-菜鸟学习笔记（一）

 

新公司的项目前端架构用的是react.js 之前孤陋寡闻并没听说过，想着后期开发和维护多少要会点前端的东西，就简单研究一下。个人的学习习惯能写代码的就不写文字，必要的地方加两行注释，代码一行行敲下去，运行过有问题及时发现，存档当作日后小问题备查的工具。感觉前端尤如玄学，标点啥的处处要留心，一个后台的多少懂点吧。

 

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
/**
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
    </div>
  )
  ReactDOM.render(
    element,
    document.getElementById('example')
  )
} 
setInterval(tick, 1000);
*/
/*自定义方法标签 < Clock date = {new Date()} />, date为其中一参数，可理解为属性*/
/**
function Clock(props){
    return(    
        <div>
            <h1>Hello, world!</h1>
            <h2>现在是 {props.date.toLocaleTimeString()}  {props.name}.</h2>
        </div>    
    )
}
 
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} name='slowcity' />,
    document.getElementById('example')
  );
}

setInterval(tick, 1000);
*/

/*自定义类标签 < Clock date = {new Date()} />, date为类对象*/
/**
class Clock extends React.Component{
    render(){
        return(
            <div>
                <h1>hello world </h1>
                <h2>现在是{ this.props.date.toLocaleTimeString()}</h2>
            </div>                
        )        
    }
}    
function tick(){
    ReactDOM.render(
        < Clock date = {new Date()} />,
        document.getElementById('example')        
    )    
}
setInterval(tick,1000)
*/

/*当element有多个标签时，多个标签放在div标签内部
React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px
添加myStyle内联样式
*/
 
var i = 3;
var myStyle = {
    fontSize: 20,
    color: '#FF0000'
}; 
const element = (
<div>
 {/*注释需要写在花括号中... react不支持ifelse 但支持三元运算*/}
<h1>Hello, world! { i==2?'ture':'false'}</h1>
<h1  style = {myStyle}>Hello, world! { i==2?1+1:4}</h1>
<h1>Hello, world! { i==3?'ture':'false'}</h1>
</div> 
 
)
 
ReactDOM.render(
  element,
  document.getElementById('example')
);

  


</script>

</body>
</html>

 

posted @ 2019-01-02 10:59  斑马森林  阅读(505)  评论(0)  编辑  收藏  举报