React Qiuck Note

6/19/2025, 2:01:46 PM

To get an overview of what React is, you can write React code directly in HTML.

<!DOCTYPE html>
<html>
  <head>
    <!-- Dev builds of React + ReactDOM -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <!-- In-browser Babel for JSX -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>

    <div id="mydiv"></div>

    <script type="text/babel">
      function Hello() {
        return <h1>Hello World!</h1>;
      }

      // Grab the container & mount
      const container = document.getElementById('mydiv');
      const root = ReactDOM.createRoot(container);
      root.render(<Hello />)
    </script>

  </body>
</html>

*the first two let us write React code in our JavaScripts, and the third, Babel, allows us to write JSX syntax and ES6 in older browsers.

But in order to use React in production, you need npm and Node.js installed.

Run this command to create a React application:

$ npx create-react-app app_name

$ cd my-react-app $ npm start then open localhost:3000 in browser

how to change the content: Inside the src/ directory there is a file called App.js, open it and it will look like this:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

you can make your changes to this file to edit main page.

here's the most basic style when you remove every removable part:

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

to update the react version to latest in project: $ npm i react@latest react-dom@latest