react学习之路2

我终于有时间更新了

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

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

这是我们的传统

hello world！

index.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(
  // ,
  
hello world
,
  document.getElementById('root')
);

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

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 =
Hello, {name}
ReactDOM.render(
  // ,
  element,
  document.getElementById('root')
);

在 JSX 语法中，你可以在大括号内放置任何有效的 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 
Hello, {formatName(user)}!
;
  }
  return 
Hello, {name}!
;
}
function tick() {
  const element = (
    

      
Hello,world!
      
IT is {new Date().toLocaleTimeString()}!
    
  );
  ReactDOM.render(
    // ,
    element,
    document.getElementById('root')
  );
}
setInterval(tick,1000);
const element = 
Hello, {formatName(user)}!
//user.firstName 或 formatName(user)
const element2 =
Hello, {user.formatName}!
const element3 =
Hello, {getGreeting(user)}!
const element4 = 
Hello, {formatName(user)}!
// const element5 = 
// const element6 = 
{title}

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