freeCodeCamp

2.8 KiB

Raw Blame History

title
Your first React App

Your first React App

Installation

As specified in the previous artice (Installation), run the Create React App tool. After everything has finished, cd into the folder of your application and run npm start. This will start a development server and you are all set to start developing your app!

For node version 5.2+

npx create-react-app my-app

cd my-first-app
npm start

For node versions below 5

npm install -g create-react-app
create-react-app my-first-app

cd my-first-app
npm start

Editing the code

Start up your editor or IDE of choice and edit the App.js file in the src folder. When created with the react-create-app tool, there will already be some code in this file.

The code will consist of these parts:

Imports

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

This is used by webpack to import all required modules so that your code can use them. This code imports 3 modules:

React and Component, which allow us to use React as it should be used. (With components)
logo, which allows us to use logo.svg in this file.
./App.css, which imports the stylesheet for this file.

Classes/Components

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

React is a library that makes use of Components, which let you split up your UI into independent, reusable pieces, and think about each piece in isolation. There is already 1 component created, the App component. If you used the create-react-app tool, this component is the main component in the project and you should build around this central class.

We will look at components more detailed in next chapters.

Exports

When creating a class in react, you should export them after declaration, which allows you to use the component in another file by using the import keyword. You can use default after the export keyword to tell React that this is the main class of this file.

export default App;

View the results!

When you've started the development server by issuing the npm start command, you can view the changes you add to your project live in your browser. After issuing the command, npm should open a browser automatically displaying your app.

Sources

1. React documentation

2.8 KiB Raw Blame History