Skip to main content

Create and Run a React app and JSX Basics

In this article, we're going to cover, step-by-step, how to quickly and easily create and run a React app.

Prerequisite

1) You'll need to have Node >= 14.0.0 and npm >= 5.6 on your machine. More Info

2) A code editor to work with the project files: Visual Studio Code.

How to create and run a React app

1) Create a React app

"Create React App" is the best way to begin developing a new single-page React application.

npx create-react-app@5.0.1 cb-react-app
cd cb-react-app
npm start

The "npx" gives us the ability to use the "create-react-app" package without needing to first instal it. More Info

Open this app in "Visual Studio Code."

The "node_modules" directory contains all the React dependency packages: react, react-dom, and their transitive dependencies like webpack, babal, ESLint, etc.

The "public" folder contains static files (that don't need to be processed by webpack) such as index.html, JS files, images, etc.

The "src" folder contains actual react-related code, i.e., components, tests, CSS, etc.

The "package.json" is used to store the metadata associated with the project as well as the list of dependency packages.

To start a React project, you can simply run:

npm start

2) Add some code

Let's go ahead and delete everything in the "src" folder, so that we can add our own code to understand it better.

2.1) src/index.js

React 18 adds the new root API that comes up with the new out-of-the-box improvements.

To render a React element, first pass the DOM element to ReactDOM.createRoot(), then pass the React element to root.render().

The createRoot() method constructs a React root by passing the root element as a parameter.

Now, if you run the app with "npm start" and go to the browser at "http://localhost:3000/", you should see something like this:


2.2) Create a component

Components can be either classes or functions; let's create a function-style App component (src/App.js).

src/App.js

The html-like syntax after return is actually JSX, and it is a syntax extension to JavaScript.

2.3) Use a component

Let's now use our newly created component "App" in "src/index.js".

After changes, our updated src/index.js will look something like this:

We have replaced plain HTML with a component. Now go to the browser at "http://localhost:3000/," and you should see something like this:

2.4) Add a CSS

Let's see how to import a CSS file (src/index.css) to style a component's elements.

Let's now use our newly created css "index.css" in src/index.js:

After changes, our updated "src/index.js" will look something like this:

Now go to the browser at "http://localhost:3000/," and you should see something like this:

3) How does this work?

The entire React app is rendered on a single HTML page, public/index.html, that too within a div with the id="root."

We don't need to change anything within the body tags of public/index.html. However, we may need to change the metadata in the head tags, i.e., title, description, favicon, etc.

4) Class Components vs. Functional Components

A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element. In order to create a class component, we must extend from React Component and write a render function that returns a React element.

Functional components are stateless, as they are mainly responsible for rendering the user interface. Class components are stateful components because they implement logic and state.


React lifecycle methods like "componentDidMount" can be used inside class components but not in functional components.

Hooks can be used in functional components to make them stateful. In class components, constructors are used to store state.

5) JSX Basics

5.1) Only one parent element

To render multiple elements in React, you need to wrap them within a single parent element because components can only return a single element.

Not Allowed:

Correct allowed syntax:

5.2) Use "className" instead of "class"

In JSX we use "className" instead of "class", because "class" is a JavaScript keyword.

5.3) Non JSX elements

Fundamentally, JSX element is just syntactic sugar for calling React.createElement(component, props, ...children).

With JSX

Without JSX

5.3) Dynamic JSX

Everything between {} in the JSX is just JavaScript, so you can do the following:

Labels:

Comments

Post a Comment

Popular posts from this blog

Deploying Spring Boot microservices on Kubernetes Cluster

This article guides you through the deployment of two Spring Boot microservices, namely "order-service" and "inventory-service," on Kubernetes using "MiniKube" . We will establish communication between them, with "order-service" making calls to an endpoint in "inventory-service." Additionally, we will configure "order-service" to be accessible from the local machine's browser . 1) Create Spring Boot microservices The Spring Boot microservices, "order-service" and "inventory-service," have been developed and can be found in this GitHub repository. If you are interested in learning more about creating Spring Boot REST microservices, please refer to this or this (Reactive) link. 2) Build Docker Images The Docker images for both "order-service" and "inventory-service" have already been generated and deployed on DockerHub, as shown below. codeburps/order-service cod...
Post a Comment
Read more

Circuit Breaker Pattern with Resilience4J in a Spring Boot Application

Read Also: Spring Cloud Circuit Breaker + Resilience4j Resilience4j is a lightweight fault tolerance library that draws inspiration from Netflix Hystrix but is specifically crafted for functional programming. The library offers higher-order functions, known as decorators , designed to augment any functional interface, lambda expression, or method reference with features such as Circuit Breaker, Rate Limiter, Retry, or Bulkhead . These functionalities can be seamlessly integrated within a project, class, or even applied to a single method. It's possible to layer multiple decorators on any functional interface, lambda expression, or method reference, allowing for versatile and customizable fault tolerance. While numerous annotation-based implementations exist online, this article focuses solely on the reactive approach using router predicates and router functions . How Circuit Breaker Pattern works? In general, a circuit breaker functions as an automatic electrical s...
Post a Comment
Read more

How to create a basic Spring 6 project using Maven

Below is a step-by-step guide to creating a basic Spring project using Maven. 1) Create a Maven Project Use the following Maven command to create a new Maven project. mvn archetype:generate -DgroupId=com.tb -DartifactId=spring-demo -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false 2) Import in IntelliJ IDEA If you haven't already, open IntelliJ IDEA on your system. Go to "File" > "New" > "Project from Existing Sources..." . In the file dialog, navigate to the directory where your Maven project is located. Select the pom.xml file within the project directory and click "Open." 3) Update pom.xml In total, the application requires the below-mentioned dependencies: 4) Create Spring Configuration Create a Java configuration class that uses annotations to define your Spring beans and their dependencies. This class should be annotated with @Configuration . 5) Create the Main Application C...
Post a Comment
Read more