React For Beginners

Posted on  by admin
-->

If you're brand new to using React, this guide will help you to get started with some basics.

Prerequisites

  • 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

React is a JavaScript library for building user interfaces.

  • 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.

  • Read this massive guide wherever suits you best. On the train, at your desk, standing in line.. There's a ton of great stuff to cover, so let's get started. React is officially defined as a "JavaScript library for creating user interfaces," but what does that really mean?

  • React is a library, made in JavaScript and which we code in JavaScript, to build great applications that run on the web. In other words, you do need to have a basic understanding of JavaScript to become a solid React programmer?

  • The most basic JavaScript concepts you should be familiar with are variables, basic data types, conditionals, array methods, functions, and ES modules. How do I learn all of these JavaScript skills? Check out the comprehensive guide to learn all of the JavaScript you need for React. React was written in JavaScript, which was built from the ground up for the express purpose of building web applications and gives us tools to do so.

  • JavaScript is a 20+ year old language which was created for adding small bits of behavior to the browser through scripts and was not designed for creating complete applications.

  • In other words, while JavaScript was used to create React, they were created for very different purposes. You can include any valid JavaScript code within your React applications. You can use any browser or window API, such as geolocation or the fetch API.

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.

  1. Also, since React (when it is compiled) runs in the browser, you can perform common JavaScript actions like DOM querying and manipulation.

  2. 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.

  3. 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.

  4. 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.

  1. You can create a new React app in seconds by going to react.new! JSX is meant to make creating user interfaces with JavaScript applications easier. It borrows its syntax from the most widely used programming language: HTML. As a result, JSX is a powerful tool to structure our applications.

    The code example below is the most basic example of a React element which displays the text "Hello World":.

  2. 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.

    Attributes that consist of multiple words are written in the camel-case syntax (like className) and have different names than standard HTML (class). JSX has this different way of writing attributes because it is actually made using JavaScript functions (more on this later). Unlike standard HTML, elements like input, img, or br must close with a trailing forward slash for it to be valid JSX.

    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.

  3. Inline styles must not be included as a string, but within an object. Once again, the style properties that we use must be written in the camel-case style. Style properties that accept pixel values (like width, height, padding, margin, etc), can use integers instead of strings. For example, fontSize: 22 instead of fontSize: "22px". New React developers may be wondering how it is beneficial that React can use JavaScript code.

  4. One simple example if that to conditionally hide or display JSX content, we can use any valid JavaScript conditional, like an if statement or switch statement. Where are we returning this code? Within a React component, which we will cover in a later section.

  5. As mentioned above, JSX is not HTML, but is composed of JavaScript functions. In fact, writing

    Hello React
    in JSX is just a more convenient and understandable way of writing code like the following:.

  6. Both pieces of code will have the same output of "Hello React". To write JSX and have the browser understand this different syntax, we must use a transpiler to convert JSX to these function calls. The most common transpiler is called Babel. Instead of just rendering one or another set of JSX elements, we can include them within React components. Components are created using what looks like a normal JavaScript function, but it's different in that it returns JSX elements. React components allow us to create more complex logic and structures within our React application than we would with JSX elements alone.

  7. 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.

Additional resources

  • 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.