react学习之路2

小咪咪 2023-02-25 08:41 18阅读 0赞

我终于有时间更新了

之前的学习博客不行了，知识断节，还是用官方些的网站学习毕竟好，我又发现了一个好的网站。 [https://react.docschina.org/docs/introducing-jsx.html][https_react.docschina.org_docs_introducing-jsx.html]

从最基础就可以一步一步的学习react。我们在react学习之路1已经生成了最初的react框架。现在让我们实现语言的最最最基础代码

这是我们的传统

hello world！

index.html

<!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
        <title>React学习之路</title>
      </head>
    
      <body>
        <div id="root"></div>
      </body>
    </html>

index.js

import React from 'react';
    import ReactDOM from 'react-dom';
    // import App from './App';
    import './index.css';
    import 'bootstrap/dist/css/bootstrap.css';
    
    ReactDOM.render(
      // <App />,
      <h1>hello world</h1>,
      document.getElementById('root')
    );

![20200711162752447.png][]

好了，我们完成了入门的第二步。

[https://react.docschina.org/docs/introducing-jsx.html][https_react.docschina.org_docs_introducing-jsx.html]网站都在上面其实已经没必要看我的博客了，我是用来写给自己的。

接下来是react的特色，jsx

import React from 'react';
    import ReactDOM from 'react-dom';
    // import App from './App';
    import './index.css';
    import 'bootstrap/dist/css/bootstrap.css';
    
    const name = 'GYD';
    const element =<h1>Hello, {name}</h1>
    ReactDOM.render(
      // <App />,
      element,
      document.getElementById('root')
    );

在 JSX 语法中，你可以在大括号内放置任何有效的 [JavaScript 表达式][JavaScript]。例如，`2 + 2`，`user.firstName` 或 `formatName(user)` 都是有效的 JavaScript 表达式。

今日总结

import React from 'react';
    import ReactDOM from 'react-dom';
    // import App from './App';
    import './index.css';
    import 'bootstrap/dist/css/bootstrap.css';
    
    const user = {
      firstName:'GYD2',
      lastName:'Object'
    };
    const name = 'GYD';
    // const title = response.potentiallyMaliciousInput;
    const element7 = React.createElement(
      'h1',
      {className: 'greeting'},
      'Hello, world!'
    );
    
    function formatName(user) {
      return user.firstName + ' ' + user.lastName;
    }
    function getGreeting(user) {
      if(user) {
      return <h1>Hello, {formatName(user)}!</h1>;
      }
      return <h1>Hello, {name}!</h1>;
    }
    function tick() {
      const element = (
        <div>
          <h1>Hello,world!</h1>
          <h2>IT is {new Date().toLocaleTimeString()}!</h2>
        </div>
      );
      ReactDOM.render(
        // <App />,
        element,
        document.getElementById('root')
      );
    }
    setInterval(tick,1000);
    const element = <h1>Hello, {formatName(user)}!</h1>
    //user.firstName 或 formatName(user)
    const element2 =<h1>Hello, {user.formatName}!</h1>
    const element3 =<h1>Hello, {getGreeting(user)}!</h1>
    const element4 = <div tabIndex='0'><h1>Hello, {formatName(user)}!</h1></div>
    // const element5 = <img src={user.avatarUal}></img>
    // const element6 = <h1>{title}</h1>
    
    ReactDOM.render(
      // <App />,
      element,
      document.getElementById('root')
      
    );

[https_react.docschina.org_docs_introducing-jsx.html]: https://react.docschina.org/docs/introducing-jsx.html
[20200711162752447.png]: /images/20230209/80ab344204144b4c9cd5aafa82385607.png
[JavaScript]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions