How To Set Up a React Project with Create React App

Step 1: Install Node.js and npm

First, you need to have Node.js and npm installed on your machine. You can download them from the official Node.js website.

Step 2: Create a New React Application

Once Node.js and npm are installed, you can create a new React application by running the following command:

npx create-react-app my-app

This command creates a new directory called my-app with all the necessary files and dependencies for a React application.

Step 3: Navigate to Your App Directory

After the installation is complete, navigate to your app directory:

cd my-app

Step 4: Start the Development Server

To start the development server and see your new React application in action, run:

npm start

This command runs the app in development mode and opens it in your default web browser. The page will automatically reload if you make edits.

How To Create React Elements with JSX

JSX, or JavaScript XML, is a syntax extension for JavaScript that looks similar to HTML. It allows you to write HTML structures in the same file as JavaScript code. JSX makes it easier to write and add HTML in React. Here’s how you can create React elements with JSX:

Basic JSX Example

To create a React element, you use JSX syntax which is then compiled into JavaScript code. For example:

const element = <h1>Hello, world!</h1>;

This JSX code creates a React element that displays "Hello, world!" in an <h1> tag. Under the hood, this JSX is transformed into a React.createElement call:

const element = React.createElement('h1', null, 'Hello, world!');

Embedding Expressions in JSX

You can embed JavaScript expressions inside curly braces in JSX. For example:

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

This will render "Hello, John!" in the <h1> tag.

JSX is Not Required, But Recommended

Using JSX is not a requirement in React. You can write React code without JSX, but it provides a more intuitive way to write UI components. Here’s how you would write the above example without JSX:

const element = React.createElement('h1', null, 'Hello, ', name, '!');

How To Create Custom Components in React

In React, components are the building blocks of your application. You can create reusable components to encapsulate logic and structure. Here’s a guide on how to create custom components in React:

Creating a Functional Component

Functional components are simple JavaScript functions that return JSX. For example:

function Welcome(props) {'{'}
return <h1>Hello, {props.name}!</h1>;
{'}'}
export default Welcome;

You can use this component in your application as follows:

<Welcome name="Sara" />

Creating a Class Component

Class components are ES6 classes that extend from React.Component and have a render() method. For example:

class Welcome extends React.Component {'{'}
render() {'{'}
return <h1>Hello, {this.props.name}!</h1>;
{'}'}
{'}'}
export default Welcome;

Class components have more features than functional components, but with the introduction of hooks, functional components can now handle state and side effects as well.

How To Customize React Components with Props

Props (short for properties) are a way to pass data from one component to another in React. They allow you to customize components and make them reusable. Here’s how you can use props to customize components:

Passing Props to Components

When you use a component, you can pass data to it as props. For example:

<Welcome name="Alice" />

This passes the name prop to the Welcome component. You can access this prop in the component like this:

function Welcome(props) {'{'}
return <h1>Hello, {props.name}!</h1>;
{'}'}

Default Props

You can define default values for props by setting a defaultProps property on the component:

Welcome.defaultProps = {'{'}
name: 'Stranger'
{'}'}

If the name prop is not provided, it will default to "Stranger".

How To Create Wrapper Components in React with Props

Wrapper components are components that render other components or elements. They are useful for adding common styles, behavior, or layout to a group of components. Here’s how you can create wrapper components:

Creating a Wrapper Component

For example, let’s create a Card component that wraps its children with a styled container:

function Card(props) {'{'}
return ('
<div className="card">
{props.children}
</div>
);
{'}'}

You can use this Card component to wrap other components:

<Card>
<h2>Title</h2>
<p>Some content</p>
</Card>

In this example, the Card component wraps its children (the <h2> and <p> elements) with a div that has the class card.

Content