React Course – Beginners Tutorial for React JavaScript Library

What You Will Learn

• How to set up a React project using a CDN
• How to write and render React code in a single line
• How to use the ReactDOM library to render elements on the screen

Key Concepts

React is a JavaScript library for building user interfaces, and it uses a proprietary syntax called JSX. The ReactDOM library is used to render React elements on the screen. To get started with React, you can include the library in your project using a CDN, and then use the render method to place elements on the screen. The render method takes two parameters: the element to render, and the container to render it in.

Code Examples

ReactDOM.render(<h1>Hello, everyone!</h1>, document.getElementById('root'));

This code renders an <h1> element with the text “Hello, everyone!” inside the element with the id “root”.

ReactDOM.render(<p>Hi, my name is Bob</p>, document.getElementById('root'));

This code renders a <p> element with the text “Hi, my name is Bob” inside the element with the id “root”.

ReactDOM.render(<ul><li>Thing one</li><li>Thing two</li></ul>, document.getElementById('root'));

This code renders an unordered list with two list items inside the element with the id “root”.

Lesson Summary

In this lesson, Bob Zero introduces the basics of React and how to get started with the library. He explains that React is a JavaScript library for building user interfaces, and that it uses a proprietary syntax called JSX. He also covers how to include React in a project using a CDN, and how to use the ReactDOM library to render elements on the screen. The lesson includes a hands-on exercise where students can practice writing and rendering React code in a single line. Bob emphasizes the importance of practice and repetition in learning React, and encourages students to take breaks and review previous material to solidify their understanding. By the end of this lesson, students should have a basic understanding of how to set up a React project and render elements on the screen.

Practice Exercise

Try rewriting the code that renders a paragraph element, but this time render an unordered list with two or more list items inside. Use the ReactDOM library and the render method to place the list on the screen.

What Is Next

In the next lesson, we will dive deeper into the benefits of using React and explore some of the key concepts and features of the library. We will also start building our first React project, a simple static page that showcases some of the key features of the library.