React Home

React is a JavaScript library designed for constructing user interfaces and is commonly used for developing single-page applications. It enables the creation of reusable UI components, enhancing modularity and efficiency in development.

Learning by Examples

Our “Show React” tool simplifies demonstrating React by displaying both the code and its output.

Example:

import React from ‘react’;

import ReactDOM from ‘react-dom/client’;

function Hello(props) {

return <h1>Hello World!</h1>;

}

const container = document.getElementById(“root”);

const root = ReactDOM.createRoot(container);

root.render(<Hello />);

Create React App

To set up a React environment for learning and testing, use the create-react-app tool, which requires Node.js.

Open your terminal in the desired directory and run npx create-react-app my-react-app.

npx create-react-app my-react-app

create-react-app sets up all the necessary components to run a React application.

If you’ve previously installed create-react-app globally, it’s recommended to uninstall it with npm uninstall -g create-react-app to ensure npx uses the latest version.

Run the React Application

Use this command to navigate to the my-react-app directory:

cd my-react-app

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

npm start

A new browser window will open with your newly created React app! If it doesn’t, open your browser and enter localhost:3000 in the address bar.

The result:

You’ll learn more about create-react-app in the React Get Started chapter.

What You Should Already Know

Prior to starting with React.js, you should have an intermediate understanding of:

HTML
CSS
JavaScript