React: Getting Started (2)

React only refresh the changing tag, not all. But the normal way will refresh whole div tag. So input cannot hold value.

const render = () => {
  document.getElementById('mountNode').innerHTML = `
    

      Hello HTML
      
      
${(new Date).toLocaleTimeString()}
    
  `;
  
  ReactDOM.render(
    React.createElement(
      "div",
      null,
      "Hello React",
      React.createElement('input', null),
      React.createElement('pre', null, (new Date).toLocaleTimeString())
    ),
    document.getElementById('mountNode2')
  );
}

setInterval(render, 1000);

React: Getting Started (1)

Button() is a componnet, and the first letter must be capitalized.

function Button() {
  const [counter, setCounter] = useState(5);
  return (
    setCounter(counter * 2)}>
      {counter}
   
  );
}
ReactDOM.render(
  ,
  document.getElementById('mountNode'),
);

function Button() {
  const [counter, setCounter] = useState(5);
  const handleClick = () => setCounter(counter * 2);
  return (
      {counter}
  );
}
ReactDOM.render(
  ,
  document.getElementById('mountNode'),
);

function Button(props) {
  const handleClick = () => props.onClickFun(props.increment);
   return (
    
      +{props.increment}
    
  );
}

function Display(props) {
  return (
    
{props.message}
  );
}

function App() {
  const [counter, setCounter] = useState(0);
  const incrementCounter = (incrementVal) => setCounter(counter + incrementVal);
  
  return (
    

      
      
            
      
    
  );
}

ReactDOM.render(
  ,
  // //
  // 

  //   
  //   
  // 
,
  // //,
  document.getElementById('mountNode'),
);

bootstrap is not working for angular

Bootstrap not working with my Angular project

I suspect that problem is the path to the files. The best way to include dependencies is to add to the styles and scripts array in the build target of the "angular.json" file. You can use absolute paths instead of relative paths, so instead of "../node_modules/" you'd want to use "node_modules/".

Here is an example of what the build target may look like:

 "build": {
   "builder": "@angular-devkit/build-angular:browser",
   "options": {
     "styles": [                  
       "src/styles.css",
       "node_modules/bootstrap/dist/css/bootstrap.min.css"
       "node_modules/bootstrap/dist/css/bootstrap-theme.min.css"   
     ],
     "scripts": [
       "node_modules/jquery/dist/jquery.min.js",
       "node_modules/bootstrap/dist/js/bootstrap.min.js"
     ]
  }

You may already be including jQuery, but I didn't see it in your example. I added it here just in case.

npm install doesn’t add it to angular.json automatically. a little bit surprise.