React Getting Started

React, a powerful JavaScript library for building user interfaces, has transformed the way developers create web applications. Its component-based architecture and efficient rendering make it a popular choice among developers. This guide aims to provide beginners with a clear understanding of how to get started with React, including practical examples.

1. React Directly in HTML

Starting with React doesn’t require complex setups. You can begin by embedding React directly in your HTML file. Here’s how:

  • Include React and ReactDOM libraries in your HTML file using <script> tags.
  • Create a root div where your React code will render.
  • Write your first React component in a <script> tag.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>React in HTML</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script>
        class HelloMessage extends React.Component {
            render() {
                return <div>Hello {this.props.name}</div>;
            }
        }
        ReactDOM.render(<HelloMessage name="React" />, document.getElementById('root'));
    </script>
</body>
</html>

2. Setting up a React Environment

For larger projects, setting up a React environment is crucial. Here’s how you can set up a React environment using Create React App:

  • Install Node.js and npm (Node Package Manager).
  • Use the command line to run npx create-react-app my-app to create a new React application.
  • Navigate into your new app directory using cd my-app.

3. Run the React Application

After setting up your environment, running the application is straightforward:

  • In your project directory, run npm start.
  • This command starts the development server and opens your application in a web browser.

Example:

cd my-app
npm start

4. Modify the React Application

Modifying your React application is an essential part of learning. Start by editing the App.js file:

  • Open App.js in your text editor.
  • Modify the JSX code to change the UI.
  • Save your changes and the development server will automatically reload the page to reflect these changes.

Example:

4. Modify the React Application

Modifying your React application is an essential part of learning. Start by editing the App.js file:

Open App.js in your text editor.
Modify the JSX code to change the UI.
Save your changes and the development server will automatically reload the page to reflect these changes.
Example:

Conclusion

React is a robust tool for building dynamic and responsive web applications. By following these steps, you’re well on your way to understanding the basics of React. Remember, the key to mastering React is continuous practice and experimentation.

Happy coding!