Tutorial React.JS Dasar (Bahasa Indonesia)

Introduction

This tutorial provides a comprehensive overview of React.js fundamentals, as demonstrated in the "Tutorial React.JS Dasar" video by Programmer Zaman Now. You'll learn how to set up a React project, create components, manage state, and utilize hooks, among other essential concepts. This guide is ideal for those looking to start their journey into React.js development.

Step 1: Setting Up Your React Project

• Install Node.js and npm (Node Package Manager) if not already installed.
• Open your terminal or command prompt.
• Create a new React project using the following command:

  npx create-react-app my-app
  

• Navigate into your project directory:

  cd my-app
  

• Start the development server:

  npm start
  

Step 2: Creating Your First Component

• Open the src folder in your project.
• Create a new file called HelloWorld.js and add the following code:

  import React from 'react';
  
  function HelloWorld() {
      return <h1>Hello, World!</h1>;
  }
  
  export default HelloWorld;
  

• Import and use the HelloWorld component in App.js:

  import HelloWorld from './HelloWorld';
  
  function App() {
      return (
          <div className="App">
              <HelloWorld />
          </div>
      );
  }
  

Step 3: Understanding JSX

• JSX (JavaScript XML) allows you to write HTML-like syntax in your JavaScript code.
• Example of JSX in a component:

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

Step 4: Passing Props to Components

• Props (short for properties) allow you to pass data to components.
• Modify HelloWorld.js to accept a prop:

  function HelloWorld(props) {
      return <h1>{props.message}</h1>;
  }
  

• Update how you use the HelloWorld component in App.js:

  <HelloWorld message="Hello, React!" />
  

Step 5: Creating Nested Components

• Create another component called Greeting.js:

  import React from 'react';
  
  function Greeting() {
      return <h2>Welcome to React!</h2>;
  }
  
  export default Greeting;
  

• Use Greeting inside HelloWorld:

  import Greeting from './Greeting';
  
  function HelloWorld(props) {
      return (
          <div>
              <h1>{props.message}</h1>
              <Greeting />
          </div>
      );
  }
  

Step 6: Managing State with Hooks

• Introduce the useState hook in your component:

  import React, { useState } from 'react';
  
  function Counter() {
      const [count, setCount] = useState(0);
  
      return (
          <div>
              <p>You clicked {count} times</p>
              <button onClick={() => setCount(count + 1)}>Click me</button>
          </div>
      );
  }
  

• Render the Counter component in App.js.

Step 7: Handling Events

• Add event handling to components:

  function handleClick() {
      alert('Button clicked!');
  }
  
  return <button onClick={handleClick}>Click me</button>;
  

Step 8: Applying Styles

• Style components using inline styles or CSS classes:

  const divStyle = {
      color: 'blue',
      backgroundColor: 'lightgray'
  };
  
  return <div style={divStyle}>Styled Component</div>;
  

Step 9: Using Effect Hook for Side Effects

• Use the useEffect hook for side effects, like fetching data:

  import React, { useEffect } from 'react';
  
  useEffect(() => {
      fetch('api/data')
          .then(response => response.json())
          .then(data => console.log(data));
  }, []);
  

Conclusion

This tutorial has covered the foundational steps to get started with React.js, including setting up a project, creating components, managing state, and handling events. As you progress, explore more advanced topics such as context and reducers for state management. For further learning, check the provided resources, including the source code and additional materials linked in the video description. Happy coding!