React学习记录:入门

前端之家收集整理的这篇文章主要介绍了React学习记录:入门前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先看阮一峰的教程,相当易懂:React 入门实例教程
然后配合官网文档 看慕课网视频 React入门

使用 Facebook 的 create-react-app 快速构建 React 开发环境
实战教程(2)React 基础

【React 模仿大众点评 webapp】实战教程
react资源汇总(react-tutorial)

常见问题

React.js 开发常见问题 Q&A

webpack-dev-server 打不开问题

node_modules/.bin/webpack-dev-server

这样开启是因为webpack-dev-server没有全局安装 而是装在了项目下
可以看这里原因

Link标签废弃

代码这里

这是因为我在写的时候 react-router已经更新到了router4 所以要对react-router进行升级

import {Router,Route,Link,browserHistory} from 'react-router'

ERROR in Entry module not found: Error: Cannot resolve module 'babel-loader' in /home/wuyeyun-18/资料/IMOOC-React-master/13-04

实例1

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Document</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script src="../build/jquery.min.js"></script>
  
</head>
<body>
    <div id="container"></div>
    
    <script type="text/babel">
      var TestClickComponent = React.createClass({
        handleClick: function (event) {
          var tip = this.refs.tip;
          if (tip.style.display === 'none') {
            tip.style.display = 'inline';
          }else {
            tip.style.display = 'none';
          }

          event.stopPropagation();
          event.preventDefault();
        },render: function () {
          return (
            <div>
              <button onClick={this.handleClick}>显示 | 隐藏</button><span ref="tip">测试点击</span>
            </div>
          );
        }
      });

      
      var TestInputComponent = React.createClass({
        
        getInitialState: function () {
          return {
            inputContent: ''
          };
        },changeHandler: function (event) {
         
          this.setState({inputContent: event.target.value});
          
          event.stopPropagation();
          event.preventDefault();
        },render: function () {
          return (
            <div>
              <input type="text" onChange={this.changeHandler}/>
              <span>{this.state.inputContent}</span>
            </div>
          )
        }
      });

      ReactDOM.render(
      <div>
        <TestClickComponent/>
        <TestInputComponent/>
      </div>,document.getElementById('container')
      );
    </script>
</body>
</html>
原文链接:https://www.f2er.com/react/304073.html

猜你在找的React相关文章