📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.
▶️ Subscribe to My YouTube Channel (176K+ subscribers): Java Guides on YouTube
▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube
In the previous chapter, we have seen what is react and how to create a simple React app with an HTML file.
In this chapter, let's create a simple React hello world application using create-react-app CLI.
Setup and Installation
Let's begin by setting up our development environment to react. We need two things installed node js and a text editor of your choice.- For Node go to node.js org download and install the latest stable release if you already have it installed make sure to update it.
- For text editor I recommend VS Code you can download and install it from https://code.visualstudio.com/download website.
Create React App using Create React App CLI Tool
Step 1 - Create React App
npx
npx create-react-app my-app
npm
npm init react-app my-app
Yarn
yarn create react-app my-app
Output - Project Structure
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
Step 2 - Move to the Newly Created Directory
cd my-app
Step 3 - Change App.js File
import React, { Component } from 'react'; class App extends Component { render() { return ( <div className="App"> <h1>Hello World!</h1> </div> ); } } export default App;
Step 4 - Start React App
npm start
yarn start
❮ Previous Chapter Next Chapter ❯
Comments
Post a Comment
Leave Comment