AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

React 入门实例教程

2018-10-07 1129
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 目录html模板ReactDOM.render()JSX 语法组件 & propsprops & 纯函数事件列表渲染条件渲染this.

目录

  1. html模板
  2. ReactDOM.render()
  3. JSX 语法
  4. 组件 & props
  5. props & 纯函数
  6. 事件
  7. 列表渲染
  8. 条件渲染
  9. this.state
  10. style和class
  11. 生命周期
  12. 表单
  13. 获取真实的DOM节点
  14. this.props.children

一、html模板

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    // script的类型必须是text/babel
    <script type="text/babel">
     // todo
    </script>
  </body>
</html>

二、ReactDOM.render()

作用: 编译模板,把模板挂载到指定的节点上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="app">

    </div>
</body>

</html>


<script type="text/babel">
    ReactDOM.render(
        <h1>hello world</h1>,
        document.getElementById('app')
    )
</script>

三、JSX 语法

说明: jsx语法html代码和js代码可以混写而不需要加引号,可以这样做的原因是React和到jsx代码后会进行编译,使代码正确运行.当然jsx也是有它自己本身的规则:

  1. js代码需要用{}括起来
  2. React编译规则: 遇到<开头就看作是html,遇到{开头则视为js
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>

<script type="text/babel">
    const person = {
        name: 'huruqing',
        age: 108
    }; 
    const element = 
        <h1>
            <p>姓名: {person.name}</p>
            <p>年龄: {person.age}岁</p>
        </h1>;

        ReactDOM.render( 
            element, 
            document.getElementById('root')
        );
</script>

四、组件

  1. 用es5定义一个react组件
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root">



    </div>
</body>

</html>

<script type="text/babel">
    // es5组件的写法,一个函数就是一个组件
    function Welcome(props) {
      return (
            <h1>
                <p>姓名: {props.person.name}</p>
                <p>年龄: {props.person.age}</p>
            </h1>
        )
    }

    const person = {
        name: 'huruqing',
        age: 108
    }
    ReactDOM.render(
        <Welcome person={person} />,
        document.getElementById('root')
    )
</script>
  1. 用es6定义个react组件
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root">


        <h1>
            <p>姓名: </p>
            <p>年龄: </p>
        </h1>
    </div>
</body>

</html>

<script type="text/babel">
    /**
        * es6使用class的形式来创建组件,继承React的Component类,
        * 后面我们更多的使用这种方式来创建组件
     */ 
    class Welcome extends React.Component {
        constructor(props) {
            super(props);
        }
        render() {
            return (
                <h1>
                    <p>姓名: {this.props.person.name}</p>
                    <p>年龄: {this.props.person.age} </p>
                </h1>
            )
        }
    }

    const person = {
        name: 'huruqing',
        age: 108
    }
    ReactDOM.render(
        <Welcome person={person} />,
        document.getElementById('root')
    )
</script>

五、props和纯函数

  1. 相同的输入有相同的输出,输入可以确定输出,这就是纯函数
  2. 对待props就像对待纯函数一样,遵循可以通过输入确定输出
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="app">

    </div>
</body>

</html>

<script type="text/babel">
    // 这是个纯函数,输入什么,得到什么是一定的,同样的输入必定有同样的输出
    const sum = (a, b) => {
        return a + b; 
    }
    sum(2,3); // 5
    sum(2,3); // 5
    
    // 这个函数是不纯的,因为它修改了外部传进来的参数
    let count = 0;
    const getResult = (num) => {
        count++;
      return num*num + count;
    }
        getResult(2); // 5
        getResult(2); // 6
    // 所有的react组件都必须遵守的一条规则: 
    // 对待props就像对待纯函数一样,遵循可以通过输入确定输出
</script>

六、绑定事件

  1. 事件绑定的函数的this的指向会改变,需要使用bind来绑定函数的指向
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="app">

    </div>
</body>

</html>

<script type="text/babel">
    class Demo extends React.Component {
      constructor(props) {
          super(props);
          // 让函数的this指向class的实例
          this.handleClick = this.handleClick.bind(this);
      }

      handleClick (){
        this.getList();
      }
      
      getList() {
          alert('获取列表数据');
      }

      render() {
        return (
            <div>
                <button onClick={this.handleClick}>
                click
              </button>
            </div>
        );
      }
    }

ReactDOM.render(
    <Demo />,
    document.getElementById('app')
)
</script>
  1. 事件传参的方式
    react可以在{} 里面执行一个函数的调用
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root">

    </div>
</body>

</html>

<script type="text/babel">
    class Demo extends React.Component {
        constructor(props) {
            super(props);
            this.toDetail = this.toDetail.bind(this);
        }

    toDetail(id) {
        console.log(event);
        alert(id);
    }

    render() {
        return (
            <div>
                <ul>
                    <li> <button onClick={() => {this.toDetail(1001)}}>电影1</button> </li>
                    <li> <button onClick={() => {this.toDetail(1002)}}>电影2</button> </li>
                    <li> <button onClick={() => {this.toDetail(1003)}}>电影3</button> </li>
                </ul>
            </div>
        )
    }
}

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

七、列表渲染

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="root">

  </div>
</body>

</html>

<script type="text/babel">
  class List extends React.Component {
   constructor(props) {
     super(props);
   }

   render() {
    let heroList = this.props.heroList;
    return (
      <ul>
        {heroList.map(hero =>{
            return (
                <li key={hero.id}>
                  {hero.heroName} -- {hero.role}
                </li>
              )
            }
        )}
      </ul>
    )
   }
}

const heroList = [
  {id: 1, heroName: '亚瑟', role: '战士'},
  {id: 2, heroName: '牛魔王', role: '战士'},
  {id: 3, heroName: '鲁班七号', role: '射手'}
];

ReactDOM.render(
<List heroList={heroList} />,
  document.getElementById('root')
);   

</script>

八、条件渲染

  1. 通过 if 来控制渲染内容
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
   <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
   <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
   <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="app">

    </div>
</body>

</html>

<script type="text/babel">

class Welcome extends React.Component {
   constructor(props) {
       super(props);
   }

   render() {
       // 使用if else判断变量isLogin的值来决定显示什么内容
       if (this.props.isLogin) {
           return (
               <h1>欢迎回来, <button style={{color: 'blue'}}>退出登录</button></h1>
           )
       } else {
           return (
               <h1>你还没登录, <button  style={{color: 'red'}}>请登录</button></h1>
           )
       }
   }    

}

ReactDOM.render(
   <Welcome isLogin={false}/>,
   document.getElementById('app') 
)
</script>
  1. 通过三目运算符来判断
    使用三目运算符判断变量isLogin的值来决定显示什么内容
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>三目运算符</title>
  <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="app">

  </div>
</body>

</html>

<script type="text/babel">

class Welcome extends React.Component {
   constructor(props) {
       super(props);
   }

   render() {
       /**
       * 通过变量isLogin来决定显示什么内容
       * 使用三目运算符(内容较短用三目运算符)
       * 再长一点用上面if else的方式
       * 更长的内容封装成一个组件更合适
       */
      return (
        this.props.isLogin?
        <h1>欢迎回来, <button style={{color: 'blue'}}>退出登录</button></h1>:
         <h1>你还没登录, <button  style={{color: 'red'}}>请登录</button></h1>
      )
   }    

}

ReactDOM.render(
   <Welcome isLogin={true}/>,
   document.getElementById('app') 
)


</script>
  1. 通过与运算符 && 进行控制
    相当于if没有else的情况
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>三目运算符</title>
  <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="app">

  </div>
</body>

</html>

<script type="text/babel">

class Welcome extends React.Component {
   constructor(props) {
       super(props);
   }

   render() {
       /**
       * 如果值为true就显示,为false不显示,相当于vue的v-show
       */
      return (
        this.props.show && 
          <p>
            React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram
            的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
          </p>
      )
   }    

}

ReactDOM.render(
   <Welcome show={true}/>,
   document.getElementById('app') 
)
</script>

九、this.state和this.setState

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>三目运算符</title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
     <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
     <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="app">

    </div>
</body>

</html>

<script type="text/babel">

class Welcome extends React.Component {
   constructor(props) {
       super(props);
    // state的初始值
    this.state = {
         show: true
    }
    this.toggleMsg = this.toggleMsg.bind(this);
   }

toggleMsg(flag) {
  // 修改state里show的值
    this.setState({
        show: flag
   })
}

   render() {
      return (
        <div>
        <button onClick={()=> {this.toggleMsg(true)}}>显示</button>
        <button onClick={()=> {this.toggleMsg(false)}}>隐藏</button>
        <hr />
        {this.state.show && 
                <p>React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC       
                      框架，都不满意，就决定自己写一套，用来架设 Instagram
                      的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
                  </p>
        }
        </div>
      )
   }    
}

ReactDOM.render(
   <Welcome />,
   document.getElementById('app') 
)
</script>

十、样式和属性

  1. class使用className代替
  2. style需要用{{}},外面的{}代表这是js代码,里面的{}则是个js对象
  3. 属性是个变量加上{}即可
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
     <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
     <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
     <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <style>
        .green {
            color: green;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>

</html>

<script type="text/babel">
    let bg = '#999';
    let imgUrl = 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1598000148,3084276147&fm=58&s=36F6EC36C8A47E92227DC7C502007026';

    ReactDOM.render(
        <div>
            <p style={{backgroundColor: bg,width: '200px'}}>hello react</p>
            <p className="green">我的react</p>
            <img src={imgUrl}/>
        </div>,

        document.getElementById('root')
    )
</script>

十一、生命周期

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
  <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root">

    </div>
</body>

</html>

<script type="text/babel">
    /**
 * react的生命周期分成三种
 * 1. mount 挂载
 * 2. update 更新
 * 3. unmount 卸载
 */

 class Hello extends React.Component {

    componentWillMount() {
        console.log('即将挂载');
    }

    componentDidMount() {
        console.log('已挂载');
    }

    componentWillUpdate(nextProps, nextState) {
        console.log('将要更新');
    }

    componentDidUpdate(prevProps, prevState) {
        console.log('更新完毕');
    }

    // 默认每一次的修改都触发页面更新,此函数用于干预是否要更新,用于性能优化,
    shouldComponentUpdate(nextProps, nextState) {

    }

    componentWillUnmount() {
        console.log('将要卸载');
    }

    render() {
        return <div>生命周期</div>
    }
 }

ReactDOM.render(
  <Hello name="world"/>,
  document.getElementById('root')
);
</script>

十二、表单

  1. 单个input标签输入,让输入的数据与react数据流同步
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="root">

  </div>
</body>

</html>

<script type="text/babel">

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('你输入的用户名是: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <p>
          用户名:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </p>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
)
</script>
  1. 多个input表单输入
    如果有多个input标签输入,我们是否需要为每一个input绑定一个事件呢,会不会太麻烦了,
    其实不用,我们可以像下面这样来处理
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root">

    </div>
</body>

</html>

<script type="text/babel">
class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: 'huruqing',
      password: 123456,
            msg: ''
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
            <div>
                 <form>
                        <label>
                            用户名:
                            <input
                                name="username"
                                type="text"
                                value={this.state.username}
                                onChange={this.handleChange} />
                        </label>
                        <br />
                        <label>
                            密码:
                            <input
                                name="password"
                                type="text"
                                value={this.state.password}
                                onChange={this.handleChange} />
                        </label>
                    </form>
                    <p>
                        你输入的用户名是: {this.state.username} <br/>
                        你输入的密码是:   {this.state.password}
                    </p>
            </div>
    );
  }
}

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

