As a tradition whenever you start learning any new framework or programming language you start with a Hello World program. In this tutorial we'll see how to create first React app which is going to be a Hello World React app.
Generate React Project using Create React App
If you want to create a React project named myreact-app go to the folder where you want to create this project and run the following command.
npx create-react-app myreact-app
This command takes care of installing all the required packages, creating a React project structure with all the proper configuration so that we can start writing components.
Read more about Create React App in this post- Creating a New React Project - create-react-app
Running default app
Once project is created change directory to the created project folder.
cd myreact-app
Then run following command to run the app in development mode. This command compiles the app and start the development server.
npm start
If there is no error then it should automatically run the application in your browser or once you see the application is successfully compiled open the browser and type URL- http://localhost:3000/ to see the default application.
So, create-react-app generates a React project, even has some generated code which you can run and verify that everything it fine with your project. If everything has gone as expected let's make changes in the project to display Hello World.
HelloWorld React application
It will be easy for you to see the project structure and create new files or edit existing files if you are using an editor. Visual Studio Code is a preferred editor for React development so we'll use that.
Open Visual Studio Code and select Open folder. Select the created myreact-app folder to open it.
In the project there will be a App.js file with in the src folder.
App.js file has the code that displays the default view.
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App
Since we are going to write our own code now, so delete the code in App.js and replace it with the following code.
function App() {
return (
<div className="App">
<h2>Hello World from React</h2>
</div>
);
}
export default App;
Because of hot reloading any changes you have made in the code will automatically refresh the app in the browser to reflect those changes. So, you should see "Hello World from React" displayed.
Creating HelloWorld Component
In React you will create many components which taken as a whole define your application. Making changes in App.js to display Hello World is ok but not a true reflection of how you will actually develop your app in React. So, now we'll create a HelloWorld component that does the job of displaying Hello World.
In React, components come in two types
- Functional components- Written as Java Script functions. Functional component with React hooks is the preferred way to write React code now.
- Class components- Written as a ES6 class that extends from React.Component
HelloWorld component as a functional component
In the src folder of your project create a new folder named 'Components' and with in that a sub-folder named 'Hello-World'. With in 'Hello-World' folder create a new file named 'HelloWorld.js'.
In HelloWorld.js write the following code.
const HelloWorld = () => {
return <h2>Hello World from React</h2>
}
export default HelloWorld;
Some points to note here are-
- Custom component name is always written in title case in React.
- Functional component is just a Java Script function and here it is written as an arrow function.
- In React you use JSX which is a syntax extension for JavaScript that lets you write HTML-like markup with in a JavaScript file. Read more about JSX in this post- JSX in React
- You need to export your component so that it can be imported into other componenects with the import declaration.
The components you write are effectively React elements which means you can use these components by wrapping them inside a tag just like HTML tags. If you want to use your HelloWorld component inside App component that's how you can do it.
import HelloWorld from "./Components/Hello-World/HelloWorld";
function App() {
return (
<div className="App">
<HelloWorld />
</div>
);
}
export default App;
Some points to note here are-
- You need to import components before using them in other React components.
- You can use component by wrapping it inside a tag. <HelloWorld />
With these changes you should now see your custom HelloWorld component being rendered.
HelloWorld component as a class component
If you want to write HelloWorld component as a class component then create a new file named HelloWorldClass.js inside HelloWorld folder and write the following code.
import React from "react";
class HelloWorldClass extends React.Component {
render() {
return <h2>Hello World From React ClassComponent</h2>;
}
}
export default HelloWorldClass;
Some points to note here are-
- A class component is an ECMAScript 6 (ES6) JavaScript class.
- Class components extend from the React.Component class.
- The render() method is required in a React.Component subclass and used to return an HTML element.
In order to render HelloWorldClass component change the import and tag in App.js file.
import HelloWorldClass from "./Components/Hello-World/HelloWorldClass";
function App() {
return (
<div className="App">
<HelloWorldClass />
</div>
);
}
export default App;
That's all for this topic React HelloWorld App - First React App. If you have any doubt or any suggestions to make please drop a comment. Thanks!
Related Topics
You may also like-
No comments:
Post a Comment