React.js Tutorial | KNOWe Platform

KNOWe Learning Module

Learn React.js

Build modern, component-based user interfaces with React.js

Start Learning Jump to Mini Project

Why Learn React.js?

Component Based

React organizes interfaces into reusable components.

Industry Standard

Widely used in modern frontend development by top companies.

Project Setup

A React project can be created with tools like Vite or Create React App.

               npm create vite@latest my-react-app -- --template react

              cd my-react-app

              npm install

              npm run dev

Starts a local React development server at http://localhost:5173

JSX Basics

JSX lets you write HTML-like syntax inside JavaScript. Try it yourself!

Try JSX Code

Output (Console)

Components

Components are reusable pieces of UI. Try creating nested components!

Props (Properties)

Props pass data from parent to child components.

State Management

State stores data that can change over time (useState hook).

               // Real React syntax:

              const [count, setCount] = useState(0);

              <button onClick={() => setCount(count + 1)}>Count: {count}</button>

🎯 Mini Project: Profile Card Component

// Profile Card Component with Props
function ProfileCard({ name, role, avatar, skills = [] }) {
  return {
    render: () => {
      console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
      console.log(`👤 NAME: ${name}`);
      console.log(`💼 ROLE: ${role}`);
      console.log(`🎨 AVATAR: ${avatar || '👨‍💻'}`);
      if (skills.length > 0) {
        console.log(`🔧 SKILLS: ${skills.join(', ')}`);
      }
      console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
    }
  };
}

// Create multiple profile cards
const developer1 = ProfileCard({ 
  name: "Sarah Johnson", 
  role: "Frontend Developer", 
  avatar: "⚛️",
  skills: ["React", "JavaScript", "CSS"]
});
developer1.render();

const developer2 = ProfileCard({ 
  name: "Michael Chen", 
  role: "UI Engineer", 
  avatar: "🎨",
  skills: ["React.js", "TypeScript", "Tailwind"]
});
developer2.render();

const mentor = ProfileCard({ 
  name: "React Mentor", 
  role: "Course Instructor", 
  avatar: "📘",
  skills: ["React Hooks", "State Management", "JSX"]
});
mentor.render();

console.log("\n✅ Reusable ProfileCard component with props!");
console.log("💡 In real React, this would render actual HTML");

React.js Assessment

Test your understanding of React.js fundamentals.

1. React is mainly used to build:
Databases User interfaces Operating systems

2. What is used to pass data into a component?
props tables routes

3. State can change while the app is running.
True False

Complete the quiz and click submit.

Learner Progress

Track completion of this React.js module.

Course Progress0%

Intro & Why React.js

Project Setup & JSX

Components & Props

State Management

Mini Project (Profile Card)

Assessment Completed

Next Steps

✓ Practice building small reusable components
✓ Create forms and counters using useState
✓ Build a multi-component page layout
✓ Continue to useEffect, Context API, and React Router
✓ Learn about fetching data from APIs in React