十三、获取真实的DOM节点

通过ref可以获取真实dom节点,需要确保节点已经挂载

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root">

    </div>
</body>

</html>

<script type="text/babel">
    class MyComponent extends React.Component {
        constructor(props) {
            super(props);
            this.handleClick = this.handleClick.bind(this);
        }
        handleClick() {
            this.refs.myTextInput.focus();
        }
        render() {
            return (
                <div>
                    <input type="text" ref="myTextInput" />
                    <input type="button" value="获取焦点" onClick={this.handleClick} />
                </div>
            )
        }
}

ReactDOM.render(
    <MyComponent />,
    document.getElementById('root')
);
</script>

十四、this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root">

    </div>
</body>

</html>

<script type="text/babel">
class NotesList extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
    }
}

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);
</script>

参考:
React 入门实例教程 http://www.ruanyifeng.com/blog/2015/03/react.html
React中文文档 https://react.docschina.org/docs/hello-world.html

文章标签：
CDN
前端开发
Web App开发
JavaScript
关键词：
React Native入门
React Native教程
React Native实例
react.js实例
react.js入门
儒清
目录
相关文章
夏天49597
|
1月前
|
前端开发 JavaScript 定位技术
React 地图组件 Mapbox 入门指南
Mapbox 是一个强大的地图平台，提供丰富的地图数据和工具，支持多种开发语言和框架。本文介绍如何在 React 项目中使用 Mapbox，涵盖基础概念、安装配置、基本用法、常见问题及解决方法、高级用法等内容，并通过代码示例详细说明，帮助开发者提升地图应用的开发效率和用户体验。
夏天49597
91 2
夏天49597
|
1月前
|
前端开发 API UED
React 图片轮播 Carousel：从入门到进阶
本文介绍了在 React 中实现图片轮播（Carousel）的方法，从基础安装和配置 `react-slick` 开始，逐步讲解了常见问题如图片路径、性能优化、自定义样式和交互处理，以及高级话题如动态数据加载和响应式设计。通过详细示例，帮助开发者避免易错点，提升轮播图的用户体验。
夏天49597
39 3
夏天49597
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架，由 Vercel 开发。本文从基础概念出发，逐步探讨 Next.js 的常见问题、易错点及解决方法，并通过具体代码示例进行说明，帮助开发者快速构建高性能的 Web 应用。
夏天49597
90 10
一缕微风绕指柔
|
2月前
|
前端开发 JavaScript 开发者
探索现代Web前端技术：React框架入门
【10月更文挑战第9天】 探索现代Web前端技术：React框架入门
一缕微风绕指柔
37 1
听白
|
2月前
|
前端开发 JavaScript CDN
React 教程
10月更文挑战第6天
听白
50 3
游客zi3qmblbcdexu
|
3月前
|
Web App开发 前端开发 测试技术
react18基础教程系列--安装环境及packagejson文件分析
react18基础教程系列--安装环境及packagejson文件分析
游客zi3qmblbcdexu
83 20
君子世无双~
|
3月前
|
移动开发 前端开发 JavaScript
构建高效跨平台移动应用：React Native入门指南
【8月更文挑战第47天】在移动开发领域，React Native凭借其跨平台特性和高效的开发模式赢得了开发者的青睐。本文将通过一个简易的待办事项应用实例，带领读者快速入门React Native，并展示如何利用JavaScript和React框架构建具有原生性能的应用。我们将探讨环境配置、界面布局、状态管理和数据流，以及如何打包和发布您的应用。准备好，让我们开始React Native之旅！
君子世无双~
77 20
尹正杰
|
3月前
|
前端开发 JavaScript
React技术栈-React UI之ant-design使用入门
关于React技术栈中使用ant-design库的入门教程，包括了创建React应用、搭建开发环境、配置按需加载、编写和运行代码的步骤，以及遇到错误的解决方法。
尹正杰
49 2
React技术栈-React UI之ant-design使用入门
夏天49597
|
3月前
|
XML 存储 前端开发
React 基础入门
【9月更文挑战第1天】本文详细介绍了由Facebook开发的JavaScript库React，涵盖环境搭建、基本概念、常见问题及解决方案。首先，通过安装Node.js、npm和Create React App快速搭建开发环境；接着，讲解了JSX、组件（包括函数和类组件）、state和props等核心概念；最后，针对JSX语法错误、state异步更新及props与state混淆等问题提供了具体的解决方法和示例代码，帮助读者更好地理解和应用React。
夏天49597
42 2
请看我回答~
|
4月前
|
移动开发 前端开发 JavaScript
构建高效跨平台移动应用：React Native入门指南
【8月更文挑战第31天】 在移动开发领域，React Native凭借其跨平台特性和高效的开发模式赢得了开发者的青睐。本文将通过一个简易的待办事项应用实例，带领读者快速入门React Native，并展示如何利用JavaScript和React框架构建具有原生性能的应用。我们将探讨环境配置、界面布局、状态管理和数据流，以及如何打包和发布您的应用。准备好，让我们开始React Native之旅！
请看我回答~
54 0

