In my last post, I covered the basics of ReactJs framework and steps for setup, In this post we will learn how to create a simple Hello World Application in ReactJS.
On your Command Prompt or on your VSCode Terminal (just make sure you are inside your project folder), type the following command:
create-react-app first-reactapp
followed by,
npm start
And you are good to go!
Folder Structure of a React App
Before getting into 'Hello World' App, let's explore the folder structure first,
-
Looking at the structure in the picture above, the project folder is FIRST_REACTAPP (you can name it according to your choice) which includes project files and folders.
-
Below the project folder you will notice node_modules, which contains all the dependencies which are third party libraries.
-
Then we have the public folder, where you will keep our HTML files like index.html. In the index.html file, you will notice a div tag with id as 'root' which is being referred to from the index.js file(check the index.js file inside the src folder).
-
Another file inside the public folder will be manifest.json, which contains metadata created by the create-react-app tool, for SEO purposes.
-
Then we have favicon file, which displays the React icon on the tab, as displayed below:
-
Then comes the src folder, which has been expanded in the picture above. The first file is app.css, which is the default css layout chosen by create-react-app tool.
-
Then comes App.js file, using which we can build the dynamic app.
-
Next is App.test.js, which is used for the testing purpose.
-
Then we have index.css, which is rendering style to the index.js file, which a user can modify.
-
Finally comes the index.js file, from where the application starts executing. In this file, you will find the code getElementById('root'), which is our div tag in the index.html file. This defines that this is the beginning point of our app.
What is this 'CREATE-REACT-APP' tool?
Its a fantastic tool, develped by the Facebook team, which gives a great head start, when someone is building React apps. Initially, there were a lot of manual steps involved in creating an app before you could actually run it on a server. However, Facebook developers community created this fab tool and automated the whole process for us. With this command, you are all set to start your React project immediately.
Hello World! project in ReactJS
Now we will be modifying the project created above to print "Hello World!" message when our application runs.
Step 1: Open the App.js file present inside the src folder, and make the following changes:
class App extends Component {
render() {
return(
<div className="App">
<p> Hello World!!!</p>
</div>
);
}
}
Leaving rest of the code as it is.
Step 2: Refresh the browser or start the server again using the command npm start, and see the magic.
So, this takes you one step closer to the React Application Development.
Wondering about words like 'Component', 'Render' etc., don't panic thats coming up next. So Stay Tuned!
You may also like:
