React: Core Concepts

Written by Stephanie Segura | February 6, 2021

Thank you for visiting this post! Be sure to also take a look at my other work on LinkedIn, Github, and my website.

In May of 2020, I began my journey as a software developer. I was extremely overwhelmed with the mountain of information in front of me. Not knowing where to start, I just dove right in. As my one year anniversary nears closer, I felt compelled to create a guide to one of my favorite Javascript libraries around: React.

This is part one in my series of React. I will begin by going over the Core Concepts, and then work my way up to more advanced things like React Hooks.

Elements and JSX

React Component is a JavaScript class or function that accepts props.

React Element is what gets returned from a component’s props. It’s an object that virtually describes the DOM nodes that a component represents.

There are two types of components: Functional and Class

Functional vs Class Component

For the duration of this series, I will be using Functional components as Functional components are much easier to read and test since they’re plain JavaScript functions without state or lifecycle-hooks.

JSX elements are expressions. It allows you to write HTML in our JavaScript. Because it’s an expression, JSX can be assigned to variables or even be displayed conditionally.

In addition to the above, JSX also allows to nest expressions and elements.

To get your React App started, you need at minimum, the following:

  1. ReactDOM.render() — this is to render our app

2. A JSX element — called a root node in this context

3. A DOM element within which to mount the app — usually a div with an id of root in an index.html file

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store