热门文章

最新文章

  • 1
    一段探索React自建内部构造的旅程
  • 2
    react在action中进行路由跳转
  • 3
    React 手把手教你实现 mine-clearance (扫雷)（二）
  • 4
    #yyds干货盘点 【React工作记录二十八】重置ant design得样式
  • 5
    react笔记之React.Fragment
  • 6
    react中规范类型接口的使用
  • 7
    React全家桶： TodoLis案例_详细拆解
  • 8
    好客租房43-react组件基础综合案例-4获取评论信息
  • 9
    #yyds干货盘点# 【React工作记录五十二】react对数组进行展开显示
  • 10
    #yyds干货盘点# 【React工作记录二十六】数组下标对应缺位问题
  • 1
    使用React Native进行跨平台移动开发
    76
  • 2
    React Hooks实战：从useState到useContext深度解析
    108
  • 3
    在回调函数中重新渲染React组件
    58
  • 4
    React 项目用过什么脚手架（本题是开放性题目）
    61
  • 5
    React中的DOM diff算法是如何工作的
    61
  • 6
    react中JSX的详解
    73
  • 7
    react中的useEffect的使用
    59
  • 8
    写出易维护的代码｜React开发的设计模式及原则
    118
  • 9
    【专栏：HTML与CSS前端技术趋势篇】前端框架（React/Vue/Angular）与HTML/CSS的结合使用
    113
  • 10
    【TypeScript技术专栏】TypeScript与React的完美结合
    117

    • 相关课程

    更多
  • React 入门与实战
  • React 入门教程开发文档
  • Vue.js完全自学手册图文教程
  • Vue.js 入门与实战
  • jQuery开发教程
  • JavaScript入门与实战

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    DataWorks售前咨询