If you're brand new to using React, this guide will help you to get started with some basics.
- Welcome to the React for Beginners guide. It's designed to teach you all the core React concepts that you need to know to start building React applications in 2021.
- I created this resource to give you the most complete and beginner-friendly path to learn React from the ground up.
A few basic terms and concepts
By the end you will have a thorough understanding of tons of essential React concepts, including:.
The Why, What, and How of React. How to Easily Create React Apps. JSX and Basic Syntax. Components and Props. Events in React. State and State Management.
The Basics of React Hooks. Download the cheatsheet in PDF format here (it takes 5 seconds). Here are some quick wins from grabbing the downloadable version:. Quick reference guide to review however and whenever. Tons of copyable code snippets for easy reuse.
Try using React in Visual Studio Code
There are many ways to create an application with React (see the React Overview for examples). This tutorial will walk through how to use create-react-app to fast-forward the set up for a functioning React app so that you can see it running and focus on experimenting with the code, not yet concerning yourself with the build tools.
Putting React in an HTML file with external scripts . Using an in-browser React environment like CodeSandbox. Creating a React app on your computer using a tool like Create React App.
Which is the best approach for you? The best way to create your application depends on what you want to do with it.
If you want to create a complete web application that you want to ultimately push to the web, it is best to create that React application on your computer using a tool like Create React App.
If you are interested in creating React apps on your computer, check out the complete guide to using Create React App.
The easiest and most beginner-friendly way to create and build React apps for learning and prototyping is to use a tool like CodeSandbox.
Try using React with an API
Using the same Hello World! app that you built with React and updated with Visual Studio Code, let's try adding an API call to display some data.
The code example below is the most basic example of a React element which displays the text "Hello World":.
Note that to be displayed in the browser, React elements need to be rendered (using ReactDOM.render()). We can write valid HTML elements in JSX, but what differs slightly is the way some attributes are written.
Elements that should have two tags, such as div, main or button, must have their closing, second tag in JSX, otherwise it will result in a syntax error.
Inline styles are written differently as well as compared to plain HTML.
Think of React components as our custom React elements that have their own functionality. As we know, functions allow us to create our own functionality and reuse it where we like across our application.
- Components are reusable wherever we like across our app and as many times as we like.
- How would we render or display the returned JSX from the component above? We use the React import to parse the JSX and ReactDOM to render our component to a root element with the id of "root."
- Components can return valid JSX elements, as well as strings, numbers, booleans, the value null, as well as arrays and fragments.