Create React App

Alternatively, use Create Create Create - - - React React React - - - App App App . Make sure you have Node (or Yarn) installed first.

npx create-react-app my-appcd my-appnpm start

(If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version.)

This launches thedevelopment server and displays a webpage:

Notice it says 'Edit src/App.js and save to reload.'. The development server watches for changes in relevant files. So, you will see changes immediately on the browser as you modify and save the file src/App.js, which originally looks like this:

RESETRUNFULL

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;

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;

'src/index.js' looks like this:

RESETRUNFULL

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'));// If you want to start measuring performance in your app, pass a function// to log results (for example: reportWebVitals(console.log))// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitalsreportWebVitals();

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'));// If you want to start measuring performance in your app, pass a function// to log results (for example: reportWebVitals(console.log))// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitalsreportWebVitals();

Create-React-App just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses the bundler Babel and forward-compatible compiler Webpack, but you do not need to know anything about them.

Notice above how images are imported for use in React. Alternatively, you can do this since Create-React-App uses WebPack:

RESETRUNFULL

<img src={require('path/to/one.jpeg')} />

<img src={require('path/to/one.jpeg')} />

To launch the website on a particular browser, create a file named '.env' on the root directory of the project and set the variable 'BROWSER', eg.:

BROWSER=chrome

To use a different port on a Windows machine, modify package.json:

"start": "set PORT=3006 && react-scripts start"

When you are ready to deploy to production, running 'npm run build' will create an obfuscated and minimized build of your app in the build folder. You can press CTRL-C to stop the development server first.

MENU

Create React App