React for beginners

Shivam singh
2 min readNov 10, 2020
React App

Hi , there is the guide for beginners to get started with Reactjs .

How to install Reactjs :

First go your command line , where you want to create the react project file and in your command line (CMD) , write

D:/user >npx create-react-app <your-file-name>,

like: npx create-react-app HelloWorld

D:/user>cd HelloWorld→ D:/user/HelloWorld> → D:/user/HelloWorld>npm start

Congrats !!, you had created you first react App . Now , we have to open the HelloWorld file and start writing the code for our React App .

Let’s start ,

  1. Now , as we open our HelloWorld file , in any Text Editor like SubmitText , Vs Code (my recommendation ) and go to App.js file , you can do ctrl+P and type → App.js for finding file .
  2. Inside the return statement of App component , there is place where our frontend code is going to be displayed on the screen . We have to write inside that OR we can import any file in that return statement and instead of writing inside return we can write inside that imported file . Let me make it more clear by example :

Suppose , our App.js component is like

const App = () => {
return (
<div>hello // this is what going to be displayed on the browser
</div>
)}
// instead what you can do
1. make a folder named 'component' in src like -> src/component
2. In component make a folder named 'helloWord.jsx' or 'helloWord.js'
3. Now in hello.jsx write this code
import React form 'react'
const HelloWorld = () => {
return {
<div>hello World !!</div>
}
export default HelloWorld // This is important to put in every folder as because of this we can use it in other component by just importing it like in App.js we will use it like this,
App.js:
import React from 'react'
import HelloWorld from './component/helloWorld'
const App = () => {
return (
<div><HelloWorld />// this is what going to be displayed on the browser i.e, "hello World !!"
</div>
)}

Again Congrats !! , Now you have finally created you first Create App working on localhost:3000 // as i think or may be some other port (3000 is default)

--

--

Shivam singh
0 Followers

Second Year Student at NIT PATNA , in ECE , and an enthusiastic programmer as well .