Learn reactjs from scratch

Welcome to CodeFirst Academy’s comprehensive guide on building your first ReactJS application. ReactJS, developed by Facebook, has become one of the most popular JavaScript libraries for building user interfaces. Whether you’re a beginner or have some experience in web development, this step-by-step guide will help you get started with ReactJS and build a simple yet functional application.

Why Learn ReactJS?

Before we dive into the steps, let’s understand why ReactJS is worth learning:

1. Component-Based Architecture: React allows you to build encapsulated components that manage their own state, making your code more modular and reusable.
2. Virtual DOM: React’s virtual DOM ensures efficient updates and rendering, leading to improved performance.
3. Community and Ecosystem: With a large community and a rich ecosystem of libraries and tools, finding solutions and learning resources is easier than ever.

Prerequisites

Before starting, make sure you have the following:

• Basic understanding of HTML, CSS, and JavaScript.
• Node.js and npm installed on your computer.
• A code editor like Visual Studio Code.

Step 1: Setting Up the Development Environment

To start building a React application, you need to set up your development environment. Follow these steps:

1. Install Node.js and npm: Download and install Node.js which comes with npm (Node Package Manager).
2. Create a React Application: Use the Create React App tool to set up a new React project.

   bash

   Copy code

   npx create-react-app my-first-react-app
cd my-first-react-app
npm start

3. Project Structure: Your project directory will look something like this:

   java

   Copy code

   my-first-react-app/
├── node_modules/
├── public/
├── src/
├── .gitignore
├── package.json
├── README.md


Step 2: Understanding the Basics

1. JSX: JSX stands for JavaScript XML. It allows you to write HTML in React. For example:

   jsx

   Copy code

   const element = <h1>Hello, world!</h1>;

2. Components: Components are the building blocks of a React application. They can be functional or class-based. For instance:

   jsx

   Copy code

   function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

3. State and Props: Props are inputs to components, and state is a built-in object that stores property values that belong to the component.

Step 3: Creating Your First Component

Let’s create a simple component that displays a welcome message.

1. Create a New Component: In the src folder, create a new file called Welcome.js and add the following code:

   jsx

   Copy code

   import React from 'react';

   function Welcome(props) {
   return <h1>Hello, {props.name}!</h1>;
   }

   export default Welcome;

2. Use the Component: Modify App.js to use the Welcome component.

   jsx

   Copy code

   import React from 'react';
import Welcome from './Welcome';function App() {
   return (
   <div className=“App”>
   <Welcome name=“CodeFirst Academy” />
   </div>
   );
   }export default App;

Step 4: Adding State and Handling Events

Let’s enhance our application by adding a state and handling events.

1. Stateful Component: Modify Welcome.js to use state.

   jsx

   Copy code

   import React, { useState } from 'react';

   function Welcome(props) {
   const [count, setCount] = useState(0);

   return (
   <div>
   <h1>Hello, {props.name}!</h1>
   <p>You clicked {count} times</p>
   <button onClick={() => setCount(count + 1)}>Click me</button>
   </div>
   );
   }

   export default Welcome;

2. Update App.js: No changes needed as the Welcome component already has the state and event handler.

Step 5: Styling Your Application

1. CSS Modules: Create a CSS module for your component. Create a file named Welcome.module.css and add some styles:

   css

   Copy code

   .welcome {
text-align: center;
margin-top: 50px;
}

2. Apply Styles: Modify Welcome.js to apply the styles.

   jsx

   Copy code

   import React, { useState } from 'react';
import styles from './Welcome.module.css';function Welcome(props) {
   const [count, setCount] = useState(0);return (
   <div className={styles.welcome}>
   <h1>Hello, {props.name}!</h1>
   <p>You clicked {count} times</p>
   <button onClick={() => setCount(count + 1)}>Click me</button>
   </div>
   );
   }

   export default Welcome;

Step 6: Deploying Your Application

1. Build for Production: Run the following command to create a production build.

   bash

   Copy code

   npm run build

2. Deploy to a Hosting Service: You can deploy your application using various hosting services like Netlify, Vercel, or GitHub Pages.

Check Our Youtube Channel:Learning Partner Digital

Conclusion

Congratulations! You have successfully built and deployed your first ReactJS application. ReactJS is a powerful library that offers a lot of flexibility and efficiency in building user interfaces. By following this guide, you’ve taken the first step towards mastering ReactJS. Keep exploring, building, and improving your skills.

For more in-depth tutorials and advanced concepts, join us at CodeFirst Academy where we offer comprehensive courses and hands-on training in ReactJS and other modern web development technologies.

visit for more information : CodeFirst placements