Create Your first React App
Get started with React !
Introduction
Its always a confusing time when you wanted to start something new but could not find the reference or tutorial from scratch.Basically we will be creating a hello-world react app to get started with it.
Requirements
We will install nodebefore we create our app.You can click to go to node to install it.
Creating the App:
Now that we have our environment setup, let’s create our app.we will name this project as ‘firstapp’
Command:
Go to your terminal and type the command as :
$ npx create-react-app firstapp
React Project Structure:
After successfully creating our app,lets us look at the folder structure.The project structure consists of the following files as shown in the output.
node_modules:
This folder contains all the standard node packages that have been installed via npm
package.json:
This file lists all the node package dependencies and project configurations
package-lock.json:
package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json.
public folder:
This holds all your development files, your logo icons, favicon.ico, index.html etc.The index file is displayed at http://localhost:3000.
The App.js file in the src folder has the boiler plate codefor our hello-world app.
More terms to know
Components:
What are components?
Well as the name says,components are a pieces of code that are resusable.Props are used to pass the value from the one components as from child to parents.
JSX:
JSX are nothing but HTML inside the javascript.Since HTML cannot be written in javascript a new method was introduced to write as JSX.More information can be found on the documentation.
Starting the app:
Now that we have discussed enough about the project structure, let’s get started with the execution and see how our first app looks like.
In your terminal just type
$npm start
Hello world
As everything is working fine its time to run our favourite line of code,yes you guess it right it’s “Hello World” .
And that’s it you just run the ‘Hello World’ program in your browser
Your next task is to remove all the unnecessary code from app.js and then run a clean hello world program.
Congratulations you just created your first React app.Your next task will be continuing to learn the concepts of react.js.The best will be if you overlook at the documentation.
Thank you for your time,will be uploading about React futher.See you soon!
