DEV Community

Cover image for React in 20 minutes
John Peters
John Peters

Posted on • Updated on

React in 20 minutes

Developers new to react can take these steps to get started.

Prerequisites

  • Install Visual Studio Code (VSC)
  • Install Node

Get Going

  • Create a folder named "source"
  • Open VSC to that folder.
  • In VSC click on Terminal then New Terminal
  • Type this in the new terminal to install react:

npm i react
Enter fullscreen mode Exit fullscreen mode
  • Create a react project, from the terminal.
 npx create-react-app my-app
Enter fullscreen mode Exit fullscreen mode

This command says "from the node_modules folder (npx), call the command 'create-react-app' and name the project my-app.

  • In VSC type in File/Open Folder and select the folder my-app.

The project should look like this:

Alt Text

  • Start the application:

npm run start

Enter fullscreen mode Exit fullscreen mode

That's it, Congratulations! for installing and seeing your first react application.

This is what the App.js file contains:

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;

Enter fullscreen mode Exit fullscreen mode

JWP2021 React

Discussion (0)