DEV Community

loading...
Cover image for React in 20 minutes

React in 20 minutes

jwp profile image John Peters Updated on ・1 min read

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)

pic
Editor guide