2.3 example code react

In this short example we write our very first lines of React code. The goal is intentionally minimal so that everyone, even people who have never opened a React project before, can follow along. We pick a simple visual change to confirm the dev server is working: switching the heading color to white in the existing styles, saving the file, and watching the browser auto-reload.

Adding markup in App.js

In App.js, just below the existing <div className=...>, we insert a small <h1> that says "Hello World", save the file, and check that the browser displays it. As a second step we add a <p> with the text "course react.js" so the page now shows both elements stacked vertically. 

function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
      <p>course react.js</p>
    </div>
  );
}

It is intentionally a very small change, but it confirms three important things: the project is correctly served by npm start, the JSX inside the function is rendered as real HTML, and any modification to a file triggers a hot reload in the browser. From here it's your turn to experiment by adding new elements, changing the text and playing with the styles. Good luck with your projects, see you in the next video.

Summary

This lesson introduces a simple React code example to help beginners understand the basics. The instructor demonstrates changing text color to white, adding an h1 element with 'hello world', and a paragraph element with 'react js'. The goal is to provide an accessible starting point for learning React fundamentals.

Key points

  • Start with simple React code examples to build foundational understanding
  • Modify text color properties directly in your code (e.g., white text)
  • Use React components to render HTML elements like h1 and paragraph tags
  • Practice creating multiple elements and organizing them on the page
  • Hands-on coding is essential for mastering React basics

FAQ

What does this basic React example teach?

It teaches how to render HTML elements (h1 and p tags) with text content and apply styling properties like text color. This demonstrates the fundamental concept of how React allows developers to create and display elements on a webpage.

Why is it important to start with simple code examples?

Simple examples help beginners grasp the core concepts without overwhelming complexity. By starting with basic elements like headings and paragraphs, learners can understand how React works before moving to more advanced features and patterns.

How can I practice this lesson?

Try creating similar examples yourself. Experiment with different HTML elements, modify the text content, adjust colors and styling, and observe how changes affect the rendered output. Hands-on practice is key to solidifying your React knowledge.