Courses/ React

React Tutorial

What is React:

React is a free and open-source front-end JavaScript library for building user interfaces based on components by Facebook Inc. It is maintained by Meta and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js. Wikipedia

Initial release date: 29 May 2013

Programming language: JavaScript

Developer(s): Meta and community

License: MIT License

Original author(s): Jordan Walke

Platform: Web platform

Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to JSX markup.

How Create Components:

Step 1: Export the component 

The export default prefix is a standard JavaScript syntax (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in Importing and Exporting Components!)

Step 2: Define the function 

With function Profile() { } you define a JavaScript function with the name Profile.

Pitfall

React components are regular JavaScript functions, but their names must start with a capital letter or they won’t work!

Step 3: Add markup 

The component returns an tag with src and alt attributes. is written like HTML, but it is actually JavaScript under the hood! This syntax is called JSX, and it lets you embed markup inside JavaScript.

Return statements can be written all on one line, as in this component:

return Katherine Johnson;

But if your markup isn’t all on the same line as the return keyword, you must wrap it in a pair of parentheses:

return (
 
 
    Katherine Johnson
 
);

Pitfall

Without parentheses, any code on the lines after return will be ignored!

Using a component 

Now that you’ve defined your Profile component, you can nest it inside other components. For example, you can export a Gallery component that uses multiple Profile components:

App.js file

function Profile() {
  return (
   
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}
 
export default function Gallery() {
  return (
   
     

Amazing scientists

     
     
     
   
  );
}

Components Conditional Rendering Example-

Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operators.

Conditionally returning JSX 

Let’s say you have a PackingList component rendering several Items, which can be marked as packed or not:

App.js file-

function Item({ name, isPacked }) {
  return
  • {name}
  • ;
    }
export default function PackingList() {
  return (
   
     

Sally Ride's Packing List


     

  •                   isPacked={true} 
              name="Space suit" 
            />
                      isPacked={true} 
              name="Helmet with a golden leaf" 
            />
                      isPacked={false} 
              name="Photo of Tam" 
            />
         

   
  );
}

 

 

 

Student Feedback

4.2 /5
Average Ratings
  • ( 79% )
  • ( 30% )
  • ( 69% )
  • ( 29% )
  • ( 10% )

02 Reviews

  • Jassica Treat

    Pellentesque ultrices orci id justo vehicula, non aliquam erat lacinia Mam rem aperiam, eaque ipsa qua tore veritatis.

  • Willimes Doe

    Pellentesque ultrices orci id justo vehicula, non aliquam erat lacinia Mam rem aperiam, eaque ipsa qua tore veritatis.

Post Review