The Blog About Nothing…(but React)

React Logo

React is the most dynamic front-end library that i’ve used to date, It is also the most fun to use once you learn the ins && outs. This blog will act as a study sheet to those who need a refresher on the React library , Let’s get to it.

JSX?

Before we can start building a React application we need to discuss the syntax of this library, JSX. I know you’re thinking what is JSX? Well JSX is a JavaScript function returns some HTML code. These functions are known as Functional Components in JavaScript( more on this later). Not only can they return HTML code, they can also return Other components as seen in snippet below. JSX allows us to write HTML and JavaScript combined together in the same file. We can also execute any JavaScript code (logic, functions, variables, and so on) inside the HTML directly by using curly braces { }.

React code Snippet

Components !

Now that we know the correct syntax let’s move onto Components. A component is an independent, reusable code block which divides the UI into smaller pieces.

Components are independent and reusable bits of code. They are JavaScript functions. React has two types of components: functional and class.In this blog we’ll only discuss Functional Components.

Code Ran to create a react application

Functional Components

Functional components are the way to go if it’s your first time working in React.We can create a functional component by writing a JavaScript function. These functions may or may not receive data as parameters. In the older versions of React it was not possible to use state inside functional components. This has changed with the introduction of React Hooks, and now we can also use states in functional components as well.

Hooks?

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which “hook into” React state and lifecycle features from function components. It does not work inside classes.

Props ?

Props stand for “Properties.” They are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from one component to other components. It is similar to function arguments. Props are passed to the component in the same way as arguments passed in a function. Props are immutable so we cannot modify the props from inside the component. Inside the components, we can add attributes called props. These attributes are then added to the child component and used as an attribute to a html file to add some dynamically.

Props Example

State ?

The state in a component can change over time. The change can happen as a response to user action or an event. It is the heart of the react component which determines the behavior of the component and how it will render. They are also responsible for making a component dynamic and interactive.

State Example

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

webpack freelancing log book (week 9)

Quicksort in JavaScript

Basic react routing guide using react-router-dom.

How to inject and display an Angular build timestamp and application environment details in…

How To Create A Target Array in the Order Given in Javascript

BootstrapVue Form Input and Vuex

Search Algorithms

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
Da-Mell Faines

Da-Mell Faines

More from Medium

Software Rendering from Scratch

TOP TIPS TO STRENGTHEN YOUR IMMUNE SYSTEM WITH NITRIC OXIDE

Your project will perform better if you use useMemo and useCallback hooks.

WHY WHITESPACE IS SO IMPORTANT IN WEB DESIGN?