react js-tutorial

Creating a React Application with example

With so many build tools, starting a new React project is really challenging. Before writing a single line of React code, it utilises numerous dependencies, configuration files, and other requirements like Babel, Webpack, and ESLint. All of those complications are eliminated with the Create React App CLI tool, which simplifies React apps. To do this, first use NPM to install the package, and then use a few straightforward instructions to create a new React project.

An excellent tool for beginners that makes it simple to launch and manage React projects is create-react-app. It doesn’t require any manual configuration. You only need to concentrate on developing React code because this tool will wrap up all of the necessary dependencies, such as Webpack and Babel, for the React project itself. The tool optimises the software for production, creates the development environment, and offers a great developer experience.

Creating React App

If you have npx and Node.js installed, you can create a React application by using create-react-app.

If you’ve previously installed create-react-app globally, it is recommended that you uninstall the package to ensure npx always uses the latest version of create-react-app. To uninstall, run this command: npm uninstall -g create-react-app.

Run this command to create a React application named my-react-app:

npx create-react-app my-react-app

The create-react-app will set up everything you need to run a React application.

Run the React Application

Now you are ready to run your first real React application!

Run this command to move to the my-react-app directory:

cd my-react-app

Run this command to run the React application my-react-app:

npm start

A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:3000 in the address bar.

The result

Modify the React Application

So far so good, but how do I change the content?

Look in the my-react-app directory, and you will find a src folder. Inside the src folder there is a file called App.js, open it and it will look like this:

/myReactApp/src/App.js:

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;

Try changing the HTML content and save the file.

Notice that the changes are visible immediately after you save the file, you do not have to reload the browser!

Example

Replace all the content inside the <div className=”App”> with a <h1> element.

See the changes in the browser when you click Save.

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

Notice that we have removed the imports we do not need (logo.svg and App.css).

The result:

